一、HTML5
lang=“en”------lang为语言
charset=“UTF-8”-----编译语言
1、 <h1></h1>------------------一级标签
...
<h6></h6>--------------------六级标签
2、 <p></p>---------------------段落标签
3、 <br/>换行标签--------------第一个单标签
4、 <strong></strong>--------加粗(优先考虑）
<b></b>------------------加粗
<em></em>----------------倾斜（优先考虑）
<i></i>------------------倾斜
<del></del>--------------删除线（优先考虑）
<s></s>------------------删除线
<ins></ins>--------------下划线（优先考虑）
<u></u>------------------下划线
5、 <div></div>和<span></span>--------------理解为盒子就好
<div>用来布局（超大的盒子，自己独占一行)
<span>是一个小盒子,一行上可放置多个<span>
6、图像标签
<img src="图像URL" />-------------------单标签
src指定了图像文件路径和文件名
<h4>这是烟台大学计算机与控制工程学院</h4>
<img src="YTU.jpg"/>
<h4>alt 替换文本 图像显示不出来替换成文本</h4>
<img src="YTU1.jpg" alt="这是烟台大学计算机与控制工程学院"/>
<h4>title 鼠标放到图像上，显示title</h4>
<img src="YTU.jpg" alt="这是烟台大学计算机与控制工程学院" title="这是钟楼"/>
可以用width,height,border 设置长度， 高度和边框
<h4>width 设置宽度</h4>
<img src="YTU.jpg" alt="这是烟台大学计算机与控制工程学院" title="这是钟楼" width="500"/>
<h4>height 设置图像高度</h4>
<img src="YTU.jpg" alt="这是烟台大学计算机与控制工程学院" title="这是钟楼" height="100"/>
<h4>border 设置图像边框</h4>
<img src="YTU.jpg" alt="这是烟台大学计算机与控制工程学院" title="这是钟楼" width="300" border="15"/>
7、图像路径
相对路径：同一级路径，下一级路径“/”，上一级路径“../”
绝对路径：在电脑中哪个地方
8、超链接标签：<a>
格式：<a href="跳转目标" target="目标窗口弹出方式">文本或者图像<a/>
链接分类：
1、外部链接：target默认值是：_self---当前网页打开
_blank---新的网页打开
2、内部链接：内部网站之间跳转
3、空连接：<a href="#"></a>
4、下载链接：地址链接是文件 .exe或者压缩包等文件
5、网页元素链接：例如文本，图像，声音，视频等等
6、锚点链接：可以快速定位到当前页面的某个位置
在href属性中,用#名字的形式！！！（一定记得加#）！！！
找到目标位置标签，在里面添加一个id属性
9、注释和特殊字符： 格式：<!-- -->
快捷键：Crtl + /
特殊字符： 空格
< --<
> -->
10、表格标签：作用：展示数据，可读性比较好
语法：<table>---------------------------定义表格的标签
<tr>--------------------------定义表格的行
<th></th>-----------------表头单元格
<td>单元格内的文字</td>---定义表格的单元格
</tr>
</table>
三者为嵌套关系
11、表格属性：要放在<table>标签里面
align:left,center,right：表格相对周围对齐方式
border:设置表格边框
cellpadding:单元格边沿与内容的空白距离，默认为1
cellspacing:单元格之间的空白距离，默认为2
width/height:设置单元格宽度、高度
12、表格结构标签：<thead>--------表格头部区域
<tbody>--------表格主题部分
13、合并单元格：方式：跨行合并：rowspan="合并单元格的个数“
跨列合并：colspan="合并单元格的个数“
目标单元格：跨行：最上一个单元格为目标单元格
跨列：最左一个单元格为目标单元格
三步走：1、确定跨行还是跨列
2、找到目标单元格，写上合并方式和合并个数
3、删除多余的单元格
14、表格总结：
1、表格标签
2、表格属性
3、表格合并（三步走）
15、列表标签：用来布局
三类：
1、无序列表（重点）：
<ul>--------项目的无序列表
<li>--------列表项（它们之间无序，属于并列关系）
￥￥￥：<ul>只能嵌套<li>,不能放其他标签
<li>里面可以放其他标签
它们由自己的样式属性
补：list-style:none:可以去掉前面的小圆点
2、有序列表：<ol>------有序列表
<li>------列表项（有序）
￥￥￥：<ol>只能嵌套<li>,不能放其他标签
<li>里面可以放其他标签
它们由自己的样式属性
3、自定义列表：<dl>------自定义列表
<dt>------名字
<dd>------对名字解释说明
￥￥￥：<dl>里面只能嵌套<dt><dd>
<dt>和<dd>属于并列关系
通常情况下，一个<dt>对应多个<dd>
16、表单标签：表单的目的是收集用户信息
表单通常由表单域、表单控件和提示信息组成
1、表单域:包含单个元素的区域
<form>-------定义表单域，并将区域内的信息提交给服务器
格式：<form action="url地址" method="提交方式" name="表单域名称"
2、表单控件：
1、<input>：输入表单元素，单标签，必须的属性“type”
type=text:输入为文本
type=passward:输入密码
type=radio:单选按钮，可以实现多选一
type=checkbox：复选框
type=submit:提交按钮，将form的表单域数据提交给服务器
type=reset:清除表单所有数据
type=button:不会提交某些数据，只是做某些事情（后期结合js使用）
type=file:定义输入字段和“浏览”按钮，用于文件上传
其他属性：
name:用于区别不同的表单元素，规定Input元素的名称---单选框和复选按钮要有相同的name值
￥￥：单选框和复选框要设置相同的name属性
value:规定input元素的值
checked:规定此input首次加载被选中
maxlenght:规定字段中字符的最大长度
2、<lable>:为input元素定义标注
可以绑定一个表单元素，当点击<lable for=“id名字”>标签文本时，浏览器就将光标自动聚焦到对应的表单元素
3、下拉表单：用户可以有多个选项选择，节约空间
格式：<select>
<option>...</option>
<option>...</option>
<option>...</option>
...
</select>
Tips:可以在<option>设置selected="selected"属性，设置选项默认值
4、textarea：文本域元素，输入内容较多的时候使用该控件，常见于留言板和反馈
格式：<textarea></textarea>
属性：cols="每行的字符数"，rows="显示的行数"
补充：<hr>整个行进行下划线
二、CSS3（高能哦）
CSS:美化网页，布局页面，全称为“层叠样式表”
1、作用：设置文本内容，图片外形以及版面布局和外观显示样式
2、语法规范：
由选择器和声明样式两部分组成，常写到<head></head>里面
格式：给谁改样式{改成什么样式}； 例如：p{
color: red;
/* 像素要加px */
font-size: 12px;
}
属性和属性值以“键值对”出现
￥￥￥：每个键值对一定要“；”隔开
3、代码风格：并非强制规范，而是符合实际开发的样式：
a、代码要选用展开格式，更加直观
b、一般采取字母小写书写
c、在每个属性值前面，空格后面要加一个空格
选择器和大括号之间也要加空格
4、基础选择器：
作用：根据不同的需求将不同的标签选择出来
选择器由基础选择器和复合选择器组成
基础选择器四大类：标签选择器，类选择器，id选择器，通配符选择器
a、标签选择器：选择所有的某一类标签
b、类选择器：在类名前加一个"."，例如“.red{color:red;} <ul><li class="red">...</li></ul>”---将所有拥有red的元素均为红色,
口诀：样式点定义，结构类调用,一个或多个，开发最常用
注意：不能用已经存在的标签，数字和中文作为类
补：多类名：给一个标签指定多个类名
使用方法：<div class="red font20">...</div>---必须用空格分开
c、id选择器
格式：#id名{
属性：属性值；
...
}
<div id="id名"></div>
口诀：样式#定义，结构id 调用，只能调用一次，别人不允许再用
注意：类选择相当于人的名字，可以重复；id选择器相当于身份证号码，没有重复的
d、通配符选择器
作用：使用“*”，选取页面中所有元素（包括html,body）
格式：*{
属性：属性值；
...
}
5、字体属性：
font-family:定义文本的字体系列，多个字体要用","分开
font-size；设置文字大小，注意要加“px”----像素单位
注：标题标签比较特殊，需要单独指定大小
font-weight:设置字体的粗细，有bold,bolder,lighter或者自定义（数字后面不要跟单位）
font-style:normal,italic(斜体，一般不常用）
复合属性：body {font:font-style font-weight font-size/line-height font-family;}
注意：顺序一定不能变；font-size/line-height和font-family一定不能省略！！！
例如:div {
font: italic 700 20px "微软雅黑";
（或者：font: 20px "微软雅黑";）
}
6、文本属性：
定义文字的外观，比如颜色，对齐方式，装饰文本等等
a、文本颜色：color(方式：预定义颜色，十六进制（使用最多），RGB代码，rgba--可以办透明);
b、对齐文本：只能设置水平对齐方式
格式：text-align:center,left,right;
c、装饰文本：text-decoration:下划线（underline)，删除线(line-through)，上划线(overline);
d、文本缩进：text-indent
格式：text-indent:20px;(常用的是em，一个em为一个字的大小)
e、行间距：控制行与行之间的距离
格式：line-height:..px;
7、CSS的引入方式：
a、行内样式表（行内式）
在元素标签内部的style属性设置CSS样式，适用于修改一些简单的样式
b、内部样式表（嵌入式）
写到html内部，将所有CSS的内部写样式，但是单独放在<style>标签内部，当然，<style>可以放到任意地方，
但是通俗性约定放在<head>里面，控制当前整个页面的元素样式
c、外部样式表（链接式）-----实际开发最常用
适用于样式比较多的时候，核心是：样式单独写到CSS文件里面，之后将CSS文件引入到html页面使用
步骤：1、新建一个.css文件
2、使用<link>标签引入改css文件
格式：<link rel="stylesheet" href="css文件路径">
8、Chrome调试工具
1、打开调试工具：F12键
9、emmet语法：提高编写速度
a、快速生成HTML代码：
Tab键，标签*数字+Tab，
父子标签：用>，例如：ul>li，再按下Tab键
兄弟标签：用+，同上
用 ：标签名.“类名”,再按下Tab键，或者 标签名#“id名”
若生成的类名有顺序，可以用：.demo$*数字
想要在生成的标签内部写内容可以用：标签{}*数字
b、快速生成CSS代码
c、快速格式化代码：右键--格式化文档、Shift + Alt + F
10、符合选择器：建立在基础选择器之上，对基本选择器进行组合得到
作用：更准确，更高效
包括：后代选择器，子选择器，并集选择器，伪类选择器
a、后代选择器（重要）：
选择父元素里面的子元素
格式：元素1 元素2 {样式...}---（也可以有多个元素）
注意：元素1和元素2之间必须用空格隔开，元素1为父元素，元素2为子元素
只改变元素2的样式
元素2可以是儿子或者孙子，只要是元素1的后代即可
b、子选择器：只能选择作为某元素最近一级子元素
格式：类名>标签 {样式}
c、并集选择器：选择多个标签，为他们定义相同的样式
格式：标签1，标签2，...{样式}，用逗号隔开
约定的语法规范：并集选择器竖着写！
注意：最后一个选择器不要加","
d、伪类选择器：添加某些特殊效果，最大的特点就是用":"表示
1、链接伪类：a:link -----选择所有未被访问的链接
a:visited---选择所有已被访问的链接
a:hover-----选择鼠标位于其上的链接
a:active----选择活动链接（鼠标按下为弹起的链接）
2、注意事项：注意上述的顺序 ：link -> visited -> hover -> active
e、：focus选择器:用于选取获得焦点的表单元素
格式： input:focus{
样式
}
11、CSS元素显示模式:作用：根据各个标签的特点，可以更好地布局我们的网页
定义：元素（标签）以什么方式进行显示
分类：块元素和行内元素
1、块元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
特点:a、自己独占一行
b、可以设置宽度，高度，外边距，外间距
c、宽度默认是容器的100%，高度是自己的
d、是一个容器及盒子，李阿敏可以放行内元素或者块元素
注意：文字元素不能使用块级元素
<p>标签里面不能放块级元素，特别是<div>
<h1>~<h6>也不能放其他块级元素
2、行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<u>,<span>
特点：a、相邻行内元素在一行上，一行可以有多个
b、高度和宽度是无效的
c、默认宽度是本身内容的宽度
d、行内元素只能容纳文本和其他行内元素
注意：链接不能再放其他的链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式比较安全
3、行内块元素：<img />,<input/>,<td/>
特点：a、他们之间有空隙，一行可以放多个
b、默认宽度是本身内容的宽度
c、可以设置高度，行高，外边距，外间距
12、元素显示模式转换：一个模式元素需要另外一种模式的特性
转为块内元素：display:block
转为行内元素：display:inline
转为行内块：display:inline-block
补；单行文字垂直居中：让文字的高度等于盒子的高度
13、设置背景：
1、背景颜色：background-color
2、背景图片：background-image，优点是便于控制位置
注意：格式：background-image:url(图片位置);
背景平铺：background-repeat:repeat,no-repeat,repeat-x,repeat-y
(默认情况下是平铺的）
注：页面元素既可以添加背景颜色又可以添加背景图片，只不过背景图片会压住背景颜色
3、背景位置：background-position:x,y;---x和y可以使用方位名词和精确单位
a、如果是方位名词，两个参数顺序无关
注：省略某一个参数时，则该参数水平居中或者垂直居中
b、精确位置：注：第一个一定是x坐标，第二个必定是y坐标
c、混合单位：第一个一定是x坐标，第二个必定是y坐标
背景属性的复合写法：background:书写顺序没有要求，一般是：颜色，地址，平铺，图像滚动，图片位置
补：背景色半透明：background:rgba(红色，绿色，蓝色,透明度（0~1）)
注：只是让盒子背景半透明，但是盒子里面的内容不受影响
14、CSS三大特性：
1、层叠性：就近原则（样式冲突情况下），如果不冲突不会重叠
2、继承性：子标签会继承父标签的样式(注：不是继承所有样式，只是继承一些文字的样式，如font-,text-,line-系列以及color)
行高的继承：font: 12px/24px '微软雅黑'（或者：font: 12px/1.5 '微软雅黑'----行高当前元素文字的1.5倍）
3、优先级：给同一个元素指定了多个选择器，就会有优先级产生
!important（无穷） > 行内样式表style（1,0,0,0） > ID选择器（0,1,0,0） > 类选择器，伪类选择器(0,0,1,0) >
元素选择器(0,0,0,1) > 继承，通配符选择器(0,0,0,0)
括号内的数字为权重
!important格式： 标签 {
color:pink!important;
...
}
注意事项：继承的权重为0！！！不管父元素权重有多高，子元素继承的权重都是0。
权重叠加：如果是复合选择器，则会有权重叠加，但是没有进位
15、盒子模型：
页面布局：盒子模型，浮动和定位
网页布局的本质：就是盒子
网页布局过程： 1、准备好相关的网页元素
2、利用CSS设置好盒子样式，摆放好位置
3、往盒子里面装内容
盒子模型的组成：border边框，content内容，padding内边距，margin外边距
1、border： 边框粗细 border-weight
边框颜色 border-color
边框样式 border-style:solid--实线,dashed--虚线,dotted--点线（此三类常用）
border复合写法：格式：border:1px solid red; 注意：三者没有顺序
边框分开写法：
border-top:...
border-bottom:...
border-left:...
border-right:...
表格的细线边框：
border-collapse:collapse;表示相邻框合并在一起
注意：边框会影响盒子的实际大小
2、padding内边距：设置边框和内容的距离
格式： padding-bottom:...
padding-top:...
padding-left:...
padding-right:...
padding复合属性： padding:5px;----上下左右均为5像素
padding:5px 10px;----上下为5像素，左右为10像素
padding:5px 10px 20px;----上为5像素，左右为10像素，下为20像素
padding:5px 10px 20px 30px;-----上为5像素，右为10像素，下为20像素，左为30像素（顺时针转）
注意：padding也会影响盒子的大小，可以利用width,height调整大小
如果没有指定width,height属性，则不会扩大盒子的大小
3、margin外边距：控制盒子与盒子之间的距离
margin-bottom,margin-left,margin-right,margin-top
margin复合属性:margin:5px;----上下左右均为5像素
margin:5px 10px;----上下为5像素，左右为10像素
margin:5px 10px 20px;----上为5像素，左右为10像素，下为20像素
margin:5px 10px 20px 30px;-----上为5像素，右为10像素，下为20像素，左为30像素（顺时针转）
块级盒子水平居中：biubiu指定宽度，左右外边距设置为auto（重点）
行内元素或者行内块元素居中可以给其父元素添加text-align:center即可
4、外边距合并：
嵌套块元素垂直外边距的塌陷：对于两个嵌套的块元素，父元素和子元素也有上外边距，
此时父元素会塌陷较大的边距值
解决方案：1、为父元素定义上边框
2、为父元素定义上内边距
3、为父元素添加overflow:hidden
5、清除内外边距：可能代码有默认的内外边距，首先要清除一下内外边距
格式： * {
padding:0;
margin:0;
}---------这也是CSS的第一行代码
注意：尽量只设置左右的内外边距，上下边距不要动
16、新样式：圆角边框，盒子阴影，文字阴影
圆角边框：border-radius:length;
圆角矩形将border-radius设置为高度的一半
圆可以将border-radius设置为边长的一半
border-radius:10px 20px 30px 40px;--分别为左上角，右上角，右下角，左下角
设置单个：border-top-left-radius:...
注意：top和left不能更换位置
盒子阴影：box-shadow属性
格式：box-shadow: h-shadow--水平阴影位置（必需）
v-shadow--垂直阴影位置（必需）
blur---模糊距离（可选）
spread---阴影尺寸（可选）
color---阴影颜色
inset--将外部阴影改为内部阴影（可选）
注意：inset默认是外部阴影，所以只要不改为内部阴影就不用写
文字阴影：text-shadow
格式:text-shadow: h-shadow--水平阴影位置（必需）
v-shadow--垂直阴影位置（必需）
blur---模糊距离（可选）
spread---阴影尺寸（可选）
17、浮动：传统网页三种布局：普通（标准）流，浮动和定位
为什么需要浮动：可以改变元素标签默认的排列方式
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
第二准则：设测量盒子大小，在确定盒子位置
float；none,left,right:实现左浮动或者右浮动
浮动特性：1、浮动特性会脱离标准流：
脱离标准流控制，移动到指定位置
浮动的盒子不再保留原先的位置
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动元素有行内块特性：添加了浮动之后可以调节高宽
浮动元素经常和标准流父级搭配使用：父元素上下排列盒子，浮动元素左右排列盒子
浮动布局注意点： 父元素上下排列盒子，浮动元素左右排列盒子
浮动的盒子只会影响后面的标准流，不会影响前面的标准流
浮动的盒子不会有外边距合并的问题
浮动的元素不会压住标准流的文字
18、清除浮动：本质：清除浮动元素造成的影响
格式：clear:left：不允许左侧有浮动元素
right：不允许右侧有浮动元素
both：同时清除左右两侧的浮动
方法:1、额外标签法：
在浮动末尾添加一个空的标签，例如 <div class="clear"></div>
注意：这个新增的标签必须是块级元素
2、父级添加overflow：给父级添加Overflow元素
overflow:hidden,auto,scroll
3、after伪元素：也是给父元素添加，例如：.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4、双伪元素清除浮动
例如： .clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
19、PS切图：图层切图：右击图层，选择快速导出为png
注意：可以将文字与图片合称为一个图层（Ctrl+E)
20、CSS属性书写顺序：1、布局定位属性
2、自身属性
3、文本属性
4、其他属性
注意：实际开发，链接不会用a标签，而是用li+a标签
21、定位：将的盒子定在某一个位置，定位=定位模式+边偏移
1、定位模式：使用position属性设置：static---静态定位
relative---相对定位
absolute---绝对定位
fixed---固定定位
1、静态定位：{position:static}---无边偏移，就是无定位，或者说就是标准流
2、相对定位：移动位置时，根据它原来的位置来说
格式：{position:relative}有四个属性
特点：参照原来位置移动；原来在标准流 定位置继续占有，后面的盒子依然以标准流的方式对待它（不脱标）
3、绝对定位： 它是相对于祖先元素来说的
格式：{position:absolute}--有四个属性
特点： 1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2、如果父级有定位，则以最近一级的！！！有定位！！！的最先为参考点
3、绝对定位不再占有原来的位置（脱标）---后面标准流盒子会占有他的位置
口诀：子级有用绝对定位（前提：父级必须有定位，只能是相对定位），不会占有位置
！！！子绝父相！！！
4、固定定位：固定于浏览器某个位置
格式：{position:fixed}
特点： 1、以浏览器的可视窗口为参考点，跟父亲没有任何关系，不随滚动条而滚动
2、固定定位不再占有原来的位置
小技巧：固定在版心右侧：.w {
width: 800px;
height: 1400px;
background-color: red;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
margin-top: 550px;
margin-left: 405px;
width: 50px;
height: 60px;
background-color: pink;
}
......
<div class="fixed"></div>
<div class="w">版心盒子，800px</div>
5、粘性定位：格式：{position:sticky}
特点：1、以浏览器可视窗口为参照点移动
2、占有原先位置
3、必须添加top,left,right,bottom其中一个属性才会生效
定位的叠放顺序：z-index:控制盒子的前后次序，可以使整数，负数，数值越大，盒子越靠上
注意：只有定位的元素才有z-index属性，另外，数字后面不用加单位
定位的拓展：1、绝对定位的盒子居中：.box {
position: absolute;
/* left走50%，top走50% */
left: 50%;
top: 50%;
/* margin负值往左和往上走自己的一半 */
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: blue;
}
2、定位特殊性：行内元素添加绝对或者固定定位，可以直接设置高度和宽度
3、脱标的盒子不会触发外边距塌陷
4、绝对定位和固定定位会完全压住盒子（包括文字等所有内容，与浮动不同）
注意：如果一个盒子既有left,right属性，默认left属性；
同理，如果既有top,bottom属性，会默认top属性
2、边偏移：就是盒子移动的最终位置：四个属性：top,bottom,left,right(只有定位有该四个属性）
22、元素的显示与隐藏：让元素在页面显示或者隐藏
1、display（重点）: none---隐藏元素
block---除了转换为块级元素，还能显示元素
display隐藏元素后，不再占有原来的位置
2、visibility:inherit---继承上一个对象的可见性
visible---元素可见
hidden----元素隐藏
visibility隐藏元素后，继续占有原来的位置
3、overflow溢出：对溢出的东西进行某些操作
visible:不显示内容也不添加滚动条
auto:在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:总是显示滚动条
注意:如果有定位的盒子，慎重使用overflow:hidden，因为他会隐藏多余的部分
23、CSS高级技巧：
1、精灵图：为了减少服务器接收和发送请求失败的次数，提高页面加载速度
使用精灵图：主要针对背景图片使用，就是把多个小图片整合成一张大背景图
主要使用background-position移动位置，一般为负值
2、字体图标：实质是字体，可以随意改变颜色，产生阴影，透明效果等
3、CSS三角的做法：.box {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
4、CSS用户界面样式：更改一些用户操作样式
1、鼠标样式：格式：{cursor:...}
default:默认
pointer:小手
move:移动
text:文本
not-allowed:禁止
2、轮廓线：outline:0或者outline:none
防止拖拽文本域：resize:none;文本域代码尽量写到一行上
3、vertical-align:经常设置图片或者表单和文字（行内块）垂直对齐
baseline---默认，和基线对齐
top
middle
bottom
4、解决默认图片底部空白空隙的问题
使用vertical-align:middle,top 或者bottom;（提倡）
将图片格式转为块内元素
5、将溢出的文字用省略号显示
1、单行文本溢出显示省略号：
步骤：先强制一行内文本显示（white-space:nowrap/normal）；超出部分隐藏(overflow:hidden)；
文字用省略号代替(text-overflow:ellipsis)
2、多行文本溢出显示省略号：(兼容性不太好)
步骤：overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
6、常见布局技巧：
巧妙运用：margin负值
1、如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
2、如果li都有定位，则用z-index提高层级
z-index: 1;
3、文字围绕浮动元素：浮动元素不会压住文字
4、行内块元素的巧妙运用：
5、三角强化： width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
border-bottom: 0 solid blue;
border-left: 0 solid green;
或者： border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
补： 加入图标：<link rel="shortcut icon" href="../img/icon.ico">
24、pink老师前端教程番外篇
一、2D转换：
transform:格式：transform: translate(100px,100px);
或者： transform:translatex(100px);
transform:translatey(100px);
优点：不会影响其他元素的位置
如果单位是%，name移动的距离是自身宽度或者高度来说的
translate对于行内元素是无效的
垂直居中;transform:translate(-50%,-50%);
rotate:让盒子旋转：格式:transform:rotate(度数deg);
设置中心点：transform-origin: x y;----用空格隔开，可以给x,y设置像素或者方位名词；
scale:放大，缩小:格式;transform:scale(x,y);---用逗号隔开，里面的数字代表倍数
例如：transform: scale(1.5);---x,y均放大2倍
transform: scale(0.7,0.7);
优点：不会影响其他的盒子，而且可以设置缩放的中心点
综合写法：transform:translate(x,y) rotate(180deg) scale(...);
注意：顺序会影响效果
如果有位移和其他属性时，要将位移放到最前面
二、动画：
一、步骤：1、先定义动画
2、再调用动画
注意:一定要设置animation-name和animation-duration两个属性
例如：<style>
@keyframes move {
/* 开始状态 */
0% {
transform: translate(-500px);
}
/* 结束动画 */
100% {
transform: translate(500px);
}
}
div {
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
/* 选择动画样式 */
animation-name: move;
/* 设置动画时间 */
animation-duration: 2s;
}
</style>
二、动画序列： 可以改变任意多的次数
用百分比来规定变化的时间（百分比要用整数），或者用关键词“from”和“to”,0%可以省略
例如：@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(500px,0);
}
50% {
transform: translate(500px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
三、动画属性： 1、@keyframes:规定动画
2、animation-name:动画名称
3、animation-duration:动画时间
4、animation-timing-function:动画的速度曲线，默认为ease
速度曲线：steps步长，就是分几步完成动画
5、animation-delay：规定动画何时开始，默认为0
6、animation-iteration-count：重复次数，默认1，可以选择infinate
7、animation-direction：是否反方向，选择laternate，默认为normal
8、animation-fill-modeL:动画结束保持的状态，backwards回到起始状态，forwards停在结束的位置
9、animation-play-state：规定动画是否正在运行或者暂停，默认是"running"还有"paused"
四、动画简写：animation：动画名称 持续时间 运动曲线 合适开始 播放次数 是否反方向 动画其实或者结束的状态
name和duration一定要写
三、3D转换: X轴：水平向右，右正左负
Y轴：垂直向下，下正上负
Z轴：垂直屏幕，外正里负
1、3D移动：translate3d(x,y,z):translatez单位一般是px
简写：transform:translate3d(x,y,z);
注意：x,y是无法省略的，如果没有就写0；
2、透视perspective:近大远小，单位是像素
注：透视写在被观察元素父盒子上面
四、3D旋转：transform:rotateX(45deg)----沿着x轴旋转45度
transform:rotateX(45deg)----沿着y轴旋转45度
transform:rotateX(45deg)----沿着z轴旋转45度
transform:rotate(x,y,z deg)----沿着自定义轴旋转45度
例如：transform: rotate3d(1,1,0,45deg);-------x和y轴均旋转45度
五、3D呈现：transform-style:控制子元素是否开启三维立体空间
flat---不开启；presever-3d---开启
注意：代码是写给父级的，但是受影响的是子盒子
25、移动端Web开发：
一、视口：显示页面的屏幕区域，分为布局视口，视觉视口，理想视口
1、布局视口：元素看上去很小，只能通过手动放大缩小屏幕
2、视觉视口：用户正在看到的网页区域，可以通过缩放操作视觉视口，但不会影响布局视口
3、理想视口：需要手动填写meta视口标签通知浏览器操作
meta视口标签的目的：布局视口的宽度应该和理想视口的宽度一致
meta视口标签：语法：<meta name="viewport" content="width=device-width,user-scalabel=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
width:宽度设置的是viewport宽度，可以设置device-width特殊值
user-scalabel：用户是否可以缩放，yes/no(或者1/0)
initial-scale:初始缩放比
maximum-scale:最大缩放比
minimum-scale:最小缩放比
二、二倍图：
物理像素：屏幕的最小颗粒，是物理真实存在的
物理像素比：一个px能显示的物理像素点的个数
背景缩放：background-size:背景图片宽度 背景图片高度；
另外的属性：cover:吧背景图片扩展至足够大，是背景图片覆盖面整个区域
contain:宽度高度等比拉伸，宽度或者高度铺完之后就不再拉伸
三、移动端开发选择： 1、单独制作移动端页面（主流）
2、响应式页面兼容移动端（其次）---制作麻烦
移动端技术解决方案：移动端CSS初始化推荐使用normalize.css
/* 有了这行代码，让盒子变成CSS3模型，边框，padding不会再撑大盒子 */
box-sizing: border-box;
点击高亮我们需要清除：
-webkit-tap-highlight-color:transparent
在移动端浏览器默认的外观上加上这个属性才能给按钮和输入框自定义样式：
-webkit-appearance:none;
禁用长安页面是弹出菜单：
img,a {-webkit-touch-callout:none};
流式布局（百分比布局）：
flex布局：任何一个容器都可以指定为flex布局
采用flex的容器，叫做flex父容器，她的子元素为容器成员，叫做flex项目
属性：1、flex-direction:设置主轴方向：默认的主轴是x轴，我们的元素是跟着主轴排列的
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
2、justify-content：设置主轴上的子元素排列方式
flex-start:从头部开始排列
flex-end:从尾部开始排列
center:放在中间
space-around：平均分配
space-between:两边先贴边，再平分剩余空间
3、flex-wrap:子元素是否换行：默认是不换行的，如果装不开会缩小放在
nowrap:不换行
wrap:换行
4、align-items:设置侧轴子元素排列（单行）
flex-start:从上到下
flex-end:从下到上
center:垂直居中
stretch:拉伸---但是不要给子元素高度
5、align-content：设置侧轴子元素排列（多行）---适用于子项出现换行的情况
flex-start:从头部开始排列
flex-end:从尾部开始排列
center:放在中间
space-around：平均分配
space-between:子项在侧轴两头先贴边，再平分剩余空间
stretch:设置子项元素高度平分父元素高度
6、flex-flow:是flex-direction和flex-wrap的复合属性
flex属性：定义子项目分配剩余空间，用flex表示占多少
格式：.类名 {flex:<number>;}
align-self:控制子项自己在侧轴上的排列方式
order:定义项目的排列顺序
颜色渐变：语法：background:-webkit-linear-gradient(起始方向，颜色1，颜色2,...)
注：必须添加私有前缀
三、HTML5/CSS3新增特性
一、HTML5新增特性：兼容性问题严重
1、新的标签
a、语义化标签：
b、多媒体标签：<audio>：音频---支持mp3,wav,ogg
格式：<audio src="文件地址" controls="controls"></audio>
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
<video>:视频---只支持mp4,webm,ogg
格式：<video src="文件地址" controls="controls"></video>
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
c、input标签：必须添加表单域
<label>网址:</label><input type="url" name="" required>
<label>邮箱:</label><input type="email" name="" required>
<label>日期:</label><input type="date" name="">
<label>时间:</label><input type="time" name="">
<label>星期:</label><input type="week" name="">
<label>数量:</label><input type="number" name="">
<label>范围:</label><input type="range" name="">
<label>电话:</label><input type="tel" name="">
<label>颜色:</label><input type="color" name="">
<label>搜索:</label><input type="search" name="">
d、表单属性： required-----表单不能为空
placeholder---规定帮助用户填写输入字段的提示。
格式：input::placeholder{
...
}
autofocus-- 规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）
autocomplete:on/off---自动记录之前输入过的文字
multiple---如果使用该属性，则允许一个以上的值。
二、CSS3的新特性：
1、新增选择器：
a、属性选择器:根据特定的属性来选择元素；
格式： E[att]---------选择具有att属性的E标签
E[att=“val”]—选择att属性值为val的E标签
E[att^=“val”]–选择att属性值以val开头的E标签
E[att$=“val”]–选择att属性值以val结尾的E标签
E[att*=“val”]–选择att属性值含有val的E标签
注意：类选择器，属性选择器，伪类选择器权重都是0,0,1,0
2、结构伪类选择器：E:first-child-------匹配父元素的第一个子元素E
E:last-child--------匹配父元素的最后一个子元素E
E:nth-child(n)------匹配父元素的第n个子元素E
注意：n可以是even(偶数),odd(奇数),n可以是公式：-n+3---前三个...
E:first-of-type:指定类型E的第一个
E:last-of-type:指定类型E的最后一个
E:nth-of-type(n);指定类型E的第n个
区别：nth-child会把所有的孩子都排列序号，在执行的时候首先看nth-child(n)，之后回去看前面的其他标签
nth-of-type会把指定盒子排列序号
3、伪元素：格式：::before:在元素内部的前面（父盒子里面的前面）插入元素
::after:在元素内部的后面（父盒子里面的后面）插入元素
伪元素选择器和标签选择器一样，权重为0,0,0,1；
里面必须有content属性，而且必须加引号，例如：element::before{content:"..."}
before和after属于行内元素，使用格式:element::before{}或者element:after{}
利用伪元素做一些字体图标
盒子模型：border-box:box-sizing属性:content-box----默认大小
border-box----盒子大小为width
4、过渡特性：经常和hover搭配使用
transition:要过渡的属性 花费时间（必须得写单位s） 运动曲线（默认是ease） 何时开始（设置延迟时间）；
后面两个可以省略
口诀：谁来变化谁来加
这就是半个月干完的前端（部分）教程了，喜欢就收藏吧！
（原版笔记，自己一个字一个字敲上去的）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
