说明

​​网道HTML 教程​​学习笔记

1、简介

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。

注意：

1、属性名与标签名一样，不区分大小写。

2、属性名与属性值之间，通过等号=连接。

3、有些属性是布尔属性，属性值可以省略，表示打开该属性。

2、全局属性

全局属性（global attributes）是所有元素都可以使用的属性。

2.1、id

id 属性是元素在网页内的唯一标识符。

2.2、class

class 属性用来对网页元素进行分类。

2.3、title

title 属性用来为元素添加附加说明。

2.4、tabindex

浏览器允许使用 Tab 键，遍历网页元素。

按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。

tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。

不同的属性值有不同的含义：

  • 负整数：该元素可以获得焦点（比如focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。
  • 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
  • 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。

2.5、accesskey

accesskey属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。

2.6、style

style属性用来指定当前元素的 CSS 样式。

2.7、hidden

hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。

<div hidden>本句不会显示在页面上。</div>

注意：

CSS 的可见性设置，高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。

2.8、lang，dir

1、lang 属性指定网页元素使用的语言。

lang 属性的值，必须符合 ​​BCP47​​ 的标准。下面是一些常见的语言代码。

  • ​​zh​​：中文
  • ​​zh-Hans​​：简体中文
  • ​​zh-Hant​​：繁体中文
  • ​​en​​：英语
  • ​​en-US​​：美国英语
  • ​​en-GB​​：英国英语
  • ​​es​​：西班牙语
  • ​​fr​​：法语

2、dir 属性表示文字的阅读方向，有三个可能的值。

  • ​​ltr​​：从左到右阅读，比如英语。
  • ​​rtl​​：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类。
  • ​​auto​​：浏览器根据内容的解析结果，自行决定。

2.9、contenteditable

HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。

  • ​​true​​ 或 空字符串：内容可以编辑
  • ​​false​​：不可以编辑

注意：

该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

2.10、spellcheck

spellcheck 属性表示：是否打开拼写检查。

浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。

注意：

  • 该属性是枚举属性，最好带上属性值。
  • 如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。

2.11、data-属性

data-属性用于放置自定义数据。

css样式使用

/* 例子1
<div data-role="mobile">
    Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* 例子2
<div class="test" data-content="This is the div content">test</div>
*/
.test:after {
  content: attr(data-content);
}

2.12、事件处理属性

全局属性还包括事件处理属性（event handler），用来响应用户的动作。

属性的名单：

​​onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting​​