HTML5-新增全局元素

HTML5中升级后的a元素

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

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

语法:

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

实例:

下载图片

下载图片

运行结果

全局元素相关

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

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

contenteditable属性、

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

语法：

属性值：

• true：元素内容可以被编辑

• false：默认值，元素内不能被编辑

实例：

    
        
        
        
    
    
        
这是一段可以被编辑的文字
    

运行结果：

hidden属性

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

语法：

属性值

• hidden：元素会被隐藏。

• 默认值：元素会被显示

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

实例

   

        
数学
        
    

运行结果

draggable属性

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

语法:

属性值

• true：表示元素可以被拖动

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

实例:

    
        
        
        
    
    
        
这是一段不可以被拖动的文字
        
这是一段可以被拖动的文字
    

运行结果

spellcheck属性

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

属性值：

• true：检测输入框中的值

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

date-*属性

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

语法:

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

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

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

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

实例

    
        
        
        
    
    
        
科目
        
点击某个科目来查看其类别：
        

          
数学
          
化学
  
          
历史
  
        
​
    

运行结果