从头再学html5
来源:互联网 发布:圣剑网络 编辑:程序博客网 时间:2024/06/05 23:52
一 图片相关标签
Img标签和src属性: 在HTML里面,图像是由<img>标签定义的。<img>是空标签,意思是说,它只拥有属性,而没有结束标签。想要在页面上显示一个图像,需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。
插入图像的语法:
<img src="url">
URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下: “http://www.w3schools.com/images/boat.gif”。当浏览器在文档中遇到img标签时,就放置一个图像。如果把img标签放在两个段落之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。
alt属性: alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。
<img src="image/yinzai.gif alt="Big Boat,找不到!">
“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯,它有助于更好地显示信息,而且,对纯文本浏览器很有用。
基本注意点——有用的技巧: 如果一个HTML文档包含10个图像,那么为了正确显示这个页面,需要加载11个文件。加载图像是需要时间的,所以请谨慎使用图像。
看个例子吧:
<html><title>图片相关标签</title><body><p>在HTML里面,图像是由< img>标签定义的。< img>是空标签,意思是说,它只拥有属性,而没有结束标签。<br><img src="f:\我的图片\112___04\IMG_1425.JPG" alt="Big Boat,找不到!" width="100" height="80" ></p><p><img src="F:\我的图片\112___04\IMG_1425.JPG" alt="Big Boat,找不到!" width="150" height="120" ></p><p><img src="F:\我的图片\112___04\IMG_1425.JPG" alt="Big Boat,找不到!" width="250" height="220" ></p><p>You can also use an image as a link:<a href="back.htm">pictures<!--<img border="0" src="F:\我的图片\112___04\IMG_1425.JPG">--></a></p></body></html>
显示如下:
图片的大小事可以自己设定的,一像素为单位,如果不设置大小,则会铺满屏幕。图片地址可以是绝对地址或者相对地址。
二 超链相关标签:
锚标签和href属性:
HTML使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。
创建一个锚的语法:
<a href="url">你想要显示的提示</a>
锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。
<a herf="http://www.baidu.com">百度一下</a>
这个连接到百度的主页。
target属性:
使用target属性,你可以定义从什么地方打开链接地址。下面这段代码打开一个新的浏览器窗口来打开链接:
<a href="http://www.baidu.com" target ="_blank">baidu一下</a>
锚标签和name属性name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。下面是命名锚的语法:
<a name="label">text</a>
你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚并指向了一个网页:
<a name="D:\java资料\html学习\html练习\yin629\yin629.html #tips">第五节。。。。</a>
基本注意点——有用的技巧:
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href="http://www.w3schools.com/html",将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href="http://www.w3schools.com/html/"。命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。
现在来看个完整的示例吧:
<html><title>超链接标签</title><body><p><a href="http://www.baidu.com" target ="_blank">baidu一下</a></p><p><a name="D:\java资料\html学习\html练习\yin629\yin629.html #tips">第五节。。。。</a></P><p><a href="D:\java资料\html学习\html练习\yin629\yin629.html" target="_blank">Last Page</a><p>If you set the target attribute of a link to "_blank",the link will open in a new window.</p></body></html>
图片如下:
暂时就这么多了,多试试自己写的。
- 从头再学html5
- 从头再学htm3
- 从头再学html4
- 从头再学html 1
- 从头再学html 2
- 从头再学html 6
- 从头开始学代理
- 从头学C#-01
- time.h从头学
- android从头学起
- 从头开始学算法
- 从头开始学JAVA
- 从头开始学C
- 从头开始学电路
- 从头开始学jsp
- 英语从头学
- Java从头学(一)
- Java从头学(二)
- 原生的window.onload与jQuery下的$(document).ready()的区别
- 手机屏幕类型分析
- 首发Zend Studio 9.0.3正式版注册破解(2012-05-10更新)
- test
- 用户体验之视觉体验
- 从头再学html5
- 常见MIME类型
- Struts 1与Struts 2的区别比较
- 哈夫曼树简介及代码实现
- jquery 写的分页组件
- 【USACO-Chapter1-1.3】【贪心】Barn Repair
- C#匿名类型
- 用户空间栈 & 系统空间栈
- Opencv2.3.0在linux平台上的安装