本文介绍了HTML5的响应式设计、新增元素的用法，如header、nav、article、aside、section、footer等，并探讨了CSS选择器的应用，如通配符、标签、类、ID选择器等。此外，还展示了HTML5中如time、mark、progress、meter等文本和交互元素的使用，以及在实际项目中的应用，如制作HTML5 logo和超级课程表界面。通过对这些知识点的学习，可以提升前端开发技能和用户体验。
一、响应式web设计简介
1、响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括:
（1）HTML5+CSS3：HTML5+ CSS3基本网页设计。
（2）HTML5中的viewport：提供可以配置视口的属性。
（3）CSS3媒体查询：识别媒体类型，特征(屏蒂宽度、像素比等)。
（4）流式布局：,可以根据浏览器的宽度和屏荐的大小自动调整效果。
（5）响应式栅格系统：依赖于媒体查询，根据不同的屏幕大小调整布局。
（6）流式图片：随流式布局进行相应缩放。
2、HTML5的新特性：
（1）最重要的三项技术就是HTML5核心规范、CSS3(Cascading StyleSheet，层叠样式表的最新版本)和JavaScript(一种脚本语言，用于增强网页的动态功能)。
（2）化繁为简：
a.简化DOCTYPE和字符集声明；
b.强化HTML5 API,让页面设计更加简单；
c.以浏览器的原生能力代替的JavaScript代码；
d.复杂精确定义的错误恢复机制，如果页面中有错误，也不会影响整个
页面的显示。
（3）良好的用户体验：
HTML 5规范以“用户至上”为宗旨。也就是说在遇到冲突时，规范的优先级如下:
用户>页面作者>实现者(浏览器) > 规范开发者(W3C/WHATWG)>纯理论。
（4）基本语法：
<!DOCTYPE html>
< html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
二、HTML5 新增元素的用法
1、结构元素
（1）header
用法
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6）。
例子
<body>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
</body>
（2）nav
用法
nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。
比如说页脚底部如果有个版权申明，我们就不建议使用nav元素，而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航。
例子
<body>
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首页</a>
</li>
<li>
<a href=”aside元素.html”>aside</a>
</li>
<li>
<a href=”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>
nav的多层嵌套，我们可以在下面新建一个独立的区块，我们使用article。
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>
总结nav元素的方法
1、传统的导航条
2、侧边栏导航
3、内页导航
4、翻页操作
（3）article
用法
article代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。它可以是博客中的文章、帖子、用户的回复，总之article它所表示的所展现的内容，是外表独立出来的内容，所以它有自己独立的标题、页脚。
例子
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<titile></title>
</head>
<body>
<article>
</header>
<h1>我是Article</h1>
<p>创建时间：<time pubdate=”pabdate”>2014/09/27</time></p>
</header>
<p>
<b>Article</b>是一个独一的区域
</p>
<footer>
<p><small>麦子学院版权所有</small></p>
</footer>
</article>
</body>
</html>
嵌套用法：在内容区域的下面添加一个section元素.
<section>
<h2>读者评论</h2>
<article>
<header>
<h3>读者：朱朝兵</h3>
<p>
<time pudate datetime=”2014/09/27T21:00”>2小时前</time>
</p>
</header>
<p>
文章很好！
</p>
</article>
<h2>读者评论</h2>
<article>
<header>
<h3>读者：小星星</h3>
<p>
<time pudate datetime=”2014/09/27T21:00”>2小时前</time>
</p>
</header>
<p>文章非常好！</p>
</article>
</section>
（4）aside
用法
aside 标签定义其所处内容之外的内容，其内容应该与附近的内容相关，aside标签中的内容可用作文章的侧栏，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。
例子
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
（5）section
用法
section 字面上理解为“块”，“部分”，section元素代表一个页面或一个内容块的部分，一般作为主题块列表，在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。
section标签是成对出现的,以<section>开始,以</section>结束。section标签通常带有一个标题和一个内容块。
例子
<!doctype html>
<article>
<h1>Web编程语言比较</h1>
<p>web编程语言常用的有asp,asp.net,php,jsp</p>
<section>
<h2>asp</h2>
<p>asp全称Active Server Page</p>
</section>
<section>
<h2>asp.net</h2>
<p>asp的颠覆版本</p>
</section>
<section>
<h2>php</h2>
<p>草根动态语言，免费，强大</p>
</section>
</article>
使用section标签需要注意事项：
1、不要将<section>作为用来设置样式或行为的“钩子”容器，那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况，不要使用<section>。
3、不要为没有标题的内容区块使用<section>。
（6）footer
用法
footer标签定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
例子
<header>
<h1>整个页面的头部</h1>
</header>
<article>
<header>
<h2>article的头部</h2>
</header>
<section>
<header>
<h3>section的头部</h3>
</header>
<p>section的内容部分</p>
<footer>
<h3>section的尾部</h3>
</footer>
</section>
<footer>
<h2>article的尾部</h2>
</footer>
</article>
<footer>
<h1>整个页面的尾部</h1>
</footer>
2、分组元素
（1）figure和figcaption
figure用法
<figure> 标签用于对元素进行组合。
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
figcaption用法
<figcaption> 标签定义 figure 元素的标题（caption），“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
例子
不带有标题的figure元素：
<figure>
<img alt="Web前端之家" src="logo.png"/>
</figure>
带有标题的figure元素：
<figure>
<img alt="Web前端之家" src="logo.png"/>
<figcaption>Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption>
</figure>
多个图片，同一个标题的figure元素
<figure>
<img alt="Web前端之家1" src="logo1.png"/>
<img alt="Web前端之家2" src="logo2.png"/>
<img alt="Web前端之家3" src="logo3.png"/>
<figcaption>Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption>
</figure>
（2）hgroup
用法
<hgroup> 标签用于对网页或区段（section）的标题进行组合。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。
例子
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
3、页面交互元素
（1）details
用法
<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。
例子
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
（2）summary
用法
<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
例子
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
（3）progress
用法
标签运行中的进程。可以使用 标签来显示 JavaScript 中耗费时间的函数的进程。
例子
<progress>
<span id="objprogress">85</span>%
</progress>
（4）meter
用法
在全新的HTML 5中，可以使用< meter >标记元素实现百分比效果。< meter >是HTML 5中新增的标记，用于表示在一定数量范围中的值，例如，投票中各个候选人各占比例情况及考试分数等。< meter >元素仅是帮助浏览器识别HTML中的数量，而不对该数量做任何的格式修饰。在< meter >元素中有6个属性，通过这些属性会根据浏览器的特征以最好的方式展示这个数量。
最低0.47元/天 解锁文章
1980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
