html5+CSS3总结
一、html5概述
html5是构建web内容的一种语言描述方式，适用于描述网页文档，被认为是互联网的核心技术之一。
二、html5基础
1.html5文档基本格式：包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1）<!DOCTYPE>文档类型声明：<!DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或XHTML标准规范。只有在开头处使用<!DOCTYPE>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。
2）<html>根标记：位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
3）<head>头部标记：<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。
注：一个html文档只能含有一对<head>标记
4）<body>主体标记：<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
注：一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
2.html5语法
1）标签不区分大小写。
2）允许属性值不使用引号。
3）允许部分属性值的属性省略。
3.html5标记
1）双标记：<标记名>内容</标记名>
2）单标记：</标记名>
3）注释标记：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。<!--注释语句-->
4.标记的属性（使用HTML制作网页时，如果想让HTML标记提供更多的信息,仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用HTML标记的属性加以设置)
基本语法格式：<标记名 属性1="属性值1"属性2=“属性值2”…>内容</标记名>
注：属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。
5.html5文档头部相关标记
1）<title></title>标记
2）<meta/>标记
3）<link>标记
4）<style></style>标记
6.标题和段落标记
1）标题标记：从<h1>到<h6>重要性递减
2）段落标记：<p>
3）水平线标记：<hr/>
4）换行标记：<br/>
7.相对路径和绝对路径
1）相对路径：不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置
分为三种：•图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
•图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
•图像文件位于html文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级，则需要使用 “…/…/”，以此类推，如<img src="../logo.gif" />。
2）绝对路径：一般指带有盘符的路径（网页中不推荐使用相对路径）。
8.常用图像格式
1）GIF格式：支持动画，常常用于Logo、小图标及其他色彩相对单一的图像。
2）PNG格式：体积更小，支持alpha透明（全透明，半透明，全不透明），但不支持动画。
3）JPG格式：JPG所能显示的颜色比GIF和PNG要多的多，但是JPG是一种有损压缩的图像格式。
9.图像标记
基本语法格式：<img src="图像URL"/>
src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。
图像属性：a.宽度width、高度height b.边框属性border c.边距属性vspace和hspace
10.创建超链接
基本语法格式：
<a>标记：行内标记，用于定义超链接。
•href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。
•target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。
11.锚点链接（用于快速定位到目标内容）
三、html5页面元素及属性
1.列表元素
1）ul元素（无序列表）
基本语法格式：
2）ol元素（有序列表）
基本语法格式：
3）dl元素（定义列表：用于对术语和名词进行解释和描述）
2.结构元素
1）header元素：具有引导和导航作用，该元素可以包含所有通常放在页面头部的内容。
2）nav元素：用于定义导航链接。
3）article元素：通常用于对多个section元素进行划分。
4）aside元素：用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
5）section元素：用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。
6）footer元素：用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。
3.页面交互元素
1）details和summar元素：details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。
2）progress元素：用于表示一个任务的完成进度。
两个常用属性值：•value：已经完成的工作量 max：总共有多少工作量
3）meter元素：用于表示指定范围内的数值。
4.文本层次语义元素
1）time元素：用于定义时间或日期
两个属性：•datetime：用于定义相应的时间或日期。取值为具体时间或具体日期，不定义该属性时，由元素的内容给定日期 / 时间。
pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。
2）mark元素：用于在文本中高显某些字符。
3）cite元素：用于对文档参考文献的引用说明。
5.全局元素
1）draggable属性
2）hidden属性
3）spellcheck属性
4）contenteditable属性
四、CSS3入门
1.CSS概述：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式，使页面更美观。
2.CSS样式规则（选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}）
注：•CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
•多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。
•如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
•在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
•在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。
3.引入CSS样式表
1）行内式（内联样式）
基本语法格式：
2）内嵌式：将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。
基本语法格式：
3）链入式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中。
基本语法格式：
•href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
•type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
•rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
4.字体样式属性
1）font-size：字号大小
2）font-family：字体
3）font-weight：字体粗细
4）font-style：字体风格
属性值：•normal：默认值，浏览器会显示标准的字体样式。
•italic：浏览器会显示斜体的字体样式。
•oblique：浏览器会显示倾斜的字体样式。
5）font：综合设置字体样式
5.文本外观属性
1）color：文本颜色
•预定义的颜色值，如red，green，blue等。
•十六进制，如#FF0000，#FF6600，#29D794等。
•RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
2）letter-spacing：字间距
3）word-spacing：单词间距
4）line-height：行间距
5）text-transform：文本转换
属性值：•none：不转换（默认值）。
•capitalize：首字母大写。
•uppercase：全部字符转换为大写。
•lowercase：全部字符转换为小写。
6）text-decoration：文本装饰
属性值：•none：没有装饰（正常文本默认值）。
•underline：下划线。
•overline：上划线。
•line-through：删除线。
7）text-align：水平对齐方式
属性值：•left：左对齐（默认值） •right：右对齐 •center：居中对齐
8）text-indent：首行缩进
9）white-space：空白符处理
10）text-shadow：阴影效果
11）text-overflow： 标示对象内溢出文本
6.CSS层叠性和继承性
1）层叠性（css样式的叠加）
2）继承性：书写CSS样式表时，子标记会继承父标记的某些样式。
注：边框属性、外边距属性、内边距属性、背景属性、定位属性、布局属性、元素宽高属性不具有继承性。
7.CSS优先级
注：标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。因此文本显示为蓝色。
五、CSS3选择器
1.基础选择器
1）标记选择器
基本语法格式：
2）类选择器
基本语法格式：
3）id选择器
基本语法格式：
4）通配符选择器
基本语法格式：
5）标签指定式选择器：由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
6）后代选择器
7）并集选择器
2.关系选择器
1）子代选择器：主要用来选择某个元素的第一级子元素。
例：h1>strong（选择只作为h1 元素子元素的strong 元素）
2）兄弟选择器：用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
3.伪元素选择器
1）:before选择器：用于在被选元素的内容前面插入内容。
基本语法格式：
2）:after选择器：用于在某个元素之后插入一些内容。
六、盒子模型
1.盒子模型概述
1）盒子模型：把HTML页面中的元素看作是一个矩形的盒子，每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
2）
3）盒子的宽和高（width和height）
注：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。
2.盒子模型相关属性
1）边框属性：
2）边距属性：内边距padding、外边距margin
3）box-shadow属性
4）box-sizing属性
3.背景属性
1）背景颜色：background-color属性
2）背景图像：background-image属性
3）背景与图片不透明度设置
a.RGBA模式
b.opacity属性
4.设置背景图像平铺（background-repeat属性）
•repeat：沿水平和竖直两个方向平铺（默认值）
•no-repeat：不平铺（图像位于元素的左上角，只显示一个）
•repeat-x：只沿水平方向平铺
•repeat-y：只沿竖直方向平铺
5.CSS3渐变属性
1）线性渐变
基本语法格式：
2）径向渐变
基本语法格式：
3）重复渐变：重复线性渐变和重复径向渐变