HTML5中升级后的a元素
HTML5为a元素新增了3个属性
| 属性 | 说明 |
|---|---|
| download | 定义可被下载的目标（如文件，图片等） |
| media | 定义被链接文档为何媒介/设备优化的 |
| type | 定义被链接文档的MIME类型 |
语法:
<a href="文件地址" download="新文件名"></a>注意：download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名
实例:
<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属性规定是否可编辑元素的内容，前提是该元素必须可以获得光标焦点并且其内容不是只读的。
语法：
<element contenteditable=""></element>属性值：
-
true：元素内容可以被编辑
-
false：默认值，元素内不能被编辑
实例：
<!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元素规定元素是否被隐藏。
语法：
<element hidden="hidden"></element>属性值
-
hidden：元素会被隐藏。
-
默认值：元素会被显示
注意：使用hidden属性仅仅是隐藏了元素的显示，但元素仍然存在于HTML文档中占据空间，可以通过JavaScript等技术访问它们。CSS中的display:none是完全消失不占据空间，属性和样式不存在
实例
<ol>
<li>数学</li>
<li hidden>语文</li>
</ol>运行结果
draggable属性
概念:draggable属性来定义某一个元素是否可以被拖动
语法:
<element draggable=""></element>属性值
-
true：表示元素可以被拖动
-
false：默认值，表示元素不可以被拖动
实例:
<!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-*属性来为元素实现自定义属性
语法:
<element data-*="属性值"></element>"data-"是一个前缀，后面接一个小写的字符串，例如data-color,date-article-title等
-
data-*属性用于存储页面或应用程序的私有自定义数据
-
data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）
实例
<!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>运行结果
