一、响应式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个属性,通过这些属性会根据浏览器的特征以最好的方式展示这个数量。