HTML5-新增全局元素

HTML5中升级后的a元素

HTML5为a元素新增了3个属性

属性	说明
download	定义可被下载的目标（如文件，图片等）
media	定义被链接文档为何媒介/设备优化的
type	定义被链接文档的MIME类型

语法:

复制代码

<a href="文件地址" download="新文件名"></a>

注意：download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名

实例:

html 复制代码

<a href="../img/OIP-C.jpg" download="a.jpg">下载图片</a><br/>
<a href="../img/OIP-C.jpg" download>下载图片</a>

运行结果

全局元素相关

新增全局元素（任何元素都可以使用）

属性	说明
contenteditable	规定是否可编辑元素的内容
hidden	规定元素是否被隐藏
draggable	元素是否可以被拖动
spellcheck	对用户输入的文本内容进行拼写和语法检查
date-*	为元素实现自定义属性

contenteditable属性、

概念：contenteditable属性规定是否可编辑元素的内容，前提是该元素必须可以获得光标焦点并且其内容不是只读的。

语法：

html 复制代码

<element contenteditable=""></element>

属性值：

true：元素内容可以被编辑
false：默认值，元素内不能被编辑

实例：

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>contenteditable属性</title>
        <style>
            p{
                display:inline-block;
                padding:10px;
                border:1px dashed gray;
                background-color:#f1f1f1;
            }
        </style>
    </head>
    <body>
        <p contenteditable="true">这是一段可以被编辑的文字</p>
    </body>
</html>

运行结果：

hidden属性

概念：hidden元素规定元素是否被隐藏。

语法：

html 复制代码

<element hidden="hidden"></element>

属性值

hidden：元素会被隐藏。
默认值：元素会被显示

注意：使用hidden属性仅仅是隐藏了元素的显示，但元素仍然存在于HTML文档中占据空间，可以通过JavaScript等技术访问它们。CSS中的display:none是完全消失不占据空间，属性和样式不存在

实例

html 复制代码

   <ol>
        <li>数学</li>
        <li hidden>语文</li>
    </ol>

运行结果

draggable属性

概念:draggable属性来定义某一个元素是否可以被拖动

语法:

html 复制代码

<element draggable=""></element>

属性值

true：表示元素可以被拖动
false：默认值，表示元素不可以被拖动

实例:

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>draggable属性</title>
        <style>
            p{
                display:inline-block;
                padding:10px;
                /* border:1px dashed gray; */
                background-color:#55ff00;
            }
        </style>
    </head>
    <body>
        <p>这是一段不可以被拖动的文字</p>
        <p draggable="true">这是一段可以被拖动的文字</p>
    </body>
</html>

运行结果

spellcheck属性

概念：spellcheck属性主要用于 input 元素和 textarea元素，对用户输入的文本内容进行拼写和语法检查。

属性值：

true：检测输入框中的值
false：不检查输入框中的值（默认值）

date-*属性

概念:可以使用data-*属性来为元素实现自定义属性

语法:

html 复制代码

<element data-*="属性值"></element>

"data-"是一个前缀，后面接一个小写的字符串，例如data-color,date-article-title等

data-*属性用于存储页面或应用程序的私有自定义数据

data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）

实例

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>data-*属性</title>
        <script>
        function showDetails(animal) {
            var animalType = animal.getAttribute("data-animal-type");
            alert(animal.innerHTML + "是一种" + animalType + "。");
        }
        </script>
    </head>
    <body>
        <h1>科目</h1>
        <p>点击某个科目来查看其类别：</p>
        <ul>
          <li onclick="showDetails(this)" id="math" data-animal-type="理科">数学</li>
          <li onclick="showDetails(this)" id="chemical" data-animal-type="理科">化学</li>  
          <li onclick="showDetails(this)" id="history" data-animal-type="文科">历史</li>  
        </ul>

    </body>
</html>

运行结果