01-H5标签

01-H5标签

1. H5简介

1.1 定义:

HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次大修改.HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。

1.2 目的:

HTML5的设计目的是为了在移动设备上支持多媒体

1.3 新特性

1. 语义特性 :HTML5赋予网页更好的意义和结构。
2. 本地存储特性:
3. 设备兼容特性:HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphon es及摄像头相联。
4. 连接特性:HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
5. 网页多媒体特性:支持网页端的Audio、Video等多媒体功能
6. 三维、图形及特效特性:基于SVG、Canvas、WebGL及CSS3的3D功能

语义化标签意义:

让HTML代码符合内容的结构化，标签语义化

方便开发者阅读，写出更优雅的代码，让浏览器很好的解析
从而更好的解析网页内容，更好的搜索引擎优化

2. H5 结构标签

2.1 <header></header>

定义文档头部区域，一般用在头部

<header>头部标签</header>

2.2 <section></section >

定义文档中的一块区域,替代div布局

<section>
	区域标签
</section >

2.3 <nav></nav>

定义导航栏

<nav>
	菜单标签
</nav>

2.4 <article></article>

标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者是来自论坛的文本。

<article>
	文章标签
</article>

​

2.5 <aside></aside>

定义侧边栏、广告、nav元素组，以及其他类似的内容部分.aside 的内容应该与 article 的内容相关.一般与正文无关的。

<aside>
	侧边标签
</aside>

2.6 <footer></footer>

定义文档底部区域内容，一般以footer结尾

<footer>
	底部标签
</footer>

3. 语义标签

3.1 <ruby></ruby>

定义注释(行内元素)

<ruby>淼<rt>miao</rt></ruby>

3.2 <mark></mark>

定义带有记号的文本，用于凸显

<mark>标记标签</mark>

3.3 <meter></meter>

定义已知范围或分数值内的标量测量

<meter min=”0” max=”10” value=”3” low=”5” optimum=”9”  high=”9” ></meter>

可设置宽高

属性:

1. min 最小值
2. max 最大值
3. low 指定点为最低值
4. optimum 指定最佳值
5. high 指定点为最高值

注意:

<meter>标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

3.4 <progress></progress>

标签显示任务的进度或者进程一般结合js使用

当不给定值时为一种加载的状态，在谷歌里面是一直滚动的状态，火狐里面是一种闪光的状态。

支持宽高设置，但背景颜色需要结合js

3.5 <details></ details >

用于描述文档细节部分，类似于定义列表

<details>
    <summary>标题</summary>
    <p>对标题的描述</p>
</details>

3.6 <wbr>单标签

定义文本在何处换行
相当于单词内换行

3.7 <hgroup></hgroup>

一个标题和一个子标题，或者标语的组合

<hgroup>
		<h1>潭州教育</h1>
	 	<h2>付出不亚于任何人的努力</h2>
	</hgroup>

3.8 <figure></figure>

定义一块独立的内容（图像，图标，代码等等）
通常用来展示图片及其描述

<figure>
    <figcaption></figcaption>
    <!--用来定义figure的标题,放在figure的子元素第一个或者最后一个-->
    <img src=””/>
</figure>
                       

​

3.9<time></time>

用来表现时间或日期

<p>早上<time>9:00</time>开始营业</p>

3.10<datalist></datalist>

标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。请使用 input 元素的 list 属性来绑定 datalist ID。

<input type="text" list='datalist'/>
<datalist id='datalist'><!-- 定义选项列表 -->
    <option>艺帆网络</option>
    <option>海誓山盟xl</option>
    <option>Yo_小z </option>
    <option>Free Sky</option>
    <option>千寻</option>
</datalist>

3.11 <summary></summary>

details 元素的标题

<details open>
    <summary>潭州教育</summary>	
    <p>国内将知名的IT培训机构</p>
    <a href="https://www.tmall.com/">
        <img width='150' src="https://img.alicdn.com/bao/upload/TB1sT5cOFXXXXXBXpXXE799_VXX-800-800.jpg" alt="">
    </a>
</details>

3.12 <address></address>

定义文章 或页面作者的详细联系信息

<address><!-- 地址标签 -->
    QQ:68603587<br/>
    web:https://www.tmall.com/<br/>
    email:68603587@qq.com
</address>

3.13 <dialog></dialog>

定义一段对话, 默认展开需要添加 open属性

<dialog open>  <!-- 对话标签 -->
    <dt>老师</dt>
    <dd>2+2 等于？</dd>
    <dt>学生</dt>
    <dd>4</dd>
    <dt>老师</dt>
    <dd>答对了！</dd>
</dialog>

4. HTML 5 兼容性

HTML5有部分内容兼容到IE9，IE8及以下对H5完全不兼容，后面的内容不再考虑此类浏览器。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些HTML5特性。

4.1 部分css3须加兼容前缀：

1. -webkit- 常用于兼容chrome浏览器，
   . -moz- 常用于兼容火狐，
   . -o- 常用于兼容opera，
   . -ms- 常用于兼容IE。

兼容性查询网站：http://caniuse.com/