3.5 标签属性语法

原创声明。未经许可，不得转载，作者：小步教程。

标签属性也称HTML属性，简称属性。

3.5.1 语法

（1）基本语法

<标签 标签属性1="值1" 标签属性2="值2" …>标签内容体</标签>

标签属性名不区分大小写，通常小写。示例如下。

<p title="小步教程" id="p1" class="class1">xiaobuteach.com 这是很长的一个段落</p>
<input type="button" value="登录">

p元素设置三个标签属性：title、id、class；input元素设置两个标签属性：type、value。value表示文本框与按钮的文本内容。运行效果如下。

属性title表示鼠标悬停元素时显示信息；id与class目前仅设置未使用。

（2）无值的标签属性

无值的标签属性具有“是否”含义。

<标签 标签属性1 标签属性2="值2" …>标签内容体</标签>

“标签属性1”，只需要添加名称无需值。前面的表单标签已经使用3处无值的标签属性。

<input type="checkbox" checked>
<input type="radio" name="gender" checked>
<select>
    <option>广东</option>
    <option selected>福建</option>
</select>

checked表示复选框与单选框的选中，selected表示下拉选项option的选中。

3.5.2 分类

标签属性分为两类：全局属性、特有属性。

1、全局属性

全局属性表示所有标签都有的标签属性。常用的全局属性包括：style、id、class、title。

（1）style属性：设置样式。

（2）class属性：设置类名，用于类选择器设置样式。

（3）id属性：设置id名称，用于id选择器设置样式或JS操作DOM。

（4）title属性：设置鼠标悬停弹出内容。

2、特有属性

特有标签属性适用于特定标签。以input标签为例，type、value、readonly属性是它的特有属性，一般标签没有。MDN每个标签的帮助页列举它的特有属性。一个标签常用的特有属性很少，需要的时候查看。

常用标签属性与适用标签说明

属性名	标签名	描述
（1）外部资源
href	a、link	关联资源地址
src	img、iframe、script	嵌入内容地址
rel	link	目标对象与链接对象的关系
（2）链接
target	a	打开位置
（3）表格
rowspan	td、th	跨行数量
colspan	td、th	跨列数量
（4）表单元素
for	label	绑定元素
type	input、button	表单元素类型
value	input、button	表单元素值
checked	input	是否选中
selected	option	是否选中
readonly	input、teatarea	只读
disabled	input、button、select、textarea	禁用
rows	textarea	文本域的行数