html5笔记——html5标记
作者:舒晴
上一篇:html5基础.
下一篇:html5列表.
图像标记
常用图像格式
- GIF格式
支持动画,无损的图像格式,支持透明,但只能处理256种颜色。在网页制作中,GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。 - PNG格式
相对于GIF格式体积更小,支持alpha透明,颜色过渡平滑,不支持动画。通常,图片保存为PNG会在同等质量下获得比GIF更小的体积,适合用来现实颜色复杂的透明图片。 - JPG格式
所显示的颜色比前两种格式要多的多,但是一种有损压缩的图像格式。每修改一次图片都会造成一些图像数据的丢失。网页制作过程中类似于照片的图像比如横幅广告、商品图片、较大的插图等。
图像标记
基本语法格式:
<img src="图像URL"/>
- <img/属性>:
- 绝对路径与相对路径:
- 相对路径
- 相对路径不带有盘符,常以HTML网页文件为起点,通过层级关系描述目标图像的位置。
- 用法:
<img src="images/logo.gif" alt="" />
- 相对路径的设置
- 图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可,如 <img src=“logo.gif" />
- 图像文件位于html文件下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如 <img src=“img/img01/logo.gif" />
- 图像文件位于html文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如
<img src="../logo.gif" />
超链接标签
创建超链接
基本语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<a>
标记是一个行内标记,用于定义超链接,href和target为其常用属性:
- href:用于指定链接目标的url地址,当为a标记应用href属性时,它就具有了超链接的功能
- target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,意为在原窗口中打开,_blank为在新窗口中打开。
锚点连接
通过创建锚点链接,用户能够快速定位到目标内容,提高了信息检索的速度。 实现这样的链接需要先定义一个作为目标端点,再定义到书签的链接。
-
链接到网页中的指定点分为两个过程
- 确定目的地
- 设置到目的地的链接
-
命名目的地
- 使用id属性(或name属性)给文档中的目标元素赋予唯一的名称(片段标识符),使用id来命名元素,可以用作片段标识符,即链接目的地
<a id="ChapterFive">第五章</a>
<h1 id="ChapterFive">第五章</h1>
<a name="ChapterFive">第五章</a>
- 使用id属性(或name属性)给文档中的目标元素赋予唯一的名称(片段标识符),使用id来命名元素,可以用作片段标识符,即链接目的地
-
连接到目的地
- 使用带有href属性的a元素,来提供链接的位置,在片段前使用#号
<a href="#ChapterFive">第五章</a>
- 使用带有href属性的a元素,来提供链接的位置,在片段前使用#号
-
链接到另一文档的片段
- 在URL的结尾添加片段名称,就可以链接到另一文档中的片段
<a href="test.html#stratH">Some Words</a>
<a herf="http://www.example.com/test.html#startH">some words</a>
- 在URL的结尾添加片段名称,就可以链接到另一文档中的片段