一、HTML5基础
1.www（万维网）
一种建立在internet上的全球性的、交互性的、多平台的、分布的信息资源网络，采用HTML语言描述超文本文件。
URL（统一资源定位器）
HTTP（超文本传输协议）
HTML（超文本标记语言）由浏览器解释执行，无需编译 扩展名.html或.htm
2.Web标准
- 结构化标准语言
- 表现标准语言
- 行为标准
3.<!doctype html>
<!doctype html>
<html>
<head>
<meat charset="utf-8"或者"gb2312">
<title>
</title>
</head>
<body>
.....
</body>
</html>4.doctype标签
用于说明使用的html是什么版本
<!doctype html>
5. html标签
用于表示该文件是以超文本标记语言（HTML）编写的
<html>
文件的全部内容
</html>
6.head标签
表示网页头部的标签，不放置网页的任何内容，而是放置关于HTML文件的信息，包含文件的标题、编码方式、URL等信息。
不属于HTML文件的主体。
不需要提供相关信息时，可省略head标签。
<head>
............
</head>
7.meta标签
表示所使用的字符编码语言，utf-8、gb2312表示中文字符，包含在head标签里
<head>
<meat charset="utf-8"或者"gb2312"></head>
8.title标签
表示HTML5文档的标题
<title>
</title>
9.body标签
包含所有文档的主体内容，显示在屏幕上
<body>
body标签里的文本
<!--body标签里面的的文本--> 注释标签
</body>
10.标题标签
<h1> <h2> <h3> <h4> <h5> <h6> 字号逐渐减小
align="对齐方式" 设置在标题标记后面
| 属性 | 说明 |
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
<body>
<h1 align="left">
.....
</h1>
</body>
11.段落标签
表示以段落的方式组织内容，可以为文字、图片、表格等之间留一个空白行
可以使用成对的，也可以使用单独的
| 属性 | 说明 |
| align | 水平对齐方式。可选值：right、left、center |
| class | 设置css类 |
| dir | 文字方向 |
| style | 设置内嵌样式 |
| title | 设置工具提示 |
<body>
<p align="center" style="color:#ff0000" title="看看工具提示！">
.......
</p>
......<p>
</body>
12.换行标签
不另起一段换行，一个<br>代表一个换行，可多个<br>多次换行
一行文本<br>另起一行
<body>
龚自珍<br/><br/>
九州生气恃风雷，<br/>
</body>
13.水平标签
在浏览器上显示一条细线以分隔两个区域
<hr 属性="属性值">
空一个字 放文字前
<hr width="水平线宽度 (百分比或像素值)" height="水平线高度（像素值)" size="水平线粗细" color="颜色代码(#字母+数字(6位)、单词、RGB)" aligh="对齐方式(left、right、center)" noshade="noshade(去掉水平线阴影)"/>
14.强调标签
粗体文本
<b>.....</b>
<strong>.....</strong>
15.图片标签
<img src="路径" alt="提示信息" align="对齐方式(相对于文字本身)" border="边框大小" width="宽度" height="高度"/>
alt描述该图片的文字
align属性
| 偏上方 | top |
| 中间 | middle |
| 底端 | bottom |
| 左 | left |
| 右 | right |
16 .超链接标签
<a 属性="属性值">链接显示文本</a>
| 属性 | 说明 |
| href | 链接的目标URL |
| target | 在何处打开目标URL。仅在href属性存在时使用 |
16.1相对路径用于访问同一个目录的文件 <a href="a.html">相对路径的超链接</a>
16.2如果相对路径中包含目录，使用"../"访问源文件所在目录的上一级目录，"../../"访问源文件所在目录的上上级目录，以此类推 <a href="../a.html">相对路径的超链接</a>
16.3访问下级目录的文件直接编写下级目录文件的路径即可。<a href="html/a.html">相对路径的超链接</a>
16.4绝对路径 <a href="http://www.qq.com">绝对路径的超链接</a>
二、排列页面内容
1.音频标签
<audio src="" controls="" autoplay="" width="" height="">
<source src="music.org"/>
<source src="music.mp3"/>
<source src="music.wav"/>
</audio>
插入3个source标签可以更好的解决浏览器和音频格式兼容性问题
audio属性
| 属性 | 值 | 描述 |
| autoplay | true/false | 如true，则音频就绪后马上播放 |
| controls | true/false | 如true，则向用户显示控件，如播放按钮 |
| end | 数值 | 定义何处停止播放，默认放完 |
| loopstart | 数值 | 定义循环播放的开始位置 |
| loopend | 数值 | 定义循环播放的停止位置 |
| playcount | 数值 | 定义音频片段播放多少次 |
| str | url | 路径 |
| start | 数值 | 定义开始播放的位置 |
2.视频标签
<video src="" controls="" autoplay="" width="" height="" poster="图片地址">
<source src=""/>
<source src=""/>
<source src=""/>
</video>
video属性
| 属性 | 值 | 描述 |
| autoplay | true/false | 如true，则视频就绪后马上播放 |
| str | url | 路径 |
| controls | true/false | 如true，则向用户显示控件，如播放按钮 |
| perload | none/metadata/auto | 是否预加载，none不预加载，metadata只预加载元数据，auto预加载全部 |
| loop | loop | 是否循环播放 |
| poster | url | 封面 |
| width | 数值 | 视频宽度 |
| height | 数值 | 视频高度 |
source标签常用属性
| src | 指定媒体文件位置 |
| type | 说明媒体文件的类型，帮助浏览器判断是否支持此类媒体文件格式 |
| media | 说明媒体在何种媒介中使用，默认值为所有媒介 |
3.列表标签
3.1无序列表
<ul type="disc(实心圆)或circle(空心圆)或square(正方形)">
<li>.....</li>
<li>.....</li>
</ul>
3.2有序列表
<ol type="1(数字)或a(小写英文)或A(大写英文)或i(小写罗马)或I(大写罗马)" start="序号起始值">
<li>.....</li>
<li>.....</li>
</ol>
3.3定义列表
用于解释名词 图文混排
<dl>
<dt>名词
<dd>解释
</dl>
4.div标签
<div id="">
</div>
5.span标签
<span>
文本
</span>
6.表格标签
<table>.....</table> 表格标签 border属性设置边框宽度
<tr>....</tr> 行标签
<td>....</td> 单元格标签
<body>
<h4>......</h4>
<table border="1">
<tr>
<td>.....</td>
<td>.....</td>
</tr>
<tr>
<td>.....</td>
<td>.....</td>
</tr>
</table>
</body>
6.1不规则表格
6.1.1跨列（横向合并）colspan
<td colspan="所跨的列数">
单元格内容
</td>
6.1.2跨行（纵向合并）rowspan
<td rowspan="所跨的行数">
单元格内容
</td>
6.2其他标签 table标签内
| 表格标题标签caption | 用于描述整个表格的标题 <caption>...</caption> |
| thead | 表头 <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> |
| tbody | 表中 <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> |
| tfoot | 表底 <tfoot> <tr> <td>...</td> <td>...</td> </tr> </tfoot> |
7.表格的美化和布局
<table width="宽度" height="高度" border="边框宽度" bgcolor="背景颜色" bordercolor="边框颜色" background="背景图片地址" align="对齐方式" cellspacing="单元格间距" cellpadding="单元格填充">
align对齐方式
| right | 右对齐 |
| center | 居中对齐 |
| left | 左对齐 |
cellspacing单元格间距:
单元格与单元格之间的距离
消除="0"
cellpadding单元格填充：
单元格中内容与单元格边框之间的距离
消除="0"
三、表单
1.表单标签
<form name="表单名字" action="URL" method="get/post">
......
</form>
action提交地址
method提交方式 post更安全适合大量数据
2.表单元素
<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" readonly="readonly(只读)" checked="是否选中(选中checked，不选中不写)"/>
| 表单控件标签写法 | 说明 |
| <input type="text"> | 单行文本输入框 |
| <input type="submit"> | 将表单中的信息提交给表单中action属性所指向的地址 |
| <input type="checkbox"> | 复选框 |
| <input type="radio"> | 单选框 |
| <input type="password"> | 密码输入框（输入的文字用*表示） |
| <input type="select"> | 下拉框 |
| <input type="textarea"> | 多行文本输入框 |
3.输入框
<body>
<form name="" action="" method="post">
姓名:<input type="text" name="" value="jack" readonly="readonly"/>
<br/>
邮箱:<input type="text" name="" value="xxx@xxx" />
<br/>
</form>
</body>
4.密码框
<input type="password" name="" />
5.多行文本域
<textarea name="指定名称" cols="字符数" rows="行数">
文本域内容
</textarea>
6.按钮
提交按钮
<input type="submit" name="名称" value="提交按钮显示值" />
重置按钮
<input type="reset" name="名称" value="提交按钮显示值" />
普通按钮
<input type="button" name="名称" value="提交按钮显示值" />
图片按钮
<input type="image" name="imgsubmit" src="xx" alt="提交"/>
或
<input type="reset" style="background:url();border:none"/>
7.单选按钮 radio
请选择你喜欢的水果：
苹果
橘子
芒果
提交按钮
<body>
请选择你喜欢的水果：
<br>
<form name="" action="" method="post">
<input type="radio" name="fruit" value="apple"/>苹果
<br/>
<input type="radio" name="fruit" value="orange" checked(默认选橘子)/>橘子
<br/>
<input type="radio" name="fruit" value="mango"/>芒果
<br/>
<input type="submit" name="名称" value="提交" />
</form>
</body>
8.复选框 checkbox
<input type="checkbox" name="fruit" value="apple"/>苹果
<input type="checkbox" name="fruit" value="orange" checked(默认选橘子)/>橘子
9. 下拉框
<select name="指定列表名称" size="行数">
<option value="可选择的值" selected="selected">显示项内容</option>
<option value="可选择的值" >显示项内容</option>
.....
</select>
10.必填验证 required
<input type="text" name="uer-name" required="required"/>
11.类型匹配验证
type属性
| 属性 | 作用 |
| 验证值是否符合email格式要求 | |
| url | 验证值是否符合url格式要求 |
| number | 验证是否为数字，可配合min、max、step属性进行数值限定 |
| range | 验证值是否定在指定的范围内的数字，可配合min、max、step属性进行数值限定，显示为滑动条 |
| date | 用于选取年、月、日 |
step属性 ：
控制input标签中的数值增加或减少时的步长，例step=2，则为2的倍数
12.自定义错误消息
<input type="number" max="60" min="0" oninvalid="setCustomValidity('年龄必须在0至60之间！')" οninput="setCustomValidity('')" required>
四、CSS3基础
1.CSS3基本语法
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
....
}
</style>
当css代码较多时，可以使用/*......*/添加必要的注释
2.样式表——外部样式表 CSS文件
<head>
<link rel="stylesheet" type="text/css" href="...css">
</head>
3.导入样式表
<head>
<style type="text/css">
@import"css/...css";
</style>
</head>
4.内嵌样式表
<head>
<style type="text/css">
选择符{样式属性：属性值；
....
}
选择符{样式属性：属性值；
....
}
</style>
</head>
5.行内样式表 写标签里
<标签名 style="样式属性：属性值；">
......
</标签名>
6.类选择器 （CSS基本选择器）
定义类样式
<style type="text/css">
.类名{
属性1：属性值1；
属性2：属性值2；
}
</style>
应用类样式
<标签名 class="类名">标签内容</标签名>
7.标签选择器 （CSS基本选择器）
<style type="text/css">
标签名{
属性1：属性值1；
属性2：属性值2；
}
</style>
8.ID选择器 （CSS基本选择器）
<style type="text/css">
#ID标识名{
属性1：属性值1；
属性2：属性值2；
}
</style>
9.组合选择器 （CSS扩展选择器）
应用于多个选择符 逗号隔开
例：设置所有p标签、class属性值为red的标签以及id为header的标签样式
p,.red,#header{
color:red;
font-size:12px;
}
10.包含选择器 （CSS扩展选择器）
更灵活、更精确
例：选择id为header标签下的ul标签下的li标签下的a标签
<div id="header">
<ul class="menu">
<li><a href="#">家用电器</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">日用百货</a></li>
</ul>
</div>
#header ul li a{
color:blue;
text-decoration:none;取消超链接下划线
}
11.交集选择器 （CSS扩展选择器）
第一个必须是标签选择器，第二个必须是类选择器或id选择器
例:选中p标签中class属性值为red的所有元素
p.red(不能有空格){
color:red;
font-size:23px;
}
12.伪类选择器 （CSS扩展选择器）
标签名：伪类名{
属性：属性值；
}
超链接伪类表
| 伪类 | 含义 | 应用场景 |
| a:link | 未单击访问时的超链接样式 | 常用，超链接主样式 |
| a:visited | 单击访问后的超链接样式 | 区分是否已被访问 |
| a:hover | 鼠标悬浮在超链接上的样式 | 常用，实现动态效果 |
| a:active | 鼠标单击未释放的超链接样式 | 少用，通常与link一致 |
13.CSS继承性
所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起，但另行更改除外
css上边界属性值是不会继承的
14.CSS3层叠性和优先级
处理原则：
a.不发生冲突，元素将应用所有选择器定义的样式
b.发生冲突，css按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式
CSS规定选择器的优先级从高到低：
行内样式——ID样式——类样式——标签样式
CSS规定选择符的优先级从高到低：
id选择符——类选择符——元素选择符
CSS的定义优先级依照从高到低：
内嵌样式——内部样式——链入外部样式表和内部样式表之间则根据定义先后顺序评定
五、常用的样式属性
1.字体属性
| 属性 | 含义 | |
| font | 设置字体的所有样式属性 | 顺序：字体粗细、大小、字体类型 font:bold 12px 字体 |
| font-family | 定义字体类型 | |
| font-size | 定义字体大小 | |
| font-weight | 定义字体粗细 | font-weight:bold(粗体)、bolder(特粗体)、lighter(细体) font-weight:number：100/200/300 |
| color | 字体颜色 |
| 字间距 | letter-spacing:20px; |
| 单词间距 | word-spacing:20px; |
| 首行缩进 | text-index:2em;倍数 |
| 英文大小写 | text-transform:capitalize;(开头大写) uppercase;(只有大写) lowercase;(只有小写) |
| 字体倾斜 | font-style:normal(常规)oblique(字体倾斜)italic(倾斜) |
| 文字竖排排版(必须设置浮动和高度) | font:left; height:300px; writing-mode:vertical-lr(左到右)vertical-rl(右到左) |
2.文本属性
| 属性 | 含义 | 应用 |
| line-height | 设置行高（行间距）常取25px、28px | 布局多行文本 |
| text-align | 对齐方式left、right、center | 各种元素对齐 |
| letter-spacing | 字符间距常取3px、8px | 加大字符间间隔 |
| text-decoration | 文本修饰，underline(下划线)、none(无划线)、line-throught(中划线) |
3.边距
元素与元素之间的间距
3.1消除页面边距
*{
margin:0px;
padding:0px;
}3.2margin
复合属性：设置1个值——应用于4个边距
设置2个值——表示上下，左右边距
设置3个值——表示上，左右，下边距
设置4个值——表示上，右，下，左边距
| margin-top | 上 |
| margin-bottom | 下 |
| margin-left | 左 |
| margin-right | 右 |
4.填充
元素内容与边框之间的距离——内边距
复合属性：设置1个值——应用于4个边距
设置2个值——表示上下，左右边距
设置3个值——表示上，左右，下边距
设置4个值——表示上，右，下，左边距
| padding-top | 上 |
| padding-bottom | 下 |
| padding-left | 左 |
| padding-right | 右 |
5.边框属性
5.1border属性
| 属性 | 说明 |
| border-style | 边框样式，none无边框，solid实线，dashed虚线 |
| border-width | 宽度 |
| border-color | 颜色 |
| boder | 复合属性，设置边框宽度、样式、颜色 |
单独设置某个方向上的边框属性：border-top 上
border-bottom 下
border-left 左
border-right 右
5.2border-radius属性——圆角边框
| 语法 | 说明 |
| border-radius:参数1 | 四个角 border-radius:5px; |
| border-radius:参数1、2 | 左上角右下角、左下角右上角 |
| border-radius:参数1、2、3 | 左上角、左下角右上角、右下角 |
| border-radius:参数1、2、3、4 | 左上角、右上角、右下角、左下角 |
6.列表属性
| 属性 | 说明 |
| list-style-type | 设置列表项的符号，none无、disc实心圆、square实心方块、circle空心圆 |
| list-style-image | 设置图像作为列表项目符号，值为url，list-style-image:url(); |
| list-style-position | 设置项目符号在列表项的位置，值inside里面、outside外面默认 |
| list-style | 复合属性，顺序：list-style-type、list-style-position、list-style-image |
6.1文字居中
条件：height=line-height
例：ul li{
height:30px;
line-height:30px;
}
6.2清除默认样式
margin:0px;
padding:0px;
border:0px;
list-style-type:none;
6.3超出的其他大图片隐藏 overflow:hidden;
6.4列表排列变横排 float:left;左浮动
6.5小图片外距右边的间隙 margin-right:10px;
6.6居中 margin:0px auto;
6.7显示效果为隐藏 display:none;
6.8显示效果 display:block;
6.9取消序号 list-style:none;
六、背景与阴影
1.背景属性
| 属性 | 说明 |
| background-color | 设置元素的背景颜色 |
| background-image | 设置元素的背景图片 background-image:url() |
| background-repeat | 设置元素的背景图片重复方式 repeat(默认值，表示背景图像在纵向和横向上平铺)、no-repeat(不平铺)、repeat-x(只在水平方向上平铺)、repeat-y(只在垂直方向上平铺) |
| background-position | 设置元素的背景图片位置 |
| background-size | 设置元素的背景图片大小 |
| background | 复合属性 |
2.背景图片定位
background-position属性——默认左上角
| 取值 | 说明 |
| 关键字 | 水平方向：left/center/right 垂直方向：top/center/bottom |
| 百分比 | 水平方向：0%左50%中100%右 垂直方向：0%上50%中100%下 |
| 像素值 | 正值：水平向右、垂直向下 负值：水平向左、垂直向上 |
注：在使用background-position属性的过程中，关键顺序不重要，left bottom和bottom left意义相同。若只设置一个值时，第一个值代表水平偏移位置，第二个值默认居中
3.背景渐变
3.1线性渐变
background:linear-gradient(<angle角度>/<direction方向的关键值>,<color-stop>,<color-stop>....);
3.1.1注：
1.<angle角度>
通过角度来确定渐变方向。角度是指垂直线和渐变线之间的角度，顺时针方向计算。如0deg创建一个从下到上的渐变，90deg创建一个从左到右的渐变
2.<direction方向的关键值>
通过代表方向的关键词来确定渐变方向。如to top、to right、to bottom和to left对应的角度值为0deg、90deg、180deg和270deg
3.<color-stop>
用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变，在设置终止色时，可以同时设置终止位置，该位置可以被指定为线长度的百分比或一个绝对长度。如果指定位置使用百分比，那么0%表示起点，100%表示终点
3.1.2图片透明度渐变
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1)),url(images/....);
3.1.3重复线性渐变
repeating-linear-gradient();
3.2径向渐变
background:radial-gradient(<shape>/<size> at <position>,<color-stop>,<corlor-stop>....);
3.2.1注：
1.<shape>
定义径向渐变形状。circle(圆形),ellipse(椭圆形)
2.<position>
定义径向渐变的圆心位置，默认center
3.<size>
设置渐变半径大小，设置数值、百分比、关键字
关键字有closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边;
dosest-corner指定径向渐变的半径长度从圆心到离圆心最近的角;
farthest-side指定圆心到离圆心最远的边;
farthest-corner默认值，指定圆心到离圆心最远的角
4.阴影属性
4.1文字阴影
text-shadow:h-shadow v-shadow blur color;
| 参数 | 说明 |
| h-shadow | 必须，阴影的水平距离 右下+ |
| v-shadow | 必须，阴影的垂直距离 左上- |
| blur | 可选，模糊半径 |
| color | 可选，颜色 |
4.2盒子阴影
box-shadow:h-shadow v-shadow blur spread color;
| 参数 | 说明 |
| h-shadow | 必须，阴影的水平距离 右下+ |
| v-shadow | 必须，阴影的垂直距离 左上- |
| blur | 可选，模糊半径 |
| spread | 可选，阴影大小 |
| color | 可选，颜色 |
七、盒子模型
1.盒子大小
实际大小：内容content+填充padding+边框border
空间大小：内容content+填充padding+边框border+边界margin
盒子宽度：内容宽度+左边距+右边距+左边框宽度+右边框宽度
盒子高度：内容高度+上边距+下边距+上边框宽度+下边框宽度
盒子实际占据宽度：盒子实际宽度+左外边距+右外边距
盒子实际占据高度：盒子实际高度+上外边距+上外边距
2.盒子之间的关系
2.1垂直盒子
两个盒子之间的垂直距离是两者中的较大值
2.2水平盒子
两个盒子之间的水平距离是两者之和
2.3重叠盒子
margin设置为负数，元素向相反方向移动，甚至覆盖在另外的元素上
3.标准文档流
3.1常见的块状标签
标题（h1—h6） 段落（<p>）水平线（<hr/>）列表（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
表格（<table>）层（<div>）表单（<form>）
3.2常见行内标签
图像（<img>）范围（<span>）换行（<br/>）超链接（<a>）
3.3行内元素与块状元素的区别
3.3.1排列方式
行内元素从左到右，多个显示在同一行
块状元素从上到下，各自占据一行
3.3.2内嵌元素
行内元素不能包含块状元素，只能包含文本或其他行内元素
块状元素可以包含行内元素和块状元素
3.3.3属性设置
行内元素：width、height、padding-top、margin-top、padding-bottom、margin-bottom均设置无效，但可设置line-height
块状元素:所有样式均有效
4.display属性
控制是否存在
display:none/block;
4.1隐藏div 不占空间
<div style="display:none;"></div>
4.2显示已隐藏的div
<div style="display:block;"></div>
5.visibility属性
控制是否显示，仍存在
visibility:hidden/visible;
5.1真正隐藏div
占空间
<div style="visibility:hidden;"></div>
5.2显示div
<div style="visibility:visible;"></div>
6.float属性
移动到父元素左侧/右侧
float:none/left/right;
7.浮动塌陷负作用
背景不能显示、边框不能撑开、margin、padding设置值不能正确显示
8.清除浮动塌陷
8.1对父级设置合适css高度
8.2clear:both清除浮动塌陷
.div{
clear:both;
}
8.3父级div定义overflow:hidden
对父级css选择器加overflow:hidden；
9.盒子定位
9.1静态定位 默认
static
9.2相对定位
从本来应该显示的位置移动到一个相对位置，原位置移动
position:relative;
9.3固定定位
是生成绝对定位的元素，相对于浏览器窗口进行定位
position:fixed;
9.4绝对定位
将指定的标签位置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上，父容器需要有position:relative;
position:relative;
10.z-index属性
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
z-index:-1;
八、网页布局与规划
1.流式布局
从左到右、从上到下排列
2.瀑布流布局
<body>
<script src="masonry.pkgd.min,js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var msnry=new Masonry('#grid',{
itemSelector:'.grid-item',
columnWidth:zoo});
</script>
</body>