02_HTML5+CSS详解第一天

视频来源：麦子学院　　讲师：朱朝兵

HTML5概念：HTML即超文本标记语言（HyperText Makeup Language)，是一种语法简单，结构清晰的解释型文档，不同于其他编程语言。

HTML5新增的网页结构

header元素表示页面中的一个内容区块或者整个页面的标题

nav元素表示页面中导航链接部分

article元素表示页面中一块与上下文不相关的独立内容，比如一篇文章中的文章？【表示理解无能】

section元素表示页面中的一块内容区块，比如章节的页眉页脚，也可以和Hn等一起使用，标示出文档的结构，不带标题的内容区块不建议使用section

aside元素表示article元素的内容之外的，和内容相关的辅助信息

footer元素表示页面或者页面中一块区域的页脚，比如文章创建时间，作者，联系方式等等

article元素的使用方法

<article>
<header>
<h1>article元素的使用方法</h1>
<p>创建时间：<time pubdate >2017/11/27</time></p>
<!-- 使用pubdate属性，表示这个时间是当前内容的发布日期（比如<time>所在的<article>） -->
</header>
<p><b>Article</b>是一个独立的区域</p>
<section>
<h2>读者评论</h2>
 <article>
  <header>
   <h3>读者：Yolo</h3>
   <p><time pubdate datetime="2017-11-27 18:39">两小时前</time></p>
  </header>
  <p>很精彩的文章！</p>
 </article>
</section>
<footer>
 <p><small>版权所有</small></p>
</footer>
</article>

section元素的使用方法

<article>

	<h1>产品</h1>

	<p>产品列表</p>

	<section>

		<h2>产品A</h2>

		<p>产品A的介绍</p>

	</section>

	<section>

		<h2>产品B</h2>

		<p>产品B的介绍</p>

	</section>

</article>

　　*当一段内容比较独立时使用article，当想把独立内容划分为几段时用section

aside元素的使用方法

使用方法一、作为主要内容的附属信息部分
<header>

	<h1>国庆节去成都看熊猫</h1>

</header>

<article>

	<h2>大熊猫基地</h2>

	<p>大熊猫基地有很多大熊猫</p>

	<aside>

		<h3>名词解释：</h3>

		<dl>

			<dt>大熊猫</dt>

			<dd>大熊猫是国家一级保护动物</dd>

			<dt>大熊猫基地</dt>

			<dd>大熊猫基地在四川卧龙</dd>

		</dl>

	</aside>

</article>

使用方法二、作为全局页面站点的附属信息
<aside>
 <h1>网站公告：</h1>
 <p>国庆节放假通知</p>
 <p>中秋节放假通知</p>
</aside>

nav元素的使用方法

1、传统的导航条

2、侧边栏导航

3、内页导航

4、翻页操作

time元素及pubdate属性
```
<p>发布时间：<time datetime="2017-11-27" pubdate>2017年11月27日</time></p>
```
　*用来给机器识别的，便于搜索引擎，爬虫解析

header元素

<style type="text/css">
 *{margin: 0;padding: 0}
 body{font-family: '微软雅黑';text-align: center;}
 a{
  color: #f60;
  text-decoration: none;
 }
 nav{
  height: 48px;
  background: #f60;
 }
 nav li{
  background: #000;
  float: left;
  border-radius: 5px;
  list-style: none;
  padding: 5px 10px;
  margin:10px;
 }
 </style>
<header>

	<hgroup>

		<h1>HTML5视频教程</h1>

		<a href="">手机版</a>

		<a href="">论坛</a>

	</hgroup>

	<nav>

		<ul>

			<li><a href="">首页</a></li>

			<li><a href="">手机版</a></li>

			<li><a href="">论坛</a></li>

		</ul>

	</nav>

</header>

hgroup是将标题和它的子标题进行分组的元素，hgroup元素一般会把h1-h6元素进行分组。比如在一个内容区块的标题和它的子标题是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的
```
<article>

 <header>

	<hgroup>

		<h1>文章主标题</h1>

		<h2>文章子标题</h2>

	</hgroup>

	<p>发布时间：<time datetime="2017-11-27">2017年11月27日</time></p>

 </header>

 <p>文章正文</p>

</article>
```

footer元素

<style type="text/css">

		*{margin: 0;padding: 0;}

		body{

			font-family: '微软雅黑';

			text-align: center;

		}

		a{

			text-decoration: none;

			color: #555;

		}

	</style>

<div class="footer">

	<p>

		<a href="">版权信息</a> |

		<a href="">关于我们</a> |

		<a href="">联系我们</a> |

		<a href="">站点地图</a> |

	</p>

	<p>麦子学院版权所有</p>

</div>

*也可以为article元素或者section元素添加footer元素，注脚

address元素用来在页面中呈现联系信息，包括文档的作者，邮箱、地址、电话信息等，也可以用来展示和文章相关的联系人的所有联系信息

<article>

	<header>

		<h1>HTML5与CSS视频教程</h1>

	</header>

	<p>这里是文章正文部分</p>

	<footer>

		<address>

			<a href="" title="朱朝兵">朱朝兵</a>

			<a href="" title="麦子学院">麦子 学院</a>

		</address>

		<p>时间：<time datetime="2017-11-27">2017年11月27日</time></p>

	</footer>

</article>

figure元素是一种元素的组合，带有可选标题。figure元素用来表示页面上一块独立的内容。如果删除不影响网页内容。
figcaption元素表示figure元素的标题，它属于figure元素。figcaption元素必须书写在figure元素内部。一个figure元素只允许放置一个figcaption元素。
```
<figure>

	<img src="data:images/0.jpg" title="pic0">

	<img src="data:images/1.jpg" title="pic1">

	<img src="data:images/2.jpg" title="pic2">

	<figcaption>可爱的小动物</figcaption>

</figure>
```
details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，true子元素展开，默认false子元素收缩。
summary元素从属于details元素。（目前只有谷歌的chrome浏览器支持！）
```
<details>

	<summary>HTML5+CSS视频教程</summary>

	<p>该视频来源于麦子学院</p>

</details>
```

mark元素表示页面中需要突出或高亮显示的内容。通常在引用原文时使用mark元素，目的是引起读者注意。比如搜索关键词时对搜索结果中的关键词高亮显示。

<h2>以下是关于<mark>HTML5</mark>的搜索结果</h2>

<section>

	<article>

		<h2><a href=""><mark>HTML5</mark>百度百科</a></h2>

		<p>正文</p>

	</article>

	<article>

		<h2><a href=""><mark>HTML5</mark>中国：中国最大的HTML5中文门户</a></h2>

		<p>正文</p>

	</article>

</section>

progress元素代表一个任务的完成进度。value属性表示已完成了多少工作量，max属性表示共有多少工作量。value和max属性只能指定为有效的浮点数，必须大于0.
```
<p>

当前任务完成进度

<progress value="79" max="100"></progress>

</p>
```
meter元素表示规定范围内的元素值。value属性表示实际值，默认为0；min表示最小值；max最大值；low规定范围的下限值；high规定范围的上限值；optimum最佳属性值，必须在min和max之间，可以大于high
```
<p>

硬盘实际使用情况

<meter value="90" min="0" max="100" low="50" high="80" optimum="90" ></meter>

</p>
```

HTML5废除的元素
big……
不再使用frame框架，对于frameset,frame,noframes元素，由于frame框架对页面可用性存在负面影响，html5已经不支持frame框架，只支持iframe框架
废除rb元素，使用ruby代替

巴特西

02_HTML5+CSS详解第一天

最新文章

热门文章