HTML中的标签属性可以赋予标签更多的信息，属性总是以key :value即名称/值对的形式出现。属性可分为全局属性与私有属性，全局属性是指所有HTML标签都可以使用，而私有属性是针对部分标签设置的；下面分别从标签全局属性、私有属性和事件属性这三个维度进行介绍。
标签全局属性
标签全局属性常见的有：class、id、style、title、dir、lang以及HTML5新增的属性draggable、dragzone、hidden、spellcheck等属性，更详细的信息可以查看HTML全局属性。
代码示例
<div class = "divExample" id = "divOnly" style="width:10px ; color:#fefefe"></div>
class属性
class属性规定元素的类名，每个元素可以被赋予一个或多个类，多个元素可以共享一个类，类名最好不要以数字开头。
class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title
代码示例
<h1 class="intro important">Header 1</h1>
h1.intro
{
color:blue;
text-align:center;
}
.important {background-color:yellow;}
id属性
id属性规定元素唯一的id，id在文档中必须是唯一的，不能重复，id属性可以作为链接锚，通过js或css为带有id的元素指定样式
代码示例
<p id="exp">内容示例 1</p>
#exp{
color:#fefefe;
font-size:10px;
}
style属性
style属性规定元素的行内样式，优先级最高，将会覆盖任何全局的样式设定。
代码示例
<p style="color:red;font-size:10px">内容示例2</p>
标签私有属性
不同的标签会有自己的私有属性，比如<a>标签的href属性，<img>标签的src属性等，接下来我将对常用标签的私有属性作详细的介绍
a标签私有属性
<a>标签属性有：href、target、download、hreflang、media、 rel、target 以及 type等属性，详细可参考a标签属性。我们此处只详细介绍href、target等属性
1. href属性
href属性指示链接的目标网址，网址可以是绝对网址或相对网址；如果不给<a>标签添加href属性，则download, hreflang, media, rel, target 以及 type属性不可用。
<a href="http://www.baidu.com">百度一下</a><a href="http://www.baidu.com">百度一下</a>
2. target属性
target属性规定在何处打开链接文档，属性对应的值有_blank、_parent、_top、_self、framename。
_blank：在新窗口中打开被链接文档；
_parent：在父框架集中打开被链接文档；
_top：在整个窗口中打开被链接文档；
_self：默认,在相同的框架中打开被链接文档；
framename：在指定的框架中打开被链接文档。
代码示例
<a href="http://www.baidu.com" target="_blank">百度一下</a>
3. CSS伪类为<a>标签添加样式
a:link链接未被访问时添加的样式
a:hover鼠标悬浮在链接上时添加的样式
a:active链接被点击时添加的样式
a:visited链接访问时添加的样式
代码示例
<a href="http://baidu.com" target="_blank">百度一下</a>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
img标签
<img>标签具有的属性有src和alt，可选的属性有height、width、ismap等
1. src属性
src属性规定显示图像的url，分为绝对链接与相对链接，具体可参考图片路径。
2. alt属性
alt属性规定图像的替代文本，在图像无法显示时或图片禁止显示时，可用文本代替显示。
代码示例
<img src="" alt="图片信息" width="10px" heigth="10px"/>
input标签
- 标签类型
<input>标签类型有：button、checkbox、file、hidden、image、password、radio、reset、submit、text以及HTML5新增的类型email url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color。
我的上一篇文章HTML 基础知识及HTML5总结
对input标签原有类型进行了介绍，这篇文章主要对HTML5新增标签类型进行介绍。
- email类型
email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。
代码示例邮箱: <input type="email" name="user_email" /> - url类型
url类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。
代码示例网址输入: <input type="url" name="url_input" /> - number类型
number类型用于应该包含数值的输入域。属性有max、min、step、min。
max表示输入数字的最大值，min表示输入数字的最小值，step表示输入数字之间的间隔，value表示初始显示值
代码示例
<input type="number" max="12" min = "0" step ="3" value = "6"> - range 类型
range 类型用于应该包含一定范围内数字值的输入域，range 类型显示为滑动条。range类型的属性与number类型一致。
代码示例：
<input type="range" max="12" min = "0" step ="3" value = "6"> - Date pickers类型
HTML5 拥有多个可供选取日期和时间的新输入类型：- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
代码示例：<input type="week" name="user_date" />
- input标签属性
<input>标签属性有type、name、value、readonly、disabled以及HTML5新增属性placeholder、formmethod、formtarget、list、step等属性
-
type定义input类型，上一章节已经做过详细的介绍。 -
name定义input元素的名称 -
value定义input元素的值 -
readonly规定input元素输入值为只读的，但input元素的事件属性都正常使用 -
disabled规定input元素加载时禁用，包括事件属性 -
placeholder规定input元素的提示信息 -
list表示引用包含输入字段的预定义选项的 datalist -
formmethod覆盖表单的method属性，有get和post备选值，适用于submit、image类型标签 -
formtarget覆盖表单的 target 属性
代码示例
<datalist id="url_list">
<option label="百度一下" value="http://www.baidu.com" />
<option label="北邮人论坛" value="http://www.bbs.byr.cn" />
<option label="爱奇艺" value="http://www.iqiyi.com" />
</datalist>
事件属性
HTML事件包含Windows事件、Form事件、Keybord事件、Mouse事件和Media事件
- Windows事件是针对Windows对象触发的时间，应用于
<body>标签。 - Form事件是由HTML表单内的动作触发，几乎所有HTML元素都具有表单时间属性，但一般多用于表单元素。
- Keybord事件即键盘事件，用户通过操作键盘触发键盘事件。
- Mouse事件即鼠标事件，由鼠标或用户类似动作触发。
- Media事件是由媒介如视频、音频等触发的事件，适用于所有 HTML 元素，但常见于媒介元素中，比如
<audio>、<embed>、<img>、<object> 以及 <video>等元素。
w3cschool对时间属性尽心了详细的介绍，点击参考。
网友评论