HTML5新增的结构元素（新增的都是块元素，独占一行）

　　1) header 定义了文档的头部区域

　　　　<header>

　　　　　　<h1>网站标题<h1>

　　　　</header>

　　2) nav 定义导航链接的部分

　　　　<nav>

　　　　　　<ul>

　　　　　　　　<li>首页</li>

　　　　　　　　<li>关于我们</li>

　　　　　　　　<li>联系我们</li>

　　　　　　　　</ul>

　　　　</nav>

　　3) section 定义文档中的节（section，区段）

　　当一个元素只是为了样式化或者方便脚本使用时，使用div元素；当元素内容明确出现在文档大纲中，使用section元素

　　4) article定义页面独立的内容区域

　　一个特殊的section元素，代表一个独立完整的相关内容块

　　5) aside 定义页面的侧边栏内容

　　一般有两种使用方式：

　　1.包含在article元素中作为主要内容的附属信息，其中的内容可以是与当前文章有关的相关资料、名词解释等

　　　　<article>

　　　　　　<h1>....</h1>

　　　　　　<p>...</p>

　　　　　　<aside>...</aside>

　　　　</article>

　　2.在article元素外使用，作为页面或站点全局的附属信息。例如侧边栏

　　6) footer 定义section或document的页脚

　　一般用于页面或区域的底部，通常包含文档的作者、版权信息、使用条款等等。

HTML5新增网页元素

　　1) video 定义视频

　　2) audio 定义音频

　　3) canvas 定义图形

　　4) datalist 定义可选数据的列表

　　用于为文本框提供一个可选数据的列表。如果把datalist提供的列表绑定到某文本框，需要使用文本框的list属性来引用datalist元素的id属性

　　datalist元素由一个或多个option元素组成，每一个option元素必须设置value属性

　　　　<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

　　　　<head>

　　　　<meta charset="utf-8" />

　　　　<title>datalist元素用法</title>

　　　　</head>

　　　　<body>

　　　　　　 <input type="text" list="food" />

　　　　　　<datalist id="food">

　　　　　　　　 <option value="面包">面包</option>

　　　　　　　　<option value="薯片">薯片</option>

　　　　　　 </datalist>

　　　　</body>

　　　　</html>

　　　　　　

　　5) time 定义日期或时间

　　使用或不使用在视觉效果上没区别，使用后更容易被搜索引擎搜索到

　　6) mark 在视觉上向用户呈现那些需要突出的文字

　　当把一行文字包含在mark元素内，页面显示时文字会有背景

　　　　<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

　　　　<head>

　　　　　<meta charset="utf-8" />

　　　　  <title>mark元素用法</title>

　　　　</head>

　　　　<body>

　　　　　　 <p>今天的天气是<mark>晴转多云</mark></p>

　　　　</body>

　　　　</html>

　　　　 

　　7) progress 运行中的进度（进程）

　　页面上显示为一个进度条。value属性表示当前已完成的进度，max属性表示总进度

HTML新增全局属性

　　1) contentEditable 是否允许用户在线编辑元素中的内容

　　属性可以设置为true或false。设置为true：页面元素允许被编辑；设置为false：页面元素不允许被编辑；未设置属性，则该元素的编辑状态由父元素决定。

　　编辑完元素内容后，如果想保存编辑的内容，只能把元素的innerHTML属性发送到服务器端进行保存。

　　<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　　　 <meta charset="utf-8" />

　　　　    <title>contentEditable全局属性用法</title>

　　</head>

　　<body>

　　　　    <ul contenteditable="true">

　　　　        今天的天气是晴转多云

　　　　    </ul>

　　</body>

　　</html>

　　　　 

　　2) designMode 整个页面是否可编辑

　　通常整个页面是不能被编辑的。designMode属性只能在JavaScript脚本中修改，属性值有：on和off。

　　3) hidden 是否对元素进行隐藏

　　HTML5中所有元素都可以使用hidden属性。属性为bool类型，设为false元素可见；true元素不可见

　　4) spellcheck 是否必须对元素进行拼写或语法检查

　　spellcheck属性针对单行文本框和多行文本框设置的。属性为bool类型，设为true进行语法检查；false不进行语法检查。

