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. mysql 首次安装后 简单操作与语句 新手入门

    首先cd到安装目录中bin路径:这是我的安装路径以管理员身份打开cmd(防止权限不足)cd E:\>cd E:\mysql\mysql-5.5.40-winx64\bin 首次安装需要输入 my ...

  2. TreeView 三种状态 没多大变化 只是增加了很多函数以方便调用

    using System.Drawing; using System.Windows.Forms; using System.ComponentModel; namespace SimpleCusto ...

  3. 查看MySQL 连接信息--连接空闲时间及正在执行的SQL

    MySQL 客户端与MySQL server建立连接后,就可以执行SQL语句了. 如何查看一个连接上是否正在执行SQL语句,或者连接是否处于空闲呢? 下面我们做下测试. 1.查看连接的空闲时间 首先看 ...

  4. leetcode94 不同的二叉搜索树

    solution 1:**动态规划 class Solution { public: int numTrees(int n) { vector<int> g={1,1,2}; for(in ...

  5. JavaScript中字符串,数组的基本操作

    JavaScript的字符串就是用”或”“括起来的字符表示. js中操作字符串: 1.获得字符串的长度 var s = 'Hello, world!'; s.length; // 132.获取指定字符 ...

  6. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-4.在线教育后台数据库设计

    笔记 4.在线教育后台数据库设计     简介:讲解后端数据库设计    ,字段冗余的好处,及常见注意事项 1.数据库设计:          er图:          实体对象:矩形        ...

  7. 【Hadoop】MapReduce练习：多job关联实现倒排索引

    概述 倒排索引(英语:Inverted index),也常被称为反向索引.置入档案或反向档案,是一种索引方法,被用来存储在全文搜索下某个单词在一个文档或者一组文档中的存储位置的映射.它是文档检索系统中 ...

  8. 【JAVA开发】eclipse最新版本Eclipse Neon

    这个版本的IDE支持Java.JavaScript.C/C++.PHP和Fortran等多种编程语言: 这个版本首次鼓励用户使用Eclipse Installer来做安装,这是一种由Eclipse O ...

  9. 前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

  10. pycharm中文专业版安装使用

    激活码 MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1lI ...