HTML5新标签 表单新类型、新属性

课程目标

1. HTML的发展史
2. （web前端开发，HTML5前端开发，前端开发高级工程师，架构师，cto（首席技术总监））
3. 新的文档类型声明(DTD) 
4. 新增的HTML5标签
5. 删除的HTML标签
6. 从新定义的HTML标签
7. 崭新新的页面布局
8. Html5浏览器的兼容

1、HTML5简介

一、HTML5的发展历史

 

二、HTML5的支持浏览器

 

不一样的浏览器显示的效果可能不同。由于HTML5没有一个统一的标准，不一样的浏览器解析时不同的，如今还处于一个推广的阶段，可是大部分的是同样的.

三、HTML5的特色

增长了新特性：语义特性，本地存储特性，设备兼容特性，链接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。

面试官常问题：HTML5有哪些特色（跟HTML5之前有什么区别），css有哪些新属性？

（文档申明更简单，HTML5更语义化，HTML5三维空间模式，canvas）

（css新属性：图片边框，圆角变框，渐进背景色，3d动画，阴影）

2、Html5新标签

 

语义化

 

一、<header>

<header>标签订义文档的页眉，一般是一些引导和导航信息。一般<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还能够包括<hgroup>标签，还能够包括表格内容、标识、搜索表单、<nav>导航等。

<header> 标签不能被放在 <footer>、<address> 或者另外一个 <header> 元素内部，但它不局限于写在网页头部，也能够写在网页内容里面。

二、<nav>

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

 

三、<main>

在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是如下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

四、<article>

比section具备更明确的语义，它表明一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。通常来讲，article会有标题部分（一般包含在header内），有时也会包含footer。article能够嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，能够用article显示，而后一些评论能够以article的形式嵌入其中。

五、<section>

<section> 标签订义了文档的节。好比章节、头部、底部或者文档的其余区域，它表示一段专题性的内容，一般由内容及其标题组成。区块

六、<aside>

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

七、<footer>

眉脚通常会包含做者姓名、文档版权信息、使用条款连接、联系信息等. （可多个）

八、<hgroup>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

九、<figure>、<figcaption>

<figure>用于对元素进行组合。通常用于图片，文字组合。

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

 

 

 

十、<time>

用来表现时间或日期

 

 

datetime 属性在全部浏览器中不会渲染任何特殊的效果。

 

十一、<datalist>

与<input>配合,实现相似于拥有输入功能的下拉列表。<input> 元素的 list 属性来绑定 <datalist> 元素的id。

 

 

十二、<details>

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

 <summary> 能够为<details>定义标题。标题可见，用户点击标题时，会显示出 details中的内容。任何形式的内容都能被放在 <details> 标签里边。

open属性,规定 details中内容是否默承认见。<details open="open">

 

 

1三、<mark>

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

 

1四、<progress>

定义进度条

 

 

1五、<meter>

度量尺

 

 

 

1六、注释标签

<ruby> 标记定义 注释或音标

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

<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示

1七、<output>

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

<form oninput="res.value=no1.value*no2.value” >

    <input type="text" name="no1">

    <input type="text" name="no2">

    <output name="res"></output>

</form>

1八、语义化标签兼容IE8-6

1.能够引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。 

<!--[if lt IE 9]-->

<script src="路径"></script>

<!--[endif]-->

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

<style>

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

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

          {

                 display: block;

           }

</style>

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

（复制连接-搜索-右键另存为）

3、删除的HTML标签

纯表现的元素：

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

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

frame，frameset，noframes；

产生混淆的元素：

acronym ，applet，isindex，dir。

从新定义的HTML标签（语义化）

HTML元素	HTML5中的意义
<b>	表明内联文本，一般是粗体，没有传递表示重要的意思
<i>	表明内联文本，一般是斜体，没有传递表示重要的意思
<dd>	能够同details与figure一同使用，定义包含文本，dialog也可用
<dt>	能够同details与figure一同使用，汇总细节，dialog也可用
<hr>	表示主题结束，而不是水平线，虽然显示相同
<menu>	从新定义用户界面的菜单，配合commond或者menuitem使用
<small>	表示小字体，例如打印注释或者法律条款
<strong>	表示重要性而不是强调符号

 

4、表单新增输入类型

一、color  颜色选择器（卖油漆）

二、email

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

三、number  只能包含数字的输入框

去掉number类型的上下箭头。

 

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

 

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

 

六、search 搜索

配合results="n"属性

 

七、range

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

https://my.oschina.net/pauli/blog/270635

-----------------------------------------------------------------------------------------------------------------------

 

八、date、month、week  显示日期

 

九、time  显示时间

 

 

5、表单新增属性

placeholder 占位符

autofocus 获取焦点

<input type="text" name="userName" placeholder="请输入姓名" autofocus/>

<!-- 只有设置了name属性的表单元素的值才会提交到服务器-->

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

<!-- file :文件选择表单控件-->

<input type="file" name="photo" multiple/>

 

required 验证条件，必填项

<input type="text" name="phone" required >

</form>

Pattern 正则表达式  

输入的内容必须匹配到指定正则 例如： pattern="\d{3}"

input的value值要知足pattern的属性值的条件才能提交