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. 上有传参下传json的接口调用

    1.优化Myrequest import requests from conf.setting import log class MyRequest(): @staticmethod def post ...

  2. 性能测试 | Web端性能测试

    这篇文章想跟大家分享关于Web性能测试的一些知识点.在分享之前,我想先跟大家分享一组数据,关于为什么要做性能测试?具体如下: 71%用户希望在手机上打开网页能跟电脑一样快: 5秒钟被认为是用户能忍受的 ...

  3. Android跨进程通信访问其他应用程序的Activity

    访问其他应用程序的ActivityActivity既可以在进程内(同一个应用程序)访问,也可以跨进程访问.如果想在同一个应用程序中访问Activity,需要指定Context对象和Activity的C ...

  4. JavaScript中原型链存在的问题解析

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

  5. 关于域名解析|A记录|CNAME等

    1. A记录 又称IP指向,用户可以在此设置子域名并指向到自己的目标主机地址上,从而实现通过域名找到服务器. 说明: ·指向的目标主机地址类型只能使用IP地址: 附加说明: 1) 泛域名解析 即将该域 ...

  6. IDEA的热部署设置方式

    在这里只说一种简单的方式就是在idea中进行简单的设置就可以: 第一步:设置IDEA开启项目自动编译,进入设置找到Build,Execut, Deployment -> Compiler 勾选中 ...

  7. Linux服务知识点总结

    一.firewalld防火墙 1.firewalld简述 firewalld:防火墙,其实就是一个隔离工具:工作于主机或者网络的边缘.对于进出本主机或者网络的报文根据事先定义好的网络规则做匹配检测,对 ...

  8. SpringCloud学习（六）分布式配置中心(Spring Cloud Config)(Finchley版本)

    在上一篇文章讲述zuul的时候,已经提到过,使用配置服务来保存各个服务的配置文件.它就是Spring Cloud Config. 简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理, ...

  9. 基于 CentOS 7 搭建 SVN

    ⒈安装 SVN 服务端 1.安装 Subversion Subversion 是一个版本控制系统,相对于的 RCS . CVS ,采用了分支管理系统,它的设计目标就是取代 CVS . yum inst ...

  10. TIPTOP之分割split函数方法、getIndexOf、subString、replace、临时表创建；

    范例(cnmq001): 原:每次查询都把数据全部查询到临时表后再筛选: 现:查询到临时表的时候,增加可行的筛选条件,再二次筛选临时表的数据,进行优化: 1)临时表创建: PRIVATE FUNCTI ...