html5基础知识，期末复习大全
目录
1.1 Web系统体系结构
1、C/S（即Client/Server）结构
1.2 浏览器
1、排版引擎（Rendering Engine）
2、Javascript引擎
1.3 Web相关概念
1、URL(Uniform Resource Locator )
2、超链接
3、网站
4、网页
5、主页
6、静态网页
7、动态网页
8、网页设计原则
9、网页设计技术
2.2 标签基础
2.2.1 标签语法
1、双标签
2、单标签
3、属性
2.2.2 基本标签
1、元数据
2、表格
3.1 CSS概述
3.1.1 认识CSS
3.1.2 CSS使用方式
3.1.3 CSS基础概念
1、单位
2、颜色值
3、继承性
4、层叠性
5、重要性
6、元素类型
7、文档流
3.3 CSS选择器
1、选择器类型
3.5 CSS常用属性
1、字体属性
2、文本
8、溢出
10、浮动
3.6 盒模型
1、盒模型的基本概念
2、多盒子边距合并问题
4.1 JavaScript初识
1、JavaScript概念
2 、JavaScript特点及功能
3、JavaScript代码嵌入
4.2 JavaScript基本语法
4、运算符和表达式
4.4 JavaScript常用对象
1、对象的概念
2、事件的使用
3、常用对象
1）window对象
2）window的提示对话框
3）document对象
5.1 响应式Web设计基础
1、响应式Web简介
2、HTML5新特性
3、HTML5基本语法
4、HTML5语义化标签
5、CSS3新特性
5.2 文本类网页设计
1、HTML5中常用文本标签
2、CSS字体样式属性
3、CSS3的@font-face规则
4、多列布局（Multi-column Layout）
5、CSS文本外观属性
7、Web字体图标
8、CSS导航栏
5.3 图文类网页设计
1、HTML5常用图像标签
2、CSS背景设置
3、盒阴影
4、CSS3渐变
5、圆角边框
6、CSS3过渡
7、CSS3变形
8、CSS3动画
9、CSS精灵技术
5.4 HTML5表单应用
HTML5表单验证
5.5 HTML5画布
5.6 音频与视频
1、视频
2、HTML DOM Video对象
3、音频
5.7 响应式web设计
1、基础概念
（2）媒体查询
2、响应式设计
5.8 Bootstrap前端工具
1、Bootstrap简介
实现响应式
2、重要控件
1.1 Web系统体系结构
了解结构是我们学习很多课程非常重要的方法。
Web应用项目本身是一种软件系统，它也是具有自身结构的，即系统体系结构。有一门课程《软件体系结构》会专门研究这个问题。
系统体系结构是一个综合各种观点的模型，用来完整描述整个系统，通过系统体系结构就能够了解一个软件系统的基本架构。常见的系统体系结构有C/S结构和B/S结构。
1、C/S（即Client/Server）结构
首先，了解一下C/S的工作流程，Server端存储了各种资源，我们在Client端通过网络发送资源请求，接收并显示Server端响应的内容。如下图所示：
浏览Web内容是Internet提供的主要服务，它以HTTP协议(HyperText Transfer Protocol)在网上传送以HTML(Hyper Text Markup Language)语言编写的网页内容，从而进行信息交流。
它的具体工作步骤如下：
☆ 通过客户端浏览器输入URL向WEB服务器发出服务请求；
☆ 服务器解析浏览器请求的URL，找到相应的网页文件；
☆ 网页中包含JavaScript等脚本，它将随HTML文档一起下载到客户端；若网页中嵌套有ASP等程序，服务器将执行这些程序并将运行结果以HTML标记形式发送给客户端；
☆ 浏览器解释HTML文档，并显示结果。
超文本传输协议(HTTP)是WEB浏览器与WEB服务器应用层之间的通信协议。HTTP会话过程包括4个步骤：
☆建立链接(connection)；
☆发送请求(request)；
☆响应请求(response)；
☆关闭链接(close)。
在C/S结构下，不同的服务需要安装不同的客户端软件，进而占用非常多的系统资源。除此之外它还有其它一些弊端，比如A需要在B电脑上处理文件，但B电脑并未安装类似的软件，这样得先去下载，非常不方便，并且软件升级后也需要重新下载。因此，需要有新的方法来解决该问题，于是就有了新的B/S结构。
2、B/S（即Broswer/Server）结构
B/S结构就是浏览器/服务器结构，它解决了C/S结构所带来的不便，能够将所有的服务（如QQ、邮件等）都通过浏览器来完成。由于操作系统通常都安装了某款浏览器，这样可以更多的节省系统资源。同时，各种服务软件功能的升级也无需重新下载，只要刷新网页即可。但B/S也存在一些不足，比如操作的稳定性、流畅度等方面相对较弱，并严重依赖网络的状况。
在讲解了C/S架构和B/S架构之后，为了让大家更加清楚它们各自的特点，下面对它们做对比说明，如表所示。
1.2 浏览器
大家都有这样的体会：平时上网时，都是通过浏览器发送请求信息，如URL网址、关键词等，同时也是通过浏览器来查看互联网的响应信息。可见，浏览器是Web前端的重要工具。
首先必须明确，Web前端开发是建立在B/S结构基础之上，以浏览器为核心。由不同软件厂商提供的现有浏览器种类众多，且各有特点和优势。而比较常用的浏览器有IE、Firefox、Chrome、Opera等。那么，浏览器的结构又是怎样的呢？
浏览器通常是由排版引擎和Javascript引擎构成。
1、排版引擎（Rendering Engine）
排版引擎也称作内核，是用来渲染网页内容的，将网页的代码转换为最终能看得见的页面。而不同浏览器的内核是不尽相同的。
1）Trident内核就是大名鼎鼎的IE浏览器所使用的内核，也是很多浏览器所使用的内核，常被称为IE内核。
2）Gecko内核是一款开源的浏览器内核，目前使用最主流的Gecko内核的浏览器是Mozilla Firefox，所以也常常称之为火狐内核。
3）WebKit内核是最有潜力的新兴内核，性能非常好，而且对W3C标准的支持很完善，谷歌的Chrome就采用Webkit内核。
4）Opera浏览器采用Presto内核，该内核对W3C标准的支持也很良好。
2、Javascript引擎
JavaScript引擎简称JS引擎，该引擎就是用来解析执行JS程序的，其性能对整个网页的加载速度有着很大的影响。
1）Chakra（查克拉）引擎是IE9启用的新的JavaScript引擎。
2）SpiderMonkey引擎应用在Firefox浏览器中。
3）V8引擎应用于Chrome浏览器。
1.3 Web相关概念
1、URL(Uniform Resource Locator )
URL即统一资源定位器，也就是各个网页在Internet上的地址。通俗地讲，URL就是网址，指定Internet资源的位置。
URL的结构由三部分组成：http://网站地址/目录路径/文件名称。
其中，“http://”为网络访问的协议部分；“网站地址”就是网络服务器的地址，可以是域名或者IP地址；“/目录路径/文件名称”表示资源存放在服务器上的实际位置。
例子：http://www.cqvip.com/qk/83461A/200901/index.shtml
访问怀化学院学报网站的qk/83461A/200901目录路径中的index.shtml。
2、超链接
超链接是实现超文本的主要技术。它指向WWW的资源，如不同站点的网页、同一站点的其它网页、网页的其它段落。
超链接的作用就是，在浏览网页时，如果用鼠标单击超链接，就会跳转到超链接所指向的资源，可以从WEB上下载信息。
超链接的判断方法很简单，当用鼠标把光标箭头移动到超链接上时，光标会改变成手的形状。
3、网站
网站是一个存放在网络服务器上的完整信息的集合体。
网站内通常包含一个或多个网页，这些网页以一定的形式链接在一起，成为一个整体。
4、网页
网页是网站的重要组成部分，它是一张页面，可以看成是一个单一体，是网站的一个元素。网页里可以有文本、图片、声音、视频、动画等元素。
其中，文本是构成网页的主体。对文本元素的设计包括字体、字型、颜色、段落设置以及定位等。而图片是实现网页图文并茂的主要手段。常用的图形文件格式有GIF、JPEG、PNG、矢量格式。在使用图片时，应掌握的基本原则是，图形文件小、数量少，图像质量高，合理使用动画。
5、主页
主页也称之为首页。它是一个殊性的网页，是整个网站的起始点和汇总点。
主页也是浏览者浏览一个网站的入口。
6、静态网页
静态网页是指这个网页不论在何时从何地浏览，都将显示相同的画面和内容，且用户仅能浏览，无法提供信息给网站，让网站作出响应。
静态网页的编程语言有HTML、CSS等。 HTML(超文本标记语言)是网页设计的基础，也是表示网页的一种规范，通过标记符（或标签）来定义网页内容的显示格式；CSS(层叠样式表)技术是HTML功能的扩展，使用它能设计出更具表现力的网页。
注意：在网页中添加相关的动画，并不代表它不是静态网页。
7、动态网页
动态网页是指网页能够按照用户的需求做出动态响应。常见的动态网页有留言板、论坛等。
常用的网页动态/特效脚本语言有JavaScript和VBScript。其中，JavaScript是一种基于对象的、动态的、跨平台的、具有简单性与安全性的脚本语言。JavaScript简单而功能强大，主要表现在：
(1)制作网页特效；
(2)实现表单数据的客户端校验；
(3)实现窗口动态操作。
8、网页设计原则
网页设计应掌握以下原则：
(1)页面力求精简：页面简洁醒目，颜色不宜过深，图片不宜过大过多；
(2)巧妙安排图形图像：利用图片的视觉效果使页面生动，吸引浏览者；
(3)善于借鉴信息：参考、应用Internet上现成的信息，可使网页制作收到事半功倍的效果。
(4)内容通俗易懂：内容丰富，容易查找，易读易懂。
(5)页面以小为好，恰到好处：满足信息量和速度的需求。
9、网页设计技术
从静态网页与动态网页的概念部分的学习，我们知道，网页都具有自己的结构、样式和行为。其中，网页结构由HTML语言来编写，网页样式由CSS定义和设计，网页的行为由JavaScript来编写。因此，网页设计的3大技术分别是HTML、CSS和JavaScript，在后面章节会对它们进行详细介绍。
2.2 标签基础
2.2.1 标签语法
HTML提供了一套标签来描述网页内容，如head表示网页头部、body表示网页主体等。
HTML标签由一个独立单词或单词缩写构成，并且这些单词或单词缩写被要求放在"<>"中，比如
、等，同时标签分为双标签和单标签。
1、双标签
双标签要有一个开始标签和一个结束标签，两个标签之间是要显示到浏览器中的内容，并且开始标签和结束标签要成对使用，标签里加"/"表示结束。
例如：
双标签表示一个段落，是paragragh缩写。
2、单标签
单标签没有结束标签，在标签结束位置中添加"/"表示自闭合。如果不规范的话，也可以不加"/"，但建议规范使用。
例如：
（换行标签）、
（绘制横线的标签）、
3、属性
属性是标签的重要组成部分。通过属性可以对标签进行一些特殊的设置或对标签进行一些额外的补充，属性分为有值属性和无值属性，有值属性的属性值使用双引号包裹。
例如：
写在标签内的部分都是属性，其中，src、width、height、alt、type等都是有值属性，disable是无值属性。
2.2.2 基本标签
1、元数据
元数据是指页面的相关信息，比如作者、关键字、描述等，通过标签进行设置。元数据不会显示在客户端，但是会被浏览器解析。标签只能位于文档头部（
之间），元数据总是以“名称/值”对的形式出现。例如： "http://www.w3.org/TR/html4/loose.dtd">
学习元数据的使用
其中，标签的name属性记录的"名称/值"中的"名称"，如name="keywrods"，用户可以自定义描述网页信息的名称。
content属性记录"名称/值"中的"值"，如content="html,css,javascript"。定义与http-equiv或name属性相关的元信息。
http-equiv属性也是记录的"名称/值"中的"名称"，把content属性关联到HTTP头部。
2、表格
建立表格主要用到四个标签：
| ， | 。
| |||
|---|---|---|---|---|
| 和 | 为单元格标签，用来定义表格的首行单元格，其中的文字以黑体显示，该行是可选的；和 | 为单元格标签，用于定义表格的单元格。它们必须放在|||
| 和 | 标签。
| ( | )首行首列单元格内容>(/ | )
……
| ( | )首行第n列单元格内容>( | )
|---|---|---|---|---|
| 第m行首列单元格内容 | 第m行第n列单元格内容 |
3.1 CSS概述
3.1.1 认识CSS
HTML标签都具有各自的属性，用于控制元素的显示效果。由于主要的浏览器（如Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。因此，随着元素显示效果控制需求的变化，标签原有属性难以满足要求，就需要扩展标签的属性以适应该变化。
但HTML作为一种标记语言，其某个版本的核心标签库应该保持相对稳定，不宜频繁变化。
为了解决这个问题，万维网联盟（W3C）这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在 HTML4.0之外创造出样式（Style）。于是，扩展标签属性机制的CSS（Cascading style sheets）层叠样式表技术应运而生。
W3C在1996年提出第一个定义HTML显示样式的层叠样式表规范CSS1，并且很快就成为一个被广泛采纳的标准。到1998年，W3C在原有草案的基础上进行了扩展，建立了CSS2规范，它不仅包括了原有的表现形式与标准，还有许多增强功能。现在已经发展到CSS3规范，语义化能力更加强大。
所有的主流浏览器均支持层叠样式表。CSS用来控制网页元素的样式（即显示效果），比如字号、颜色、排版布局等。它能够配合HTML设计出丰富多彩的网页。CSS中书写样式规则必须要遵循如下的语法规则。
选择器 { 声明列表; }
其中，大括号中的每条声明由冒号分隔的属性值对组成，声明之间用分号分隔，注意最后的“;”不能省略。
假设把
标签中文字的颜色设置成红色、字号设置成14像素，需要按下面语法设置。
特别要注意的是，最后一个声明后，也要加上分号“;”，以免出错。
要理解和掌握好CSS，需要准确把握以下3个概念。
（1）元素。元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。
（2）属性。在HTML文档中属性是指元素某方面的特性。
（3）规则。样式规则由选择器和声明列表（或声明块）构成，而声明块则是“属性:值”对（即声明）的集合，用来控制网页元素的显示方式。
总起来说，CSS具有以下几个作用。
（1）简化了网页格式设计，增强了网页的可维护性。它加强了网页的表现力，提供更多效果来扩展内容表现形式。
（2）增强了网站格式的一致性，降低网站开发与维护工作量。
（3）允许作者独立控制文档中所有标签的显示形式。
3.1.2 CSS使用方式
CSS样式可以按其出现在不同地方划分为不同类型。按照该标准来划分，CSS中主要有以下3种样式类型：
（1）内联样式，也称行内式或元素级样式。它用于给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则，内联样式的作用范围仅限于本元素。
（2）内部样式，亦称文档级样式或页面级样式。它是将所有样式规则都罗列在HTML网页文档的头部，即写在(
和之间的)中，其作用范围是整个文档。（3）外部样式，也叫外联式或项目级样式。它是把所有样式规则书写在一个独立于网页外的文档(.css文件)中。可以供整个项目中所有有需要的HTML网页文档使用。
CSS样式必须引入到HTML文档才能被浏览器识别并应用到HTML元素上。CSS类型不同，引入方式也不同。因此，将CSS样式引入至HTML文档也就有三种方式，下面分别举例加以说明。
（1）内联样式引入
通过直接设置标签属性style来引入CSS样式，即直接将样式规则的声明块作为style的属性值。例如：
欢迎光临
以上方式将该标题文字设置为红色倾斜字体。
（2）内部样式引入
通过
这类样式将使该网页中所有
标签定义的文字都为红色倾斜字体。
（3）外部样式引入
将CSS样式写在一个独立的.css文件中，然后通过标签引入到HTML文档头部（
与之间）。例如：
另外，还可以在
头部使用3.1.3 CSS基础概念
1、单位
页面布局中，经常会设置元素的宽高、字号、位置等属性，这些属性值都是以一个数值形式存在的，这时我们就需要有相应的单位表达。CSS中的单位有很多，我们只介绍以下几种。
（1）px（像素）
大家熟悉，屏幕是由无数个网格状的点构成的，把这些点称为像素，例如1366 * 768指屏幕由水平方向1366个像素，垂直方向768个像素构成。比如：
（2）%（百分比）
百分比是指相对于某一元素尺寸（通常是父元素）的大小。
（3）em（字号大小）
em是一个相对单位，等于当前元素字号大小。
2、颜色值
通常，网页由不同颜色的HTML元素构成，CSS提供了多种方法设置元素的颜色值。
（1）关键字
关键字由表示颜色的英文单词构成，如red、green、blue等。例如：
（2）16进制值
16进制值由一个6位长度的16进制的数值和符号"#"构成，如#FFFFFF、#F2F2F2等。例如：
（3）三原色（RGB值）
三原色（RGB值）由Red（红）、Green（绿）、Blue（蓝）3色组合构成，如rgb(120, 120, 120)，3个参数分别代表红色值、绿色值、蓝色值，取值范围为0~255，也可以是3个百分比，如rgb(10%,20%,50%),组合不同的数值会得到不同的颜色。例如：
3、继承性
继承指的是当为某个父元素设置CSS属性时，其子元素也会被应用这些CSS属性，比如，为父元素
设置的CSS属性“color:red;font-size:24px;”，也同样会应用到其子元素。
注：并不是所有CSS属性都会被继承，继承适用于所有嵌套标签场景。
4、层叠性
当同一个HTML元素被不止一个样式定义时，就会产生样式层叠。也就是在HTML文件中对同一元素设有多个相同权重的CSS样式，则处于最后面的CSS样式会被应用。示例代码如下：
/*下面段落文字将显示为绿色*/
小红是一个胆小如鼠的女孩。
5、重要性
在某个样式的声明后添加“!important”，代表该样式具有最高权值，强调样式的重要性。“!important”要写在该声明后的分号“;”的前面。
示例代码如下：
/*由于重要性的设置，使下面段落文字显示为红色*/
小白是一个胆大包天的男孩。
6、元素类型
CSS元素划分成块元素、行内元素、行内块元素等多种常用类型。元素类型不同，它在文档中的表现方式也有变化。
（1）块元素是一个标准的盒子，可以对盒子的任一构成部分进行设置，默认情况下独占一行。
常见块元素：body、h1~h6、p、ul、ol、li、dl、dt、dd、table、form、div等。
（2）行内元素是一个非标准的盒子，设置宽度、高度、垂直内边距、垂直外边距无效，并且与相邻元素共享一行。
常见行内元素：a、b、s、i、span等。
（3）行内块元素是块元素和行内元素的结合体，可以对盒子的任一构成部分进行设置，并且与相邻元素共享一行。
常见行内块元素：img、input、select等。
CSS中，通过display属性可实现元素类型的转换。例如：
7、文档流
所谓文档流指文档里各元素的默认排列方式。在正常文档流中，网页中元素的排列规律如下：
（1）块元素：自上而下排列。
（2）行内元素：自左向右排列。
3.3 CSS选择器
在CSS中，选择器是一种模式，即用于选择元素样式的模式。
CSS可以对HTML元素样式进行分别设置，例如，将
元素设成红色、
元素设成绿色，通过CSS选择器能够选对元素进筛选，进而设置不同的样式。
根据选择器的作用将CSS中的选择器划分为很多（40+）类，下面只介绍常用的几种。
1、选择器类型
（1）元素选择器，通常就是HTML的元素，在W3C标准中，元素选择器又称为类型选择器（type selector）。例如：
（2）类选择器，语法格式为".类选择器名"，以一个点号来标明类选择器。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。为了将类选择器的样式与元素关联，必须将class指定为一个适当的类选择器名。同一个页面多个元素可以使用相同的类选择器名。例如：
.myfont {color:red; font-style:italic;}
因此，多个不同元素的class属性均可取值为“myfont”来使用该样式。
（3）ID选择器，允许以一种独立于文档元素的方式来指定样式。通过设置ID属性，然后根据其属性值来应用样式，语法格式为"#id"，以一个#号来标明ID选择器。例如：
#identifier {color:blue;}
但是，同一个页面不能出现相同的ID名，因为网页中元素的ID值是唯一的。因此，使用ID选择器只能为网页中的某一个元素设置样式。
（4）后代选择器，又称包含选择器，根据元素之间的嵌套关系选择元素，语法格式为：
"parents descendant"
注意，祖先元素和后代元素之间用空格分隔。例如,嵌套在p元素内的img元素（不一定是子元素）的宽度是120px可设置为：
p img {width:120px;}
（5）子选择器，根据元素之间的嵌套关系选择元素，但是只包含子元素，语法格式为：
"parent>child"
例如：
p>img {width:120px;}
只对p的子元素img有效，对p的孙子以下的后代元素无效。
（6）交集选择器，将多个选择器联合使用，取交集，语法格式为：
"p.special"
例如：
p.special {color:green;}
相当于给类选择器".special"添加了一个元素选择器的限制，它所定义的样式规则只能应用于class="special"为p元素，对其它情况无效。
（7）并集选择器，也就是选择器分组，将多个选择器联合使用以逗号分隔，取并集，其语法格式为：
"h2, h3, p"
例如：
p,h2,h3 {color:pink;font-size:16px;}
相当于分别对p,h2,h3各设置了一次{color:pink;font-size:16px;}。
（8）通用选择器，用"*"号代表所有元素。例如：
* {
padding:0;
margin:0;
}
它所设置的该样式将应用于网页的所有元素。
（9）匿名选择器，通过标签style属性直接引入CSS样式，也就是前面所学的内联样式。例如：
2、选择器优先级
在选择器类型部分介绍了9种常用的选择器。那么，如果我们将声明相同的多种选择器应用于同一个元素时会发生什么事情呢？比如，先定义样式为：
p {color:yellow;}
.special {color:blue;}
再编写HTML元素为：
只要功夫深，铁杵磨成针。
缓缓飘落的枫叶像思念！
通过浏览器查看，会发现第2个p元素内容颜色为蓝色，这是由于选择器的优先级发挥作用的结果。
CSS优先级指CSS样式在浏览器中被解析的权重不同。它分为以下几种情况。
（1）通常，不同选择器被赋予不同优先级权重。内联样式（匿名选择器）的权值最高，置为 1000；id选择器的权值置为100；类选择器的权值置为10；HTML标签选择器的权值置为1，CSS选择器的优先级顺序如下图所示。
（2）如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。一般在多重样式（Multiple Styles）情况下（即出现在
使用@font-face，应用漂亮的Web字体
4、多列布局（Multi-column Layout）
在网页制作中，如果想让一个段落的内容像报刊、杂志中那样分栏显示，就用到了CSS3中提出的多列布局模块（Multi-column Layout Module）。例如（自己运行观察效果）：
北京千锋教育科技有限公司是一家专门致力于高素质软件开发人才培养的高科技公司。它依托程序员平台 csdn ,整合了国内众多知名软件企业的资源,并邀请到任跨国公司和国内大中型企业架构师,系统分析师、企业培训师组成自己的团队。前锋教育致力于为企业培养人才的培训理念，以“学员自学入门教程，通过基础考核后进行强化培训”为招生原则，以“针对企业需求，重视基础理论建设，强化高端应用技能”为教学目标，以“高薪保证强大的资深教育团队”为教学后盾，解决所有培训学员的后顾之忧，并解决用人企业难以招聘到合格人才的困扰。
5、CSS文本外观属性
CSS的文本外观属性用于设置颜色、字间距、字母间距、水平对齐、文本装饰 、阴影等。
| 属性 |
描述 |
允许取值 |
| color |
文本颜色 |
red, #FF0000, rgba(0,0,0,0.5) |
| letter-spacing |
字间距 |
normal, 0.5em, 20px |
| word-spacing |
单词间距 |
normal, 0.5em, 20px |
| line-height |
行间距 |
5px, 2em, 150% |
| text-transform |
英文文本转换 |
none, capitalize, uppercase, lowercase |
| text-decoration |
文本装饰 |
none, underline, overline, line-through |
| text-align |
水平对齐方式 |
left, right, center |
| text-indent |
首行缩进 |
10px, 2em, 20% |
| white-space |
空白符处理 |
normal, pre, nowrap |
| text-overflow |
标示对象内溢出文本 |
clip, ellipsis |
6、添加文本阴影
在CSS中，使用text-shadow属性可以为页面中的文本添加阴影效果，其基本语法格式如下：
选择器 {text-shadow:h-shadow v-shadow blur color;}
h-shadow设置水平阴影距离；
v-shadow设置垂直阴影距离；
blur设置模糊半径；
color：设置阴影颜色。
7、Web字体图标
在传统的网页制作过程中，涉及到图标的问题大多用图片进行处理，图片有优势也有不足。例如使用图片会增加总文件的大小和很多额外的“http请求”，增大服务器负担，并且有大量图片下载需要时，增加用户等待时间，牺牲用户体验。另外，图片（位图）在高分辨率屏上会变得模糊，因此，有时候在“响应式设计”中使用图像的最好解决方案就是不去使用图片。而字体通常是矢量的，所以就解决了图片的缺点，即图标字体化。
font-awesome是一个开源免费的字体图标工具，下载后使用步骤如下。
（1）首先去“https://github.com/FortAwesome/Font-Awesome”地址进行下载，下载完毕后解压。
（2）将font字体文件夹和css文件夹以及“font-awesome.min.css”文件拷贝到自己的项目中。
（3）在页面引入font-awesome.min.css文件。
（4）为页面元素添加相应的字体图标class，例如：
会在页面显示相应的字体图标。每个图标都有相应的class，如果想使用其他的图标可以去地址：Icons | Font Awesome进行查看。
8、CSS导航栏
对于任何一个网站来说，拥有一个易用的导航栏都是非常重要的，可以大大的提高用户体验，导航栏其实就是一个超链接的列表，所以可以结合使用无序列表
- 标签和超链接来实现它。可通过运行以下案例来演示导航效果：
5.3 图文类网页设计
1、HTML5常用图像标签
（1）标签：用于定义网页中的图像，语法格式如下所示：
（2）
拍摄者：小菜 拍摄时间：2019 年 4 月
2、CSS背景设置
CSS用于背景设置的常用属性详见CSS基础。用backgroung进行背景设置的复合写法语法如下：
选择器 {
background: background-color || background-image || background-repeat ||background-attachment || background-position
}
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：
transparent none repeat scroll 0% 0%。
3、盒阴影
使用CSS3的box-shadow属性设置元素阴影。语法如下：
对象选择器 {
box-shadow: 投影方式||X轴偏移量||Y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色
}
投影方式：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，其投影就是内阴影。
X轴偏移量：是指阴影的水平偏移量，其值也可以是正负值，如果为正值，阴影在对象的右边，反之其值为负值时，阴影在对象的左边。
Y轴偏移量：是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。
阴影模糊半径：此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
阴影举例如下（自行运行观察结果）：
盒子对象阴影测试
图片对象阴影测试
4、CSS3渐变
渐变分为线性渐变和径向渐变。
线性渐变设置的语法如下：
background-image: linear-gradient([
angle：表示渐变的角度，角度数的取值范围是0~365deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。
side-or-corner：通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是 [left,right,top,bottom,center,topright,topleft, bottomleft,bottomright,leftcenter,rightcenter]。注意：IE10只能取[left,top]，Chrome则没有[center,leftcenter,rightcenter]。
color stop：用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个color stop之间的区域为颜色过渡区。
线性渐变举例如下（自行运行观察结果）：
径向渐变设置的语法为：
background-image:radial-gradient(圆心坐标,渐变形状 渐变大小,
color stop, color stop[, color stop]*);
圆心坐标：用于设置放射的圆形坐标，可设置为形如10px 20px的x-offset y-offset，或使用预设值center（默认值）。
渐变形状：circle：圆形；ellipse：椭圆形，默认值。
渐变大小：
closest-side或contain:以距离圆心最近的边的距离作为渐变半径。
closest-corner:以距离圆心最近的角的距离作为渐变半径。
farthest-side:以距离圆心最远的边的距离作为渐变半径。
farthest-corner或cove:以距离圆心最远的角的距离作为渐变半径。
重复渐变：对以上两种渐变方式都是适用的，只需在两个属性前添加“ repeating-”,具体语法格式如下：
/*线性重复渐变*/
repeating-linear-gradient(起始角度,color stop, color stop[,color stop]*)
/*径向重复渐变*/
repeating-radial-gradient(圆心坐标,渐变形状 渐变大小,color stop, color stop[, color stop]*)
径向渐变举例如下（自行运行观察结果）：
5、圆角边框
CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。
CSS3的圆角边框使用border-radius属性来实现，基本语法如下所示：
border-radius: 1-4 length | % / 1-4 length | %;
其中，length或%用于设置对象的圆角形状，不可为负值。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则表示水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果省略 bottom-left，则与top-right 相同，如果省略 bottom-right，则与top-left 相同，如果省略top-right，则与top-left 相同。
border-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，例如：
border-radius: 2em 1em 4em / 0.5em 3em;
等价于以下四种写法：
border-top-left-radius: 2em 0.5em //左上角
border-top-right-radius: 1em 3em //右上角
border-bottom-right-radius: 4em 0.5em //右下角
border-bottom-left-radius: 1em 3em //左下角
圆角边框举例如下（自行运行观察结果）：
6、CSS3过渡
CSS3的过渡就是平滑的改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。比如，一个块元素从方形逐渐变成圆形。
CSS3过渡使用transition属性来定义，其基本语法如下所示：
transition:property duration timing-function delay;
其中，property：应用过渡的CSS属性的名称；
duration：过渡效果花费的时间；
timing-function：过渡效果的时间曲线；
delay：效果开始之前需要等待的时间。
transition也是一个复合属性，由4个属性构成，如下表所示。
| 属性 |
描述 |
取值 |
| transition-property |
规定应用过渡的CSS属性的名称 |
none, all, property |
| transition-duration |
定义过渡效果花费的时间 |
time值，秒或毫秒，默认为0表示无效果 |
| transition-timing-function |
规定过渡效果的时间曲线 |
linear, ease, ease-in, ease-out, ease-in-out等 |
| transition-delay |
规定效果开始之前需要等待的时间 |
time值，默认为0 |
过渡举例如下（自行运行观察效果）：
7、CSS3变形
CSS3动画相关的第二个属性就是transform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D转换。
形状变换可分为旋转、倾斜、缩放及移动几种类型。
transform属性的基本语法如下所示：
transform：none | transform-functions;
默认值为none，适用于内联元素和块元素，表示不进行变形。
transform-functions用于设置变形函数，可以是一个或多个变形函数列表，2D转换的常用函数说明如下表所示。
| 属性 |
描述 |
参数说明 |
| rotate(angel) |
旋转元素。 |
angel是度数值，代表旋转角度。 |
| skew(x-angel,y-angel) |
倾斜元素。 |
angel是度数值，代表倾斜角度。 |
| skewX(angel) |
沿着 x 轴倾斜元素。 |
|
| skewY(angel) |
沿着 y 轴倾斜元素。 |
|
| scale(x，y) |
缩放元素，改变元素的高度和宽度。 |
代表缩放比例，取值包括正数、负数和小数。 |
| scaleX(x) |
改变元素的宽度。 |
|
| scaleY(y) |
改变元素的高度。 |
|
| translate(x,y) |
移动元素对象，基于x和y坐标重新定位元素。 |
元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数。 |
| translateX(x) |
沿着 x 轴移动元素。 |
|
| translateY(y) |
沿着 y 轴移动元素。 |
|
| matrix(n,n,n,n,n,n) |
2D转换矩阵。 |
使用六个值的表示变形，所有变形的本质都是由矩阵完成的。 |
元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置是元素的中心位置。
CSS 变形使用transform-origin属性指定元素变形基于的原点，语法格式具体如下：
transform-origin: x-axis y-axis z-axis;
transform-origin最多接受三个值，分别是x轴（取值为left、center、right、length、%）、y轴（top、center、bottom、length、%）和z轴（length）的偏移量。
注意：transform-origin的三个参数均为可选参数，参数值为0px时可以省略不写。
2D变换案例代码如下（自己运行观察结果）：
3D变形是指某个元素围绕其x轴、y轴、z轴进行旋转，transform-functions的常用于3D转换的函数说明如下表所示。
| 属性 |
描述 |
参数说明 |
| rotate3d(x,y,z,angel) |
定义3D旋转。 |
前三个值用于判断需要旋转的轴，旋转轴的值设置为1，否则为0，angel代表元素旋转的角度。 |
| rotateX(angel) |
沿着x轴3D旋转。 |
|
| rotateY(angel) |
沿着y轴3D旋转。 |
|
| rotateZ(angel) |
沿着z轴3D旋转。 |
|
| scale3d(x,y,z) |
定义3D缩放。 |
代表缩放比例，取值包括正数、负数和小数。 |
| scaleX(x) |
沿着x轴缩放。 |
|
| scaleY(y) |
沿着y轴缩放。 |
|
| scaleZ(z) |
沿着z轴缩放。 |
|
| translate3d(x,y,z) |
定义3D转化。 |
元素移动的数值。 |
| translateX(x) |
仅用于x轴的值。 |
|
| translateY(y) |
仅用于y轴的值。 |
|
| translateY(z) |
仅用于z轴的值。 |
|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
3D转换矩阵。 |
使用16个值的 4x4 矩阵。所有变形的本质都是由矩阵完成的 |
| perspective(n) |
定义3D转换元素的透视视图。 |
一个代表透视深度的数值。 |
perspective属性的透视效果就是用于实现视觉上的3D效果的，接下来看一个典型的案例——立方体（自己运行观察效果）：
8、CSS3动画
前面学习了CSS3的transition和transform属性，虽然二者结合可以实现一些简单的动画效果，但是也有一些难以克服的缺点，例如我们想让动画在多个状态中转换就无法实现了，CSS3中最后一个动画相关的属性是animations，有了它就可以解决这样的问题。
一个完整的CSS animations由两部分构成：
（1）一组定义的动画关键帧 → @keyframes规则
（2）描述该动画的CSS声明 → animation属性
@keyframes规则：
在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。
@keyframes规则的语法格式如下所示：
@keyframes animationname {
keyframes-selector{css-styles;}
}
其中，animationname表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
css-styles定义执行到当前关键帧时对应的动画状态。以上三个属性都是必需品，缺一不可。
animation属性：
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。
animation属性的基本语法如下所示：
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
与transtion类似，animation也是一个复合属性，以上参数分别对应8个子属性。
| 属性 |
描述 |
| animation-name |
规定 @keyframes 动画的名称。 |
| animation- duration |
规定动画完成一个周期所花费时间。 |
| animation-timing-function |
规定动画的速度曲线。 |
| animation-delay |
规定动画开始前的延迟，可选。 |
| animation-iteration-count |
规定动画被播放的次数。 |
| animation-direction |
规定动画是否在下一周期逆向播放。 |
| animation-play-state |
规定动画是否正在运行或暂停。 |
| animation-fill-mode |
规定动画在播放之前或之后，其动画效果是否可见。 |
动画举例（自行运行观察效果）：
9、CSS精灵技术
网页开发者以往喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着很多的小图片，客户端每显示一张图片都会向服务器发送一次请求，图片越多请求次数越多，这样有可能造成图片延迟加载，影响用户体验。随着互联网技术的发展，大家越来越重视网页的加载速度，于是这些小图片被整合到了一起，CSS Sprites出现了。
CSS Sprites被称为CSS精灵技术，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有小图片都包含到一张大图中去，这样，当访问该页面时，只需要载入一次图片。
CSS精灵技术的使用具体如下：
（1）首先要有一张精灵图，它是许多小图片的合并，由于精灵图要求不高于200KB，所以这种合并适合一般小图标素材。
（2）创建一个容器（如
（3）利用CSS的"background-image"、"background-repeat"、"background-position"组合进行背景定位，将一张大图片中的某个部分显示到网页的固定位置。
精灵技术应用举例如下（自行运行观察效果）：
5.4 HTML5表单应用
首先需要理解表单的概念，表单是网页上用来收集用户信息的区域，由文本域、复选框、单选框、菜单、文件地址域、按钮等表单元素组成。最常见的表单应用有搜索引擎页面、用户登录页面、用户注册页面等。
在上面的语法中，name属性用来区分一个网页中的多个表单；action属性用于指定接收并处理表单数据的服务器url地址；method属性用于设置表单数据的提交方式，其取值可以为get或post，默认为get。
简单表单举例：
HTML5新增的表单属性：
（1）autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能，所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。
autocomplete属性有2个值，具体如下：
• true：表单有自动完成功能
• false：表单无自动完成功能
（2）novalidate属性
novalidate属性用于指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。
演示autocomplete属性的具体应用案例见上例。
HTML5 标签
表单中最为核心的就是标签，使用标签可以在表单中定义文本输入框、单选按钮、复选框、重置按钮等。其基本语法格式如下：
在上面语法中，type属性为其最基本的属性，取值有多种，用来指定不同的控件类型，其中email、url、range、number、Date pickers、search、color、tel为新增属性值；除type属性外，还可以定义很多其他属性，常用属性如name、value、size等。
演示标签的具体使用的案例如下：
其它表单标签
除了标签外，HTML还有其他常用表单标签例如