一、响应式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个属性，通过这些属性会根据浏览器的特征以最好的方式展示这个数量。
例子
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
4、文本层次语义元素
（1）time
用法
time是HTML 5新增加的一个标记，用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time 元素</title>
</head>
<body>
<time datetime="2017-3-6">2017/3/6</time>
</body>
</html>
（2）mark
用法
mark元素是HTML 5中新增的元素，主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。其使用方法与<em>和<strong>有相似之处，但相比而言，HTML 5中新增的<mark>元素在突出显示时，更加随意与灵活。
例子
<p>Do not forget to buy <mark>milk</mark> today.</p>
注意：虽然<mark>元素在使用效果上与<em>或<strong>元素有相似之处，但三者的出发点是不一样的。<strong>元素是作者对文档中某段文字的重要性进行的强调；<em>元素是作者为了突出文章的重点而进行的设置；<mark>元素是数据展示时，以高亮的形式显示某些字符，与原作者本意无关。
（3）cite
用法
<cite>元素可以创建一个引用标记，用于文档中参考文献的引用说明，如书名或文章名称。一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
例子
<p>
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
</p>
5、全局属性
（1）draggable
用法
在HTML5中要想实现拖放操作，至少要经过两个步骤：
1.将想要拖放的对象元素的draggable属性设为true，这样才能将该元素进行拖放。另外，img元素和a元素（必须指定href属性）默认允许拖放。
2.编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示：
dragstart开始拖放操作。
drag 拖放过程中。
dragenter 拖放过程中鼠标经过的元素，被拖放的元素开始进入本元素的范围内。
dragover 拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动。
dragleave 拖放过程中鼠标经过的元素，被拖放的元素离开本元素的范围。
drop拖放的目标元素，有其他元素被拖放到了本元素中。
dragend 拖放的目标元素，拖放操作结束。
例子
<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>施放示例</title>
<script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="../js/dragdrop.js"></script>
</head>
<body>
<h1>简单拖放示例</h1>
<div id="dragme" draggable="true" style="width:200px; border:1px solid gray; ">请施放</div>
<div id="text" style="width:200px; height:200px; border:1px solid gray; "></div>
</body>
</html>
（2）hidden
用法
hidden 属性是布尔属性。如果设置该属性，它规定元素仍未或不再相关，浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）
当一个网页元素有了hidden属性后，它的表现跟CSS的display: none;作用非常相似，元素将会消失，而且不占用任何页面空间。
例子
<div hidden> You can't see me!</div>
（3）spellcheck
用法
spellcheck 属性规定是否对元素内容进行拼写检查。可对以下文本进行拼写检查：类型为 text 的 input 元素中的值（非密码）；textarea 元素中的值；可编辑元素中的值。
属性值：
true 规定应当对元素的文本进行拼写检查；
false规定不应对元素的文本进行拼写检查。
例子
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
（4）contenteditable
用法
contenteditable 属性规定是否可编辑元素的内容。
<element contenteditable="value">
属性值：
true规定可以编辑元素内容；
false规定无法编辑元素内容；
classname 继承父元素的 contenteditable 属性。
例子
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
三、CSS常用选择器
CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！
1、通配符选择器
通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。
基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}
例子
使用该选择器定义样式，清除所有HTML标记的默认边距。
*{
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。
2、标签选择器
标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
例子
使用p选择器定义HTML页面中所有段落的样式。
p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
3、类选择器
类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。
基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}
该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。
例子
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 <style type="text/css">
7 .red{color: red;}
8 .green{color:green;}
9 .font22{font-size:22px;}
10 p{ text-decoration:underline; font- family:"微软雅黑"; }
11 </style>
12 </head>
13 <body>
14 <h2 class="red">二级标题文本</h2>
15 <p class-"green font22">段落文本内容</p>
16 <p class="red font22">段落二文本内容</p>
17 <p>段落三文本内容</p>
18 </body>
19 </html>
类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开，如上述代码中的前两个<p>标记。
注意：类名的第一个字符不能使用数字，并且严格区分大小写。一般采用小写的英文字符。
4、id选择器
id选择器使用**‘#’**进行标识，后面紧跟id名。
基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例子
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>
注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。
5、属性选择器
属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
CSS 选择器参考手册：
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素 |
| [attributeI=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素 |
例子
1、为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
2、为 title=“W3School” 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
5、设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
使用属性选择器，可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值。
6、并集选择器
并集选择器是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开，如em,strong{ }。
语法格式：
标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；}
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="https://www.cnblogs.com/jizuiku"/>
<title></title>
<style type="text/css">
span,div, .content {
color:darkorange;
}
</style>
</head>
<body>
<span>博客园</span>
<div>给最苦</div>
<p class="content">网页设计</p>
</body>
</html>
并集选择器的优点是将多个标签的相同样式 提取出来，集体声明，优化代码，方便阅读。
7、后代选择器
后代选择器也称包含选择器，用来选择特定元素的后代。如.asideNav li{ }，表示先匹配第二个选择器的元素，并属于第一个选择器内。
语法格式：
标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}
在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。
定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。如：
div p { color: red; }
上述选择器中，div 为祖先元素，p 为后代元素，其作用就是选择 div 元素的所有后代 p元素，不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论 p 是 div 的多少辈的后代，p 元素中的文本都会变成红色。
例子
后代选择器中的空格，是用来表示后代层级的，当然就不限于二级的。根据需要，从任一个祖先元素开始，直到想应用样式的那个元素，都可以被放到后代选择器链中。如：
<ul>
<li><a href="/home/">首页</a></li>
<li><a href="/new/">新房</a></li>
<li><a href="/esf/">二手房</a></li>
<ul>
<li><a href="/sale/">出售房源</a></li>
<li><a href="/buy/">求购房源</a></li>
</ul>
<li><a href="/rent/">租房</a></li>
</ul>
上述导航菜单中，假如希望所有锚文本的字体大小是16px，就可以通过后代选择器ul a来选择 ul 元素的所有后代，因为后代选择器会影响到它的各级后代。如：
ul a {
font-size: 16px;
}
假如又希望第二级列表项的锚文本的字体大小是12px，就可以通过ul.nav ul a的这种多层后代关系的后代选择器，它只选择第二级列表项的锚文本。
ul li a {
font-size: 12px;
}
当然，这个后代选择器也可以写成ul、li、ul、li、a，以实现更精准的控制。
注意：
1、后代包括儿子，孙子，只要是放在指定标签的后代都是。
2、也可以不用标签名称1、2，也可以用id和class名，分别用id和class来选择。
3、后代选择器可以无限衍生。
8、子代选择器
子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。
语法格式：
标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}
例子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例</title>
<style>
#box>p{
color: darkorange; /*设置颜色为 深橙色*/
font-size: 80px;
}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
狸花猫
</p>
</div>
</div>
</div>
<p>
大橘猫
</p>
</div>
</body>
</body>
</html>
注意：
1、只会查找儿子，不会查找其他被嵌套的标签。
2、子元素选择器也可以用其他的id和class选择器来进行查找。 3、子元素选择器也可以通过>符号一直延续下去。
9、兄弟选择器（+和~）
相邻兄弟选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a的元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
语法格式：标签名称1+标签名称2 { 属性1：属性值1；属性2：属性值2；}
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
</head>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
当两个兄弟元素相同时，会实现一次循环查找：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li + li {
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
而~ 选择器 ：作用是查找某一个指定元素的后面的所有兄弟结点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
10、伪选择器
伪选择器是一种特殊的选择器，它分为伪类选择器和伪对象选择器2种。
1.伪类选择器：
CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。
| 伪类选择器 | 作用 | 应用对象 |
|---|---|---|
| :hover | 定义标记在鼠标悬停(划过)时的样式 | 所有显示标记 |
| :link | 定义标记在超链接状态下的样式 | a标签 |
| :focus | 定义标记在获取焦点时的样式 | a标签(IE浏览器不支持) |
| :visited | 定义标记被访问过后的样式 | a标签 |
| :active | 定义标记在选定时刻下的样式 | a标签 |
例子
以下是5个a标签
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
加点CSS样式：
a{
padding: 10px;
color:black; /*初始颜色全为黑色*/
font-weight: bold;
}
#a1:hover{
color:red; /*当鼠标悬停时链接1变成红色*/
}
#a2:link{
background-color: blue; /*给链接2添加蓝色的背景色*/
}
#a3:focus{
color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
}
#a4:visited{
color:green; /*被访问过后的链接4变为绿色*/
}
#a5:active{
background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
}
除了以上五种基本伪类选择器之外，CSS还支持诸如：”:first-child“首元素选择器和“:lang()”语言选择器等伪类选择器。
2.伪对象选择器
伪对象选择器根据对象内部的局部元素定义其样式。
| 伪对象选择器 | 作用 |
|---|---|
| :first-letter | 定义文本的第一个字符样式 |
| :first-line | 定义文本的首行样式 |
| :before | 定义对象之前内容的样式 |
| :after | 定义对象之后内容的样式 |
例子
<p>我是文本我是文本我是文本我是文本</p>
使用:before和:after样式后：
p:before{
content:'我说：“';/*在文本前面追加内容*/
color:red;
}
p:after{
content:'。”我说完了！';/*在文本结尾追加内容*/
color:red;
}
四、HTML5中常用的文本标签
1、标题标签
（1）定义及用法：
HTML中，定义了6级标题，分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。
（2）语法格式：
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
h系列标签中的内容显示为粗体，而且字的大小从大到小；h系列标签一般只用来定义标题，不建议随便使用。
（3）例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中h1~h6标题标签的详细介绍</title>
</head>
<body bgcolor="bisque" style="margin-left:100px;">
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
</body>
</html>
2、段落标签
（1）定义及用法：
<p>标签用于定义段落。
【注】 在HTML5中，段落标签既可以成对使用，也可以单独使用，为规范代码，建议成对使用
标签。
（2）语法格式：
<p>段落文字</p>
（3）例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>段落标签</title>
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
3、<br>标签与<wbr>标签
（1）定义及用法：
<br>标签可插入一个简单的换行符，用来输入空行，而不是分割段落。
<br> 标签是一个空标签，意味着它没有结束标签。
<wbr>规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行还要根据整行文字长度而定。除了Internet Explorer,其他所有浏览器都支持<wbr>标签。
（2）语法格式：
<p>文本<br>文本</p>
<p>文本<wbr>文本<wbr>文本</p>
（3）例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>hehhhhhhh hhhhhhh hhhhhh hhhhh tqwetuqwty<br> qwyie</p>
<p>gafjksgjs<wbr>DJGDGAS<wbr>GHGG hfskfjdkafasd</p>
</body>
</html>
4、<bdi>标签
（1）定义及用法：
<bdi>标签用于设置一段文本， 使其脱离其父标签的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。标签主要是让文字的方向发生变化，从左向右或者从右向左。它有一个属性dir，用来定义文本的方向，属性值为ltr，文本从左向右正常方向，属性值为rtl，文本从右向左；默认属性值为auto。
（2）语法格式：
<bdi dir="auto">内容</bdi>
（3）例子
<p>This <bdo dir="ltr">is</bdo> an bdi.</p>
<p>This <bdo dir="rtl">is</bdo> an bdi.</p>
<p dir="rtl">This <bdo dir="rtl">is</bdo>an bdi.</p>
5、<ruby>标签、<rt> 标签与<rp>标签
（1）定义及用法：
<ruby>标签用于定义ruby往释(中文注音或字符)。与<rt>标签- 同使用。
<rt>标签用于定义字符(中文注音或字符)的解释或发音。
<rp>标签在ruby注释中使用，以定义不支持<ruby>标签的浏览器所显示的内容。
（2）语法格式：
<ruby>内容<rp>(</rp><rt>内容</rt><rp>)</rp>内容<rp>(</rp><rt>内容</rt><rp>)</rp></ruby>
（3）例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ruby>
<rb>吉林大学</rb>
<rp>(</rp>
<rt>きつ りん だい がく</rt>
<rp>)</rp>
</ruby>
<p></p>
<ruby>
<rb>吉林大学</rb>
<rp>(</rp>
<rt>ji lin da xue</rt>
<rp>)</rp>
</ruby>
</body>
</html>
6、<mark>标签
（1）定义及用法：
<mark>标签主要用来在规觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示捏素关键字。
（2）语法格式：
<mark>内容</mark>
（3）例子
<p>Do not forget to buy <mark>milk</mark> today.</p>
注意：虽然<mark>元素在使用效果上与<em>或<strong>元素有相似之处，但三者的出发点是不一样的。<strong>元素是作者对文档中某段文字的重要性进行的强调；<em>元素是作者为了突出文章的重点而进行的设置。
7、<time>标签
（1）定义及用法：
<time>标签用于定义日期或时间，也可以两者同时。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。
（2）语法格式：
<time datetime="日期">日期</time>
（3）例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time 元素</title>
</head>
<body>
<time datetime="2017-3-6">2017/3/6</time>
</body>
</html>
8、<progress>标签
（1）定义及用法：
<progress >标签用于定义任何类型任务的运行进度，可以使用<progress>标签显示JavaScript中时间函数的进程。属性max：规定需要完成的值；属性value：规定进程的当前值。
（2）语法格式：
<progress value="当前值" max="需要完成的值"></progress>
（3）例子
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>html5中progress标签（进度条）的详细介绍</title>
</head>
<body style="background-color: bisque;">
<h3>progress标签演示</h3>
<progress value="50" max="100"></progress><br>
<progress value="100" max="100"></progress><br>
<progress value="10" max="200"></progress><br>
<progress value="150" max="200"></progress><br>
</body></html>
五、知识应用
1、制作HTML5 logo
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 logo</title>
<style>
body{
margin:0;
padding:0;
}
div{
position:absolute;
}
/*给类名为bg的元素设置宽、高、背景颜色*/
.bg{
width: 8000px;
height:6000px;
background:#f2f2f2;
overflow: hidden;
}
/*给类名为beam的元素设置宽、高、背景颜色及绝对定位*/
.beam{
width:1600px;
height:20px;
background:#fff;
top:290px;
left:-400px:
}
.d_shield1,.d_shield2 ,.d_shield3,.d_shield3 ,.d_shield4 ,.d_shield5 ,.d_shield6 ,.d_shield7 {
background:#e15016;
}
/*给类名为d_shield1 的元素设置宽、高及绝对定位*/
.d_shield1 {
left:32px;
width:140px;
height:346px;
}
.d_shield2 {
transform: skewx(5deg); /*变形(CSS3 新增属性) :水平方向斜切5度*/
left:16px;
width:100px;
height:346px;
}
.d_shield3 {
transform: skewy(15deg);
top:265px;
left:32px;
width:140px;
height:100px;
}
.d_shield4 {
left:172px;
width:140px:
height:346px;
}
.d_shield5 {
transform :skewX(-5deg) ;
left :227px;
width:100px;
height:346px;
}
.d_shield6 {
transform:skewY(-15deg) ;
top:265px;
left:172px;
width:140px;
height:100px;
}
.d_shield7 {
height:20px;
top:199px;
width:80px;
left:60px;
}
.l_shield1 ,.l_shield2 ,.l_shield3 ,.l_shield4 {
background:#ee6812;
}
.l_shield1 {
left:172px;
width:140px;
height:346px;
}
.l_shield2 {
transform:skewX(-5deg) ;
left:227px;
width:100px;
height:363px;
}
.l_shield3 {
transform:skewY(-15deg) ;
top:282px;
left:172px;
width:138px;
height:100px;
}
.l_shield4 {
height:43px;
top:113px;
width:100px;
left:180px;
}
.gray1,.gray2,.gray3,.gray4{
background:#ebebeb;
}
/*给类名为gray1的元素设置宽、高及绝对定位*/
.gray1 {
height:43px;
width:102px;
left:70px;
top:70px;
}
/*给类名为gray2的元素设置宽、高、斜切变形及绝对定位*/
.gray2 {
width:46px;
height:216px;
transform:skewX(5deg) ;
top:70px;
left:75px;
}
.gray3 {
width:95px;
height:43px;
left:77px;
top:156px;
}
.gray4 {
width:87px;
height:47px;
left:85px;
top:251px;
transform: skewY(15deg) ;
}
.white1,.white2,.white3,.white4{
background:#fff;
}
/*给类名为white1的元素设置宽、高及绝对定位*/
.white1 {
width:102px;
height:43px;
left:172px;
top:70px;
}
.white2 {
width:46px;
height:216px;
transform:skewx(-5deg);
left:223px;
top:70px;
}
.white3 {
height:43px;
width:95px;
left:172px;
top:156px;
}
.white4 {
width:87px;
height:47px;
left:172px;
top:251px;
tansform:skewy(-15deg);
}
/*给img标签设置宽、高及固定定位*/
img{
position:fixed;
top:-180px;
left:-125px;
width:250px
height:165px;
}
</style>
<link href="css/logo.css" type="text/css " hel="stylesheet">
</head>
<body>
<div class="bg">
<div class="beam" style="transform:rotate(5deg) "></div>
<div class="beam" style="transform:rotate(15deg) "></div>
<div class="beam" style="transform:rotate(25deg) "></div>
<div class="beam" style="transform:rotate(35deg) "></div>
<div class="beam" style="transform:rotate(45deg) "></div>
<div class="beam" style="transform:rotate(55deg) "></div>
<div class="beam" style="transform:rotate(65deg) "></div>
<div class="beam" style="transform:rotate(75deg) "></div>
<div class="beam" style="transform:rotate(85deg) "></div>
<div class="beam" style="transform:rotate(95deg) "></div>
<div class="beam" style="transform:rotate(105deg) "></div>
<div class="beam" style="transform:rotate(115deg) "></div>
<div class="beam" style="transform:rotate(125deg) "></div>
<div class="beam" style="transform:rotate(135deg) "></div>
<div class="beam" style="transform:rotate(145deg) "></div>
<div class="beam" style="transform:rotate(155deg) "></div>
<div class="beam" style="transform:rotate(165deg) "></div>
<div class="beam" style="transform:rotate(175deg) "></div>
<div class="logo" style="top:120px;left:630px">
<!--盾牌(左)-->
<div class="d_shield1"></div>
<div class="d_shield2"></div>
<div class="d_shield3"></div>
<!--盾牌(右)-->
<div class="d_shield4"></div>
<div class="d_shield5"></div>
<div class="d_shield6"></div>
<!--浅橘色部分-->
<div style="transform:scale(0.82);left:31px;top:25px;">
<div class="l_shield1"></div>
<div class="l_shield2"></div>
<div class="l_shield3"></div>
<!--以下4个div组成的logo里面数字5的左半边灰色部分-->
<div class="gray1"></div>
<div class="gray2"></div>
<div class="gray3"></div>
<div class="gray4"></div>
<!--以下4个div组成的logo里面数字5的右半边白色部分-->
<div class="white1"></div>
<div class="white2"></div>
<div class="white3"></div>
<div class="white4"></div>
<!--最后的修补-->
<div class="d_shield7"></div>
<div class="l_shield4"></div>
<div src="images/HTML.png"></div>
<div class="img" >
<img src=".idea/HTML.png"/>
</div>
</div>
</div>
</body>
</html>
2、html制作超级课程表界面
先看看制作的效果
整体构思：综合使用了<div>标记、列表以及CSS样式。
详细源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超级课程表</title>
<style>
body{
margin:0% auto;
padding:0;
background:#fff;
text-align:center;
}
body>div{
margin-right: auto;
margin-left: auto;
text-align: center;
}
div,form,ul,ol,li,span,p,dl,dt,dd,img{
margin: 0;
padding: 0;
border: 0;
}
h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
ul,ol,li{
list-style: none;
} /*清除列表默认样式*/
/*设置浮动*/
.fl{float: left;}
/*课程背景颜色*/
.xsyzc{background-color: #d2d2d2;}
.czxt{background-color: #56f106;}
.ui{background-color: #ff655d;}
.dl{background-color: #1affd8;}
.sjsj{background-color: #0cfdff;}
.pe{background-color: #fdd10e;}
.mg{background-color: #7d74ff;}
.ps{background-color: #306cf6;}
.rg{background-color: #5fcff6;}
.web{background-color: #ebec06;}
.nr{
width:890px;
height:1180px;
margin: 0 auto;
}
/*设置标题CSS规则*/
.bt{
padding-top: 35px;
margin: 0 auto;
}
.bt p{
font-size: 40px; font-family: 微软雅黑;color: #fff;
}
/*设置星期CSS规则*/
.TL{
width: 890px;
height: 4px;
background-color: #d2d2d2;
margin-top: 30px;
}
.Week{
width: 890px;
height: 58px;
background-color: #fff;
filter: alpha(opacity=60);
opacity: 0.6;
}
.Week ul{
padding-left: 60px;
}
.Week ul li{
font-family: 微软雅黑;
font-size: 26px;
color: #333;
text-align: center;
width: 110px;
line-height: 56px;
}
/*设置节次CSS规则*/
.Source{
width: 890px;
height: 858px;
margin-top: 0px;
}
.Num{
width: 60px;
height: 1000px;
margin-top: 1px;
background-color: #fff;
filter: alpha(opacity=60);
opacity: 0.6;
}
.Num ul li{
font-family: 微软雅黑;
font-size: 26px;
color: #333;
width: 60px;
height: 82px;
line-height: 81px;
text-align: center;
}
/*设置课程CSS规则*/
.Sun ul li{width: 98px;height: 153px;}
.Mon,.Tue,.Wed,.Thu,.Fri,.Sat,.Sun ul{margin-top: 1px;}
.kc li{
width: 98px;
height: 153px;
border-radius: 10px;
border: 5px solid #fff;
margin-bottom: 3px;
margin-left: 2px;
box-shadow: inset 0 1px 8px #666;
}
.kc li p{
font-family: 微软雅黑;
color: #fff;
font-size: 20px;
width: 98px;
height: 153px;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
</style>
</head>
<body>
<div class="nr">
<div class="bt"><p>超级课程表</p></div>
<div class="TL"></div>
<div class="Week">
<ul>
<li class="fl">周一</li>
<li class="fl">周二</li>
<li class="fl">周三</li>
<li class="fl">周四</li>
<li class="fl">周五</li>
<li class="fl">周六</li>
<li class="fl">周日</li>
</ul>
</div>
<div class="Week" style=" height: 20px;">
<ul>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/02</li>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/03</li>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/04</li>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/05</li>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/06</li>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/07</li>
<li class="fl" style="font-size: 20px; color: #919191;text-align: center;width: 110px; line-height: 10px;">03/08</li>
</ul>
</div>
<div class="Source">
<!-- 节数-->
<div class="Num fl">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<!-- 周一课程信息-->
<div class="Mon fl">
<ul class="kc">
<li style="box-shadow: none;"></li>
<li class="czxt" ><p>操作系统@第五教学楼南201</p></li>
<li class="dl"><p>电路与电子技术@五教北301</p></li>
<li class="xsyzc"><p>【非本周】形势与政策@五教北702</p></li>
<li class="ui"><p>UI界面设计@第三实验大楼209</p></li>
<li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li>
</ul>
</div>
<!-- 周二课程信息-->
<div class="Tue fl">
<ul class="kc">
<li style="width: 98px; height: 320px;" class="sjsj"><p>视觉设计基础@第三实验大楼207</p></li>
<li style="box-shadow: none;"></li>
<li class="pe"><p>大学体育（四）武术操@西区山顶球场</p></li>
<li class="ps" style="width:98px; height: 228px; "><p>Photoshop图像处理@第三实验大楼205</p></li>
</ul>
</div>
<!-- 周三课程信息-->
<div class="Wed fl">
<ul class="kc">
<li class="rg"><p>软件工程导论@五教南101</p></li>
<li class="ui"><p>UI界面设计@五教南508</p></li>
<li class="mg" ><p>毛泽东思想和中国特色社会主义@五教北504</p></li>
<li style="box-shadow: none;"></li>
<li class="ps" style="width:98px; height: 228px;"><p>Photoshop图像处理@第三实验大楼205</p></li>
</ul>
</div>
<!-- 周四课程信息-->
<div class="Thu fl">
<ul class="kc">
<li class="dl"><p>电路与电子技术@五教南201</p></li>
<li style="background-color: lightgray;"><p>【非本周】操作系统@第三实验大楼209</p></li>
<li style="box-shadow: none;"></li>
<li style="background-color: lightgray;"><p>【非本周】Web前端高级技术@第三实验大楼209</p></li>
<li class="web" style="width:98px; height: 228px;"><p>Web前端高级技术@第三实验大楼209</p></li>
</ul>
</div>
<!-- 周五课程信息-->
<div class="Fri fl">
<ul class="kc">
<li class="dl"><p>【非本周】电路与电子技术@第三实验大楼209</p></li>
<li class="mg"><p>毛泽东思想和中国特色社会主义@五教北503</p></li>
<li class="rg"><p>软件工程导论@一教307</p></li>
<li class="czxt"><p>操作系统@八教底阶1</p></li>
<li style="box-shadow: none;"></li>
</ul>
</div>
<!-- 周六课程信息-->
<div class="Sat fl">
<ul class="kc">
<li style="width:98px; height: 641px;background-color: lightgray;"><p>UI界面设计实验课@第三实验大楼209</p></li>
<li class="web" style="width:98px; height: 228px;"><p>Web前端高级技术@第三实验大楼205</p></li>
</ul>
</div>
<!-- 周日课程信息-->
<div class="Sun fl">
<ul class="kc">
<li style="border: none;box-shadow: none;width: 98px;height: 153px;"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
心得：通过以上几节课程内容的学习，了解了HTML5的新特性以及一些新增元素及其用法，对web前端设计有了心得认识，通过整理笔记的形式也加深1了自己对所学知识的理解和掌握，能设计出一些简单的样式，有收获是件开心的事！
