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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

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