HTML常用标签属性及事件属性

2017-04-27 本文已影响0人二吊子程序媛

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