HTML5基础知识总结01

1. HTML5

无论是html5还是html4...他们都是html语言

HTML5就是html这种网页标记语言的一个版本

HTML5网页标记语言的最新的版本，和使用最广泛的版本

HTML5新增的标记和属性：

1. 用于绘画的 canvas 元素

2. 用于媒介回放的 video 和 audio 元素

3. 对本地离线存储的更好的支持

4. 新的特殊内容元素，比如 article、footer、header、nav、section

5. 新的表单控件，比如 calendar、date、time、email、url、search

2. HTML5语义元素

没有HTML5语义元素之前我们要做一个html网页头部：<div id="head"></div>

有HTML5语义元素之后我们要做一个html网页的头部：<header></header>

我们可以简单的认为HTML5语义元素<header></header>代替了<div id="head"></div>

HTML5提供了新的语义元素来明确一个网页的不同部分：

<header>、<nav>、<section>、<article>、<aside>、<figcaption>、<figure>、<footer>

2.1 <header>与<nav>语义元素

header元素描述了网页内容的头部区域

<h2>header元素描述了网页内容的头部区域</h2>
		 <header>
			 <h1>这是网页内容的头部区域</h1>
		 </header>

nav 标签定义导航链接的部分

 <h2>nav元素定义导航链接的部分</h2>
		 <header>
			 <h1>这是网页内容的头部区域</h1> 
			 <nav>
				 <!-- &nbsp调整导航间距离 -->
			     <a href="">天猫</a>&nbsp;&nbsp;&nbsp;&nbsp;
			     <a href="">聚划算</a>&nbsp;&nbsp;&nbsp;&nbsp;
			     <a href="">飞猪旅行</a>&nbsp;&nbsp;&nbsp;&nbsp;
			     <a href="">苏宁易购</a>&nbsp;&nbsp;&nbsp;&nbsp;
			 </nav>
		 </header>

2.2 <article>与<section>语义元素

article 标签定义独立的区域内容。【一块文章】

section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

<article>
		<h3>这是一篇文章</h3>
		<section>
		  <h4>第一节 html5是什么</h4>
		  <p>HTML5就是html这种网页标记语言的一个版本,HTML5网页标记语言的最新的版本，和使用最广泛的版本</p>
		 </section>
		 <section>
		    <h4>第二节 html5是什么</h4>
			<p>HTML5就是html这种网页标记语言的一个版本,HTML5网页标记语言的最新的版本，和使用最广泛的版本</p>
		</section>
		<section>
		   <h4>第三节 html5是什么</h4>
		   <p>HTML5就是html这种网页标记语言的一个版本,HTML5网页标记语言的最新的版本，和使用最广泛的版本</p>
		</section>
</article>

2.3<aside><figure><figcaption><footer>语义元素

1. aside--标签定义页面主区域内容之外的内容（比如侧边栏）

<aside>
	<h3>aside主区域内容之外的内容</h3>
</aside>

2. figure--标签规定独立的流内容（图像、图表、照片、代码等等)

   figcaption--标签定义figure元素的标题.

<figure>
	<figcaption>我的相册<