一、概述
1、HTML 指的是超文本标记语言: HyperText Markup Language
2、HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
（1）HTML 标签是由尖括号包围的关键词，比如 <html>
（2）HTML 标签通常是成对出现的，比如 <b> 和 </b>
（3）标签对中的第一个标签是开始标签，第二个标签是结束标签
（4）开始和结束标签也被称为开放标签和闭合标签
二、HTML基本标签
1、标题标签（h1-h6依次变小）
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>2、段落标签<p></p>
<p>这是我的第一个网页</p>3、换行标签
<br/>是一个单标签
<br/>
<nobr></nobr>
<wbr></wbr>
4、水平线标签<hr/> 是个单标签
<hr/>5、常用的文本格式标签
| 标签 | 标签说明 |
| <b></b>或者<strong></strong> | 加粗 |
| <em></em>或者<i></i> | 斜体 |
| <u></u> | 下划线 |
| <del></del> | 删除线 |
| <sup></sup> | 上标 |
| <sub></sub> | 下标 |
| <pre> | 保留空格或换行 |
| <address></address> | 地址文字 |
6、实体字符的显示
| 显示 | 代码 | 说明 |
| | 显示一个空格 | |
| < | < | 小于 |
| > | >； | 大于 |
| & | &； | &符号 |
| " | " | 双引号 |
| © | ©； | ©符号 |
| ® | ®； | ®符号 |
| × | × | 乘号 |
| ÷ | ÷ | 除号 |
7、图像标签
<img src="图片路径"/>
8、超链接
基本语法：
<a href="url" name="" title="" target="">超链接标题</a>语法说明：
（1）href （href-Hypertext reference）：链接指向的目标文件。
（2）title：指向链接的提示信息。
（3）target：指定打开的目标窗口 。 有5 种取值：
_parent -上一级窗口；
_blank-新窗口；
_self - 同一窗口，默认值；
_top - 整个窗口打开；
framename-框架或浮动框架名
超链接路径
（1）绝对路径：指文件的完整路径
（2）相对路径：指相对于当前文件的路径
（3）根路径：指从网站的最底层开始起
锚链接：跳转到当前页面的另一部分
9、列表
（1）无序列表
基本语法：
<ul type=“disc | circle | square">
<li type="">项目名称</li>
<li type="">项目名称</li>
<li type="">项目名称</li>
…
</ul>
符号： disc - ●； circle -○； square -■
（2）有序列表
基本语法：
<ol type= " 1| A | a | I | i start= " 2">
<li type="" value="n">项目名称</li>
<li type="" value="n">项目名称</li>
<li type="" value="n">项目名称</li>
…
</ol> （3）定义列表
基本语法：
<dl>
<dt>项目1</dt>
<dd>说明1<dd>
<dd>说明2<dd>
…
</dl>
< dt>< /dt>用来创建列表中的项目
<dd></dd>用来描述列表中的项目
10、表格标签
基本语法：
<table>
<tr>
<td>…</td>
…
</tr>
<tr>
<td>…</td>
…
</tr>
…
</table>
（1）表格标题
<caption>…</caption>（2）表格表头
指表格的第一行，文字样式为居中、加粗显示，通过<th>标签实现。
<table>
<tr>
<th>…</th>
…
</tr>
<tr>
<td>…</td>
…
</tr>
…
</table>
（3）表格宽度和高度
<table width=” ” height=” ”>（4）表格边框
<table border=” ”>（5）表格单元格间距：单元格和单元格之间的间距
<table cellspacing=" "> （6）表格单元格边距：单元格中的内容与单元格边框的距离
<table cellpadding=" ">
（7）表格水平对齐：居左、居中、 居右
<table align=” ”>
（8）行内容水平对齐
<tr align=” ”>…</tr>
（9）行内容垂直对齐
<tr valign=” ”>…</tr>
（10）单元格跨行（纵向合并）
<td rowspan=” ”>…</td>
（11）单元格跨列（横向合并）
<td colspan=" ">…</td>
11、表单标签
（1）基本语法：
<form name="…" action=".." method="…">
<input>
….
<select>…..</select>
…
<textarea>…</textarea>
</form>
（2）表单Form语法说明：
① name：给定表单名称，表单命名之后就可以用脚本语言(如JavaScript或VBScript)对它进行控制。
② action:指定处理表单信息的服务器端应用程序。
③ method :method属性用于指定表单处理表单数据方法，method的值可以为get或是post，默认方式是get。
（3）<input>
基本语法：
<form>
<input name=" " type=" ">
</form>语法说明：
① <input>标记主要有六个属性，type，name，size，value，maxlength，check。其中name和type是必选的两个属性；
② Name:属性的值是相应程序中的变量名。 在不同的输入方式下，<input>标记的格式略有不同，其他五种属性因type类型的不同，其含义也不同；
③ type主要有九种类型：text（文本），submit（提交），reset（重置），password（密码），checkbox（多选），radio（单选），image（图像），hidden（隐藏），file（文件）。
（4）单行文本输入框
<input type="text" >（5）密码框
<input type="password " >
（6）提交和重置
<input type="submit" value="提交">
<input type="reset" value="重置">
（7）多选框
<input type=" checkbox " value= " ">
checked属性用于指定该选项在初始时是否被选中。
（8）单选框
<input type=" radio " >
① 单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有 属性的name都应取相同的值；
② 不同的选项其属性value的值应是不同的；
③ checked属性用于指定该选项在初始时是被选中的。
（9）图像按钮
<input type="image" src="url">
（10）文件选择输入框
<input type="file" > （11）隐藏框
<input type="hidden" >（12）多行文本输入框
<textarea cols="" rows="" wrap="">
</textarea>① name：用于指定文本输入框的名字。
② rows：设置多行文本输入框的行数。
③ cols：设置多行文本输入框的列数。
④ wrap：默认值是文本自动换行，当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现。
（13）下拉列表框
<form>
<select name=" " size=" ">
<options value=" ">
…
<options value=" ">
</select>
</form>
（14）<label> 标签
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
12、表单验证
（1）提示：placeholder
（2）不能为空：required
（3）正则表达式
用符号来描述书写规则:/ 中间写正则表达式 /
^ ：匹配开头，$：匹配结尾 ； /^ve/以ve开头的 /ve$/以ve结尾
\d：一个任意的数字
\w：一个任意的数字或字母
\s：任意字符串
{n}：把左边的表达式重复n遍
{m,n}：把左边的表达式重复至少m遍，至多n遍
{m, }：把左边的表达式重复至少m遍，,至多不限
+：左边的表达式，至少出现一次，至多不限，相当于{1，}
*：左边的表达式，至少出现0次，至多不限，相当于{0，}
?：左边的表达式，至少出现0次，至多出现1次，相当于{0，1}
[a,b,c]：只能取方括号中内容之一
[a-z]或[1-9]：在范围中取其一
|：代表或者； （）：优先级； \：转义--“\( \)”这个才是要出现的小括号，需要转义
\W：不是字母、数字、下划线
\D：不是数字
三、CSS（级联样式标签）
1、样式表的定义与使用
（1）添加样式表的方法
直接定义标记的style属性：<标记 style="样式属性:属性值; 样式属性:属性值;…">
定义内部样式表：<style text="text/css"></style>
嵌入外部样式表：<style type="text/css"> @import url("外部样式表的文件名称"); </style>
链接外部样式表：<link type="text/css" rel="stylesheet" href="外部样式表的文件名称">
2、选择器
（1）标签选择器
（2）属性选择器
（3）Id选择器
（4）类选择器
（5）子选择器
（6）相邻兄弟选择器
（7）通用兄弟选择器
3、CSS与文字设置
（1）文本样式属性
| 属性名 | 含义 | 举例 |
| font-family | 设置字体类型 | font-family:"隶书"; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px "宋体"; |
（2）font-weight设置字体加粗
| 值 | 说明 |
| normal | 默认值，定义标准的字体。 |
| bold | 粗体字体。 |
| bolder | 更粗的字体。 |
| lighter | 更细的字体。 |
| 100、200、300、400、500、600、700、800、900 | 定义由细到粗的字体。 400等同于normal，700等同于bold。 |
（3）文本属性
| 属性 | 含义 | 举例 | |
| color | 设置文本颜色 | color:#00C; | |
| text-align | 设置元素水平对齐方式 | text-align:right; | |
| text-indent | 设置首行文本的缩进 | text-indent:20px; | |
| line-height | 设置文本的行高 | line-height:25px; | |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
（4）文本装饰 text-decoration
| 值 | 说明 |
| normal | 默认值，定义标准的字体。 |
| bold | 粗体字体。 |
| bolder | 更粗的字体。 |
| lighter | 更细的字体。 |
| 100、200、300、400、500、600、700、800、900 | 定义由细到粗的字体。 400等同于normal，700等同于bold。 |
（5）font设置总和字体属性：font: font-style font-weight font-variant font-size/line-height font-family
（6）排版样式属性
| 属性 | 说明 |
| text-indent | 首行缩进属性 |
| letter-spacing | 字符间距属性 |
| line-height | 行距属性 |
| text-align | 水平对齐属性 |
| text-transform | 转换英文大小写 |
4、颜色设置
（1）定义颜色的四种方法
颜色单位
颜色名称
rgb(x,x,x):RGB值
rgb(x%,x%,x%)：RGB百分比值
#xxxxxx：十六进制数
（2）背景颜色
background-color：关键字 | RGB值 | transparent
（3）背景图片
| 属性 | 说明 |
| background-image | 插入背景图片 |
| background-attachment | 插入背景附件 |
| background-repeat | 设置重复背景图片 |
| background-position | 设置背景图片位置 |
| background-size | 设置背景图片大小 |
5、CSS与列表
无序列表
（1）清楚无序列表前的默认黑点：list-style:none
（2）加大各列表项之间的间隔：line-height:40px
（3）设置图标：list-style-type
| 值 | 说明 | 语法示例 | |
| none | 无标记符号 | list-style-type:none; | |
| disc | 实心圆，默认类型 | list-style-type:disc; | |
| circle | 空心圆 | list-style-type:circle; | |
| square | 实心正方形 | list-style-type:square; | |
| decimal | 数字 | list-style-type:decimal |
（4）list-style-position列表符号缩进属性，主要是设置每个列表项目的符号或图片，是否向外凸出。
list -style-position:inside | outside
outside：标记放置于每一项列表的外侧，默认值。
inside：标记放置于每一项列表的内侧。
有序列表
（1）小写罗马数字：lower-roman
（2）大写罗马数字：upper-roman
（3）小写英文字母：lower-alpha
（4）大写英文字母：upper-alpha
（5）希伯来编号：hebrew
（6）亚美尼亚编号：armenian
（7）乔治亚编号：georgian
6、CSS与超链接
（1）超链接伪类
a:link：未单击访问时
a:visited ：单机访问后
a:hover：鼠标悬浮其上
a:active：鼠标单击未释放
7、盒子模型
（1）概念：盒子模型是CSS的基石之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框与外边距组成。
（2）设置元素边框
border-width边框宽度属性
border-style边框样式属性
border-top-style:样式值
border-bottom-style:样式值
border-left-style:样式值
border-right-style:样式值
border-color边框色彩属性
border-top- color: 颜色关键字 | RGB值
border-bottom- color: 颜色关键字 | RGB值
border-left- color: 颜色关键字 | RGB值
border-right- color: 颜色关键字 | RGB值
border属性的综合设置
边框样式值
| 值 | 说明 |
| none | 无边框 |
| dotted | 在IE5.5+为点线。否则为实线 |
| dashed | 在IE5.5+为虚线。否则为实线 |
| solid | 实线边框 |
| double | 双线边框 |
| groove | 3D凹槽 |
| ridge | 菱形边框 |
| inset | 3D凹边 |
| outset | 3D凸边 |
| hidden | 隐藏边框 |
（3）元素内边距：指边框和内部元素之间的空白距离(上右下左)
padding:长度 | 百分比
padding-top: 长度 | 百分比
padding-bottom: 长度 | 百分比
padding-left: 长度 | 百分比
padding-right: 长度 | 百分比
（4）元素外边框：是控制元素边界与其他元素的空白距离(上右下左)
margin :长度 | 百分比
margin -top: 长度 | 百分比
margin -bottom: 长度 | 百分比
margin -left: 长度 | 百分比
margin -right: 长度 | 百分比
（5）box-sizing属性
box-sizing : content-box|border-box|inherit;
content-box 默认值，可以使设置的宽度和高度值应用到元素的内容框。
border-box 设置的width值其实是除margin外的border+padding+element的总宽度。
inherit 规定应从父元素继承 box-sizing 属性的值
（6）box-shadow:设置边框阴影
（7）border-radius：圆角
（8）border-left：三角形
8、div标记
（1）span：<span>标记被用来组合文档中的行内元素。
<span id="指定样式名称">…</span>
或者
<span class="指定样式名称">…</span>
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。
（2）display属性
display: inline /block /none/inlin-block;
（3）定位与浮动
盒子水平居中：margin: 0 auto;
定位 position:relative/absloute;shihezi
static :这是默认的属性值，也就是该盒子按照标准流进行布局。
relative:称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移得距离。相对定位得盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
相对定位时，元素依然占据自己原始页面位置，只不过看上去位置相对于自身发生了偏移
相对定位的基准点是以原始i位置的原点为标准，从而界定top、left值。
absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位得框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好似这个盒子不存在一样。
绝对定位时，该元素悬浮于页面之上，不再占据页面位置；
绝对定位的基准点是以父块为标准，从而界定top、left值。
fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。
元素的溢出：overflow属性用于规定当内容溢出元素框时如何处理
| 属性值 | 描 述 |
| visible | 内容不会被修剪，会呈现在元素框之外 |
| hidden | 元素框之外的内容会被修剪，修剪掉的内容不显示 |
| scroll | 元素框之外的内容会被修剪，但是浏览器会显示滚动条以便查看修剪掉的内容 |
| auto | 让浏览器自动处理被修剪掉的内容，通常会显示滚动条以便查看 |
浮动 float:left/right;
| 值 | 说明 |
| left | 向左浮动 |
| right | 向右浮动 |
| none | 默认值，不浮动 |
clear属性
clear是一个与float相反的属性，它定义了在元素的哪边不允许出现浮动元素。
| 属性值 | 描 述 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
9、网页元素透明度
| 属性 | 说明 | 举例 |
| opacity:x | x值为0~1，值越小越透明 | opacity:0.4; |
| filter:alpha(opacity=x) | x值为0~100， 值越小越透明 | filter:alpha(opacity=40); |
10、解决塌陷的方法
overflow:hidden：溢出隐藏
overflow:auto：溢出添加滚动条
11、background-arigin/clip属性
padding-box：按内边框定位
border-box：按边框盒来定位
content-box：相对于内容来定位
12、线性渐变（上—>下，左—>右，左上角—>右下角）
上到下（默认）：
background:line-gradient(color1,color2);
左到右：
background:line-gradient(to right,color1,color2);
左上角到右下角：
background:line-gradient(to bottom right,color1,color2);
13、径向渐变
均匀分布（默认）：
background:radial-gradient(color1,color2,color3);
不均匀分布：
background:radial-gradient(color1 百分比,color2 百分比);
以中心点散开
background:radial-gradient(circle,color1,color2);
四、CSS动画
1、display属性
（1）block：内联标签变成块级标签，不设置宽度时，宽度为父元素宽度，独占一行，支持宽高（显示）
（2）inline：块级标签变成内联标签，内容撑开宽度，并非独占一行，不支持宽高，代码换行被解析成空格
（3）inline-block：既有内联标签并排显示的特征，又具有块级设置宽高的属性，不设置宽度时，内容撑开宽度，非独占一行，支持宽高，代码换行被解析成空格
（4）none：隐藏元素并脱离文档流
2、text-shadow属性
h-shadow：水平阴影的位置，允许负值
v-shadow：必需，垂直阴影的位置，允许负值
biur：可选，模糊距离
color：可选，阴影的颜色
3、text-overflow属性
white-space：nowrap 文本不会换行，在同一行继续
overflow:hidden：溢出隐藏
text-overflow：ellipsis用省略号来代码被修剪的文本变形函数
translate()：平移函数
scale()：缩放函数
skew()：倾斜 deg:角度单位
rotate()：旋转
4、过渡
transition:[transition-property（过渡或动态模拟的CSS属性）
transition-duration（完成过度所需要的时间）
transition-timing-function（指定过渡函数）
transition-delay（过渡开始出现的延迟时间）]
transition-timing-function 取值
| 值 | 说明 |
| linear | 匀速 |
| ease | 慢速开始，然后变快，然后慢速结束 |
| ease-in | 以慢速开始 |
| ease-out | 以慢速结束 |
| ease-in-out | 以慢速开始和结束 |
transition-delay 取值
| 值 | 说明 |
| 正值 | 不会立即触发，过来设置时间值后触发 |
| 负值 | 从该时间点开始显示，之后的动作被截断 |
| 0 | 默认值，元素过渡效果立即执行 |
伪类触发：
:hover :active :focus :checked
5、关键帧
调用关键帧
animation:
animation-name：由@keyframes创建的动画名称;
animation-duration ：过渡时间
animation-timing-function：过渡方式
animation-iteration-count：动画播放次数 (infinite:无限播放)
animation-direction：动画的播放方向
animation-play-state：动画的播放状态
animation-fill-mode：动画开始之前和结束之后发生的操作
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
