1、什么是HTML属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
2、属性实例
- <a href="http://baidu.com" target="_blank"></a>
- <input type="text" name="username"></input>
- <div style="width:100px;height:100px;background-color:red;" title="一个红色的盒子"></div>
- <div id="box" class="box"></div>
- 其它:还有很多标签有各自的属性,后面会一一讲解。
3、HTML 属性书写规则
- 属性值应该始终被包括在引号内。
- 双引号是最常用的,不过使用单引号也没有问题。
- 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
例如:<div title='my name is "John ShotGun" Nelson'></div>
- 属性和属性值对大小写不敏感。
4、HTML 属性参考手册
accesskey | 设置访问元素的键盘快捷键,如: <a href="http://baidu.com" accesskey="h">HTML 教程</a> |
class | 规定元素的类名(classname)如:<h1 class="intro">标题 1</h1>。 可通过样式表中的.intro选中该标签。 |
contenteditable | 规定是否可编辑元素的内容。<p contenteditable="true">这是一个可编辑段落。</p> 让非input、textarea元素变得可输入。 |
contextmenu | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 <div contextmenu="mymenu"> |
data-* | 用于存储页面的自定义数据,如:<li data-animal-type="bird">Owl</li> 可以在点击该元素时在点击事件中获取该元素的属性值:event.target.dataset.animalType |
dir | 设置元素中内容的文本方向。<bdo dir="rtl">文本方向从右到左!</bdo> |
draggable | 指定某个元素是否可以拖动:需要跟js配合使用,可制作类似于酷狗音乐的长按排序。 |
dropzone | 指定是否将数据复制,移动,或链接,或删除。<div dropzone="copy"></div> |
hidden | hidden 属性规定对元素进行隐藏。<p hidden>这是一段隐藏的段落。</p> |
id | 规定元素的唯一 id:在样式表中通过#id去获取元素,给获取的元素设定样式。 |
lang | 设置元素中内容的语言代码。<p lang="fr">这是一个段落。</p> |
spellcheck | 检测元素是否拼写错误。<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p> |
style | 规定元素的行内样式(inline style)<p style="color:green">这是绿色文字的段落。</p> |
tabindex | 设置元素的 Tab 键控制次序。<a href="//www.google.com/" tabindex="1">Google</a><br /> |
title | 规定元素的额外信息(可在工具提示中显示) |
translate | 指定是否一个元素的值在页面载入时是否需要翻译,所有浏览器目前不支持该属性 |
关注我的公众号,每天会持续不断更新编程干货。