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安装appium模块

    (base) localhost:~ ligaijiang$ pip3 install Appium-Python-Client Collecting Appium-Python-Client Dow ...

  2. <JavaScript>为什么0.1+0.2=0.30000000000000004

    浮点数运算 你使用的语言并不烂,它能够做浮点数运算.计算机天生只能存储整数,因此它需要某种方法来表示小数.这种表示方式会带来某种程度的误差.这就是为什么往往 0.1 + 0.2 不等于 0.3. 为什 ...

  3. docker 管理应用程序数据和网络管理

    Volume和Bind Mount Docker提供三种不同方式将数据从宿主机挂载到容器中:volumes,bind mounts和tmpfs volumes:Docker管理宿主机文件系统的一部分( ...

  4. 15.kubernetes认证及serviceaccount

    kubernetes认证及serviceaccount 认证 授权:RBAC(目前的主流授权方式) 准入控制:了解即可 --> 认证 授权 准入控制 客户端 -->api-server: ...

  5. UnicodeEncodeError: 'ascii' codec can't encode characters

    将网页get到之后输入文本出现UnicodeEncodeError: 'ascii' codec can't encode characters错误 f = open('re.txt', 'w') u ...

  6. sublime的简单配置(解决为什么package control无效)

    1:下载sublime text 3 要到它的官网下载,要英文的. 2:安装sublime的包. 进入sublime按快捷键ctrl+~(~是键盘左上角Esc下面的键). 3:在这里面输入如下代码.( ...

  7. android stdio 首次安装配置

    http://www.cnblogs.com/smyhvae/p/4390905.html 不启用 加快模拟器调试 这个玩意儿打开老是报什么 android 1.0的问题 导致编译不起来 直接关了 S ...

  8. playbook部署flanneld

    定义playbook的主机组 说明: 1.playbook的主机组和ansible的主机组不一样, 2.playbook的主机组文件必须要和playbook文件在同一个目录下否则会报如下错误: [ro ...

  9. .NET下的对称加密算法

    1.关于.NET下的对称加密算法.    .NET Framework类库提供了对称加密.散列函数.非对称加密.数字签名等现有的主流加密算法..NET中默认实现了4种对称加密算法:DES.Triple ...

  10. Python 内置函数 -- zip(), sorted(), filter()和map()

    内置函数1. zip() 打包(木桶效应)描述: zip() 函数用于将可迭代的对象作为参数, 将对象中对应的元素打包成一个个元组, 然后返回由这些元组组成的列表语法: zip([iterable, ...