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对时间属性尽心了详细的介绍,点击参考。