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. 【JDBC】使用Spring提供的JDBCTemplate通过Statement向MySql数据库插入千万条数据，耗时4m55s，使用insert语句批量插入方式二

    这回依然是使用 insert批量插入这种方式 insert into emp(name,age,cdate) values ('A' , 20, '2019-10-13 00:00:00'), ('B ...

  2. python之scrapy爬取jd和qq招聘信息

    1.settings.py文件 # -*- coding: utf-8 -*- # Scrapy settings for jd project # # For simplicity, this fi ...

  3. C++中重载、重定义、重写概念辨析

    重载:函数名相同,函数的参数个数.参数类型或参数顺序三者中必须至少有一种不同.函数返回值的类型可以相同,也可以不相同.发生在一个类内部. 重定义:也叫做隐藏.覆盖,子类重新定义父类中有相同名称的非虚函 ...

  4. TOMCAT web.xml 整理说明

    JavaWeb项目中web.xml有关servlet的基本配置: 我们注意到,tomcat下的conf中也有一个web.xml文件,没错的,所有的JavaWeb项目中web.xml都继承自服务器下的w ...

  5. React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`

    使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有  ...

  6. VS Code中内置终端运行C中文乱码问题

    环境:Win10 + VS Code + Code Runner插件 原因:VS Code默认文件编码为 UTF-8,生成的可执行文件也是UTF-8编码的,但是系统编码为 GB2312,所以程序中的中 ...

  7. python3 速查参考- python基础 9 -> MySQL基础概念、数据库create、alter、insert、update、delete、select等基础命令

    前置步骤: 下载一个绿色版的mysql数据库客户端连接工具 :http://wosn.net/821.html mysql平台为win7(以后会有CentOS上的) 学习目的: 掌握数据库的基本概念, ...

  8. AssetBundle资源打包与加载

    AssetBundle资源打包  1.AssetLabels资源标签 文件名:资源打包成AssetBundle后的文件名,类似于压缩包的名字 后缀:自定义 文件名和后缀名都是小写格式(大写会自动转为小 ...

  9. 鸟哥私房菜基础篇：磁碟配额(Quota)与进阶文件系统管理习题

    猫宁!!! 参考:http://cn.linux.vbird.org/linux_basic/0420quota.php 1-在前一章的第一个大量新增帐号范例中, 如果我想要让每个用户均具有 soft ...

  10. Kubernetes 相关镜像pull 不下来问题收集

    1. 可在相关的镜像前添加 keveon 或者 mirrorgooglecontainers 就可以下载镜像, 然后在修改 tag docker pull mirrorgooglecontainers ...