range+标签+html5,html5新标签+表单新类型、新属性

1、html5的特点

增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。常问的问题：html5有哪些特点(跟html5以前有什么区别)，css有哪些新属性？

(文档声明更简单，html5更语义化，html5三维空间，canvas)

(css3新属性：图片边框，圆角边框，渐进背景色，3D动画，阴影)

2.h5新增语义化标签

1)

标签不能被放在 、

或者另一个 元素内部，但它不局限于写在网页头部，也可以写在网页内容里面。

2)                   作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分。在语义化方面更加精确，同时对于屏幕阅读器等设备支持更好(简而言之，就是导航栏)

3)(一个页面只有一个main)

在一个文档中，不能出现一个以上的 元素。

4)

比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用

5) 标签定义了文档的节。比如章节、头部、底部或者文档的其他区域，它表示一段专题性的内容，通常由内容及其标题组成。区块

6)

网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。(广告，文章的链接，作者的简介)用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到

7)

眉脚一般会包含作者姓名、文档版权信息、使用条款链接、联系信息等. (可多个)

8)(没有怎么用)

标签用于对网页或区段(section)的标题进行组合。

9)

、

用于对元素进行组合。一般用于图片，文字组合。

是 figure的子元素，用于对figure的内容进行说明

3.h5新增表单元素/标签

1)

与配合,实现类似于拥有输入功能的下拉列表。 元素的 list 属性和 元素的id属性值相同。

花

小花

2)

用于描述文档或文档某个部分的细节。

可以为定义标题。标题可见，用户点击标题时，会显示出 details中的内容。任何形式的内容都能被放在 标签里边(任何标签都可以放进去)。open属性,规定 details中内容是否默认可见。

天京

njjn你不对劲

3)

定义带有记号的文本，在需要突出显示文本时使用 标签。

4)

定义进度条

50%(给盲人识别)

5)度量尺

 optimum如果该值高于“high”属性值，意味着值越高越好。

optimum如果该值低于“high”属性值，意味着值越低越好。

6)注释标签

标记定义 注释或音标

标记定义对ruby的注释内容文本

高

gao

7)

标记定义一些输出类型,计算表单结果配合oninput事件

4.语义化标签兼容IE8-6

1)可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。?

2)HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

article, aside, canvas, details, figcaption, figure,main,

footer, header, hgroup, menu, nav, section, summary

{

display: block;

}

下载地址：http://www.bootcdn.cn/html5shiv/

(复制链接-搜索-右键另存为)

5.删除的HTML标签

纯表现的元素：

basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：

frame，frameset，noframes；

产生混淆的元素：

acronym ，applet，isindex，dir。

6.重新定义的html标签(语义化)

    代表内联文本，通常是粗体，没有传递表示重要的意思

      代表内联文本，通常是斜体 ，没有传递表示重要的意思

   可以同details与figure一同使用，定义包含文本，dialog也可用      可以同details与figure一同使用，汇总细节，dialog也可用

---

    表示主题结束，而不是水平线，虽然显示相同

    表示小字体，例如打印注释或者法律条款

  表示重要性而不是强调符号

7.表单新增输入类型

1)email    email 输入类型用于应该包含电邮地址的输入字段。当提交表单时，会自动地对 email 字段的值进行验证。(正则)

2)tel           电话号码，移动端会弹出数字键盘

3)url            网页的URL，会在提交表单时对 url 字段的值自动进行验证。

4)number       特定范围内的数值选择器，min、max、step( 步数 )、value

5)search      

6)range      

7)color        

8)time         显示时间

9)date           显示日期

10)datetime    显示日期

11)month       显示日期

12)week           显示日期

8.表单新增属性

1)placeholder 占位符  

2)autofocus   获取焦点    可以不用写属性值

3)multiple  文件上传多选或多个邮箱地址  

4)required 验证条件，必填项    

5)Pattern     正则表达式

"d"表示数字   “D”表示非数字    “/d+”表示至少一个数字

本文来源于网络：查看 >https://blog.csdn.net/qq_38068491/article/details/82453795