《前端开发从零学起》Lesson.4 HTML元素标签的属性及其用法
在Lesson.3中，我们讲到通过a标签添加href属性与对应的值,实现页面跳转的实例。
本节课程进一步讲述什么是HTML属性以及HTML标签中常用的元素属性及其用法。
HTML标签属性是什么？
HTML文档中的标签都可以设置相应的属性，属性可以告诉浏览器，该元素还包含哪些额外的信息；浏览器会根据这些额外的信息对HTML元素标签进行额外的处理。
HTML元素属性必须设置在元素的起始标签中，例如：<a href='http://www.frontopen.com'></a> 属性href设置在<a>标签中，而没有设置在</a>标签中。
HTML元素属性的写法为：属性名称=“属性值”，如上例子为href="http://www.frontopen.com"
通用HTML元素属性
通用HTML元素属性是指，可以使用在所有HTML元素中的属性。其属性作用在不同的HTML元素标签中都会发挥相同的作用。常见的通用HTML元素及其作用如下：
[id=“main”] 为元素设置唯一的标识符为“main”。该属性可以用于读取CSS样式表中的样式，也可以用于javascript程序精准快速的遍历查找元素。一个id的值在同一个HTML文档中只能出现一次，出现多次会导致上一个同值的id在程序遍历时失效。
[class="box"] 该属性主要用于读取CSS样式表中对应“box”属性的值组。同一个文档中可以出现无数次相同值的class属性。
[style="color:#fff"] 该属性为CSS样式的内嵌写法，其值用于直接显示相应的元素样式。其color:#fff 是使带有该属性的HTML标签内部的文字颜色变为白色。
常用的HTML元素属性
1.<a>标签
[href="http://www.frontopen.com"] 该属性主要用于用户触发所在<a>标签点击事件时的页面跳转地址。其中href的值用于告诉浏览器需要跳转的新页面的地址，也称为链接。
[title="关于FrontOpen"] 该属使a标签在用户鼠标悬停在其锚点之上时，提示该标签跳转页面的大致信息。其信息主要用于告诉用户，该链接包含的大致信息，以便用户判断是否需要进行跳转。title属性的值也是搜索引擎判断a标签链接内容的一个依据，因此在SEO站内优化使显得尤为重要。
[target="_blank"] 该属性告诉浏览器，该链接使用那种方式打开链接目标的页面。
_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
2.<img>标签
[src="http://www.frontopen.com/wp-content/themes/frontopen2/images/dsj.gif"] 该属性用于指定img标签的图像源文件地址，通过为img指定文件，使img标签在页面上显示对应的图片。
[width="199"] 该属性用于设置图像的宽度，其单位为px(像素)。也可以设定图像的宽度为百分比，从而使图像在某种情况下可以根据浏览器窗口的大小进行伸缩。设定固定的宽度后，图像将不会按照图片的原始宽度进行显示，请注意！
[height="99"] 该属性与width属性类似，用于设定图像的高度，其单位为px(像素)，该属性不可设置百分比高度。设定固定的高度后，图像将不会按照图片的原始高度显示。
结语：本课的目的主要是帮助大家了解与认识常用的HTML属性。通过以上几类属性，基本可以完成大部分的前端开发工作，因此希望大家能够牢记，并熟练应用。由于HTML中元素标签众多，属性也非常多，本课就不一一细讲。平时在工作中可以使用dreamweaver的代码提示功能，分别测试每个标签的不同属性，尽快掌握HTML元素的属性用法。
