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

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标签

  1. 标签类型
    <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" />

  1. 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属性,有getpost备选值,适用于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事件

  1. Windows事件是针对Windows对象触发的时间,应用于<body>标签。
  2. Form事件是由HTML表单内的动作触发,几乎所有HTML元素都具有表单时间属性,但一般多用于表单元素。
  3. Keybord事件即键盘事件,用户通过操作键盘触发键盘事件。
  4. Mouse事件即鼠标事件,由鼠标或用户类似动作触发。
  5. Media事件是由媒介如视频、音频等触发的事件,适用于所有 HTML 元素,但常见于媒介元素中,比如<audio>、<embed>、<img>、<object> 以及 <video>等元素。

w3cschool对时间属性尽心了详细的介绍,点击参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,859评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,310评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 人人都想赢,可是,你赢的决心有多坚定? 前几天的自己,否定功利性,有种自以为是的清高。想要屠龙的本领,又看不惯杀戮...
    Jiu_Chen阅读 331评论 2 5
  • 1. 知乎上有个问题叫:你在哪一刻体验到了真正的贫富差距。 里面有个高票答案说 男友家在大山,就是大家笔下那种大山...
    阿玫小酱当当囧阅读 615评论 0 0