H5学习之路-------一：属性

最新推荐文章于 2022-01-10 09:31:31 发布

cristan_lsy

最新推荐文章于 2022-01-10 09:31:31 发布

阅读量613

点赞数

分类专栏： WEB前端文章标签： html5 html 移动设备多媒体存储

本文链接：https://blog.youkuaiyun.com/u014088839/article/details/78247341

版权

WEB前端专栏收录该内容

4 篇文章

订阅专栏

HTML5是最新的HTML标准，新增了在移动设备上支持多媒体。在2014年10月完成标准制定，现在仍处于完善中。

HTML中新增了一下几个新特性：

用于绘画的canvas元素；
用于媒介播放的video和audio元素；
对本地离线存储的更好支持；
新的特殊内容元素：article , nav, header, footer, section;
新的表单控件：calendar, date, time, email, url, search.

使用HTML5，必须在文件头添加：

<!DOCTYPE HTML>

HTML中现有的属性

accesskey：规定激活元素的快捷键，若accesskey="h"，则可用alt+h或shift+alt+h来访问这个元素。支持该属性的元素有：<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。
class：为元素指定样式，可以同时赋予多个class，用空格分开。以元素不能使用这个属性：html, base, head, meta, title, script, style, param。
dir：规定元素中文本的方向。有两种ltr(左到右)和rtl(右到左)，默认为ltr。以下元素不能使用这个属性：<base>, <frame>, <frameset>, <iframe>, <hr>, <br>, <param>, <script>。
id：html中一个元素的唯一标识，javascript可以通过id来访问元素，css可以为带有指定id改变或添加样式；
lang：规定元素内容的语言。采用ISO 639-1语言代码：zh(中文)，en(英文)， ja(日文)等等。以下元素不能使用这个属性：<base>, <frame>, <frameset>, <iframe>, <hr>, <br>, <param>, <script>。
style：规定元素行内的css样式(inline style)，多个样式间用分号隔开。
tabindex：规定元素的tab键次序，当tab用于导航时。支持该属性的元素有：<a>, <area>, <input>, <object>, <select>, <textarea>。
title：规定元素额外的信息，鼠标移到元素上时的提示文本。通常与<form>, <a>一起使用。

HTML5中也提出了许多新的属性：

contenteditable：设置元素的内容是否可编辑，如果元素未设置contenteditable属性，会从父元素继承该属性。该属性默认为不可编辑。
contextmenu：规定元素的上下文菜单，右键点击元素的时候会出现上下文菜单。目前只有火狐浏览器支持这个新属性。
data-*：用于存储页面或程序的私有定制数据。使得我们可以在html元素上自定义data属性，data-后面至少接一个字母，不能包括任何大写字母。这样自定义的data数据可以在javascript中利用，读取的时候要用驼峰命名的格式。但是不能用于ajax调用和服务器端数据库查询。使用data-*的有点是可以把所有的自定义属性放在dataset中统一管理，遍历起来很方便。
```
<button id="testId" data-animal-type="dog" οnclick="showType()"> DouDou </button>

<script type="text/javascript">
function showType(){
   alert(document.getElementById("testId").dataset.animalType);
}
</script>
```
draggable：规定元素是否可以被拖动。链接和图片默认是可拖动的，其他元素默认不可拖动。true：可以拖动 false：不可拖动 auto：使用浏览器的默认行为。
dropzone：规定在元素上拖动数据时，是否移动，拷贝或链接被拖动的数据。copy：拖动时产生被拖动数据的副本 move：拖动数据会导致被拖动的数据被移动到新位置 link：拖动数据会产生指向元数据的链接。目前主流浏览器都不支持这个新属性。
hidden：布尔值，规定元素是否被显示。在javascript中可以删除这个属性。在html5中属性可以简写
```
<p hidden>这段话不会显示</p>
```
spellcheck：规定是否对元素进行拼写和语法检查。主要用于type="text"的input和textarea。检查出错误后会出现红色波浪线，右键可以看到提示。若元素为只读时，不会进行拼写检查。
translate：规定是否翻译元素的内容，值为：yes (翻译) 或 no (不翻译)，在使用的时候最好用class="notranslate"代替。目前主流的浏览器都不支持这个新属性。

上面的这8+8的属性都是全局属性，适用于任何元素，除特别标注外。