新标签&新表单类型

HTML5新标签

1、<header></header>

<header>标签定义文档的页眉，通常是一些引导和导航信息。

通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），

还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单、<nav>导航等。

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

2、<nav></nav>

作为页面导航的链接组，其中的导航元素链接到其它页面

或者当前页面的其它部分。在语义化方面更加精确，同时对于

屏幕阅读器等设备支持更好（简而言之，就是导航栏）

3、<main></main>

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

<main> 元素不能是以下元素的后代：<article>、<aside>、
<footer>、<header> 或 <nav>。

<main>用在页面结构的外层

4、<article>

比section具有更明确的语义，它代表一个独立的、完整的相关内容块，

可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，

一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），

有时也会包含footer。article可以嵌套，内层的article对外层的article标签

有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论
可以以article的形式嵌入其中。 

5、<section>

<section> 标签定义了文档的章节，本意是区块。

比如章节、头部、底部或者文档的其他区域，它表示一段

专题性的内容，通常由内容及其标题组成。

6、<aside></aside>

用来装载非正文的内容，被视为页面里面一个单独的部分。

它包含的内容与页面的主要内容是分开的，可以被删除，

而不会影响到网页的内容、章节或是页面所要传达的信息。

例如广告，成组的链接，侧边栏等等。（广告，文章的链接，作者的简介）

7、<footer></footer>

眉脚一般会包含作者姓名、文档版权信息、

使用条款链接、联系信息等. （可多个）

8、<hgroup></hgroup>

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

9、<figure>、<figcaption>

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

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

  <figure>
        <img src="路径" alt="" />
        <figcaption>这是一个图片</figcaption>
   </figure> 

 

 10、<time>

用来表现时间或日期

    <p>我每天都是<time>6点</time>起床</p>

    <p>这个<time datetime="2021-10-24">程序猿节</time>，我头有点冷</p>

 11、<datalist>

与<input>配合,实现类似于拥有输入功能的下拉列表。

<input> 元素的 list 属性来绑定 <datalist> 元素的id。

12、<details>

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

<summary> 可以为<details>定义标题。标题可见，用户点击标题时，

会显示出 details中的内容。任何形式的内容都能被放在 <details> 标签里边。

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

<details >
        <summary>望庐山瀑布</summary>
        <p>飞流直下三千尺，疑是银河落九天。</p>
 </details>

13、<mark>

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

14、定义进度条

<progress max=“value” value=“当前值”></progress>

15、 度量尺

<meter>

16、注释标签

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

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

<ruby>嫑<rt>biao</rt></ruby>

 17、<output>

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

<form oninput="res.value=nb1.value*nb2.value"> 
		<input type="text" name="nb1">
		<input type="text" name="nb2">
		<output name="res"></output>
</form>

18、语义化标签兼容IE8-6

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

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

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

<!--[endif]-->

表单新增输入类型

1、color

颜色选择器：

<input type="color" />

 2、email

<input type="email" />

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

3、url

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

4、range

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

5、显示日期

date、month、week

 6、显示时间

time

 7、搜素框

search

表单新增属性

1.占位符

Placeholder

2.获取焦点

autofocus

 

 

3.验证条件，必填项

required

 

 

4.正则表达式

Pattern