　　但如果元素的readOnly属性和disabled属性生效的话，spellcheck属性将失效。

　　5) tabindex 规定元素的Tab键移动顺序

　　就是当在网页中不断的按下Tab键时，焦点所对应的控件。每一个控件的tabindex属性表示该控件是第几个被访问到的。

HTML5中新增加的结构元素、网页元素和全局属性的更多相关文章

  1. HTML5中新增加Input 的种类

    查询文本框 <input type="search"> 数字文本框 any 代表不设置 <input type="number" max=&q ...

  2. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  3. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. java8在Collection中新增加的方法removeIf

    记得我在以前找工作的经历中,遇到过一个面试官问过我一个很基础的问题.问题是:有一个List中有10个元素,我现在想从中删除3个元素,请问怎么做?我当时也没想,就直接说,List的有自带的remove方 ...

  5. impala不能查询hive中新增加的表问题

         使用Cloudera Manager部署安装的CDH和Impala,Hive中新增加的表,impala中查询不到,其原因是/etc/impala/conf下面没有hadoop和hive相关的 ...

  6. 第87天：HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  7. html5 javascript 新增加的高级选择器更精准更实用

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. 解决cefsharp在winform中不显示tooltipText问题（网页元素的title提示）

    1.监听网页属性改变事件 webView.PropertyChanged += webView_PropertyChanged; 2.拖一个ToolTip控件到窗体 3.在webView_Proper ...

  9. html5中新的标准属性

    属性                                        值                                  描述accesskey             ...

随机推荐

  1. Python接口测试-利用登录后的session用到登录后的接口中

    有些接口是在登录后才能调用的,例如“立即出借”只有在登录后才能到出借窗口,解决: 主要是添加了: s =requests.session() 完整代码: '''登录 ''' print('*'*100 ...

  2. 解决 无法启动此程序，因为计算机中丢失opencv_world341.dll。请尝试重新安装改程序已解决此问题

    在运行OpenCV程序时报错:“无法启动此程序,因为计算机中丢失opencv_world341.dll.请尝试重新安装改程序已解决此问题”. 解决方法 我的bin目录是 D:\opencv\build ...

  3. centos7 开启80端口

    关闭与开启防火墙 systemctl stop firewalld.servicesystemctl start firewalld.service 先查看防火墙是否开启的状态,以及开放端口的情况:s ...

  4. 在Eclipse中使用WindowBuilder设计Swing程序

    在Eclipse中使用WindowBuilder设计Swing程序     Swing程序表示Java的客户端窗体程序,除了通过手动编写代码的方式设计Swing程序之外,Eclipse中还提供了一种W ...

  5. SpringMVC整合SpringFox实践总结

    项目中使用的swagger框架在生成api文档时存在一些问题: 1. 控制器下方法无法点击展开 2.api内容结构混乱 基于上述原因,重新整合重构了一下api文档生成的代码.在此将重整过程记录下来,方 ...

  6. HmacSha1加密-java

    package com.test; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import org.apache ...

  7. Jedis的Publish/Subscribe功能的使用

    redis内置了发布/订阅功能,可以作为消息机制使用.所以这里主要使用Jedis的Publish/Subscribe功能. 1.使用Spring来配置Jedis连接池 <!-- pool配置 - ...

  8. 从Myeclipse到IntelliJ IDEA-——让你摆脱鼠标，全键盘操作

    注:本文是对原文章(https://blog.csdn.net/luoweifu/article/details/13985835)做的补充 快捷键对比 Myeclipse IDEA 说明 Ctrl+ ...

  9. PJzhang:python基础进阶的10个疗程-one

    猫宁!!! 课程导学 北京理工大学 国家精品在线开放课程 零基础.大学水平 100行左右的python可以做很多事情 编程是基本技能,体会思维 时间成本和收益的关系 每周5个小时 https://py ...

  10. 产品之我见（3）-ZEN在产品上的延伸

    ZEN 在WIKIPEDIA上的解释是这样的: 禅,禅宗强调严格的自我控制能力,冥想实践,洞察到的事物性质,而这种洞察力在日常生活中的个人表达,尤其是为了别人的利益. 因此,它不再强调对经典和学说的了 ...