Web前端开发笔记——HTML和CSS

一、HTML基础笔记

1、基础概念：标签、元素、属性、文件结构

1.1标签

由尖括号包围，比如
标签嵌套，不能交叉
内外层标签称父子标签，同级称兄弟标签

1.2元素

开始标签，结束标签和中间的内容称为一个元素，比如:百度一下

1.3属性

标签名      值1          值2

     属性1         属性2

一个标签可能有多个属性，属性先后顺序无关

1.4文件结构

.htm或.html文件
head：头部，浏览器，搜索引擎所需信息
body：主体，网页中所包含的具体内容

!DOCTYPE html
文档类型：符合HTML5标准
    
lang属性：提供给搜索引擎
    en英文
    zh中文
    
           编码方式，与保存方式不一样会出现乱码
meta charset="UTF-8"
meta:元数据
charset属性：字符集编码方式
浏览器：UTF-8是国际编码

2、标签

2.1标题：h1~h6

标题逐级字体变小
一个页面建议只有一个h1
例：

一级标题

二级标题

2.2段落：p

每个段落自动换行
段落内部文字忽略连续空格（多个空格只显示一个），也不会换行

例：

这是一段文字

2.3段内换行：br

例：

2.4空格字符: 

段落内部文字忽略   连续空格
特殊字符，全小写

2.5预留格式：pre

保留空格   和
		换行
		记得pre标签自占一行，内容换行再写

2.6行内组合：span

最新中国人口调查报告指出
配合css改变字体

2.7水平线：hr

例：

---

2.8注释

注释可以跨行

2.9超链接：a

文字或图片
		文件地址
		  网址
           #（虚拟超链接）

锚点链接：点击链接快速定位到页面中某个位置

• 在链接文本中，设置属性值为#名字的形式，如第二集

• 找到目标位置标签，添加id属性 = 刚才的名字，如

  第二集

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

例：

360浏览器

2.10插入图像：img标签

			
			      绝对路径，相对路径			    记得/封闭

例:

2.11脚标标签：sup，sub

上脚标¹

下脚标₂

2.12区域：div

区域：页面的一个组成部分、一个栏目板块

2.13无序列表：ul li

• HTML
• CSS
• JS

2.14有序列表：ol li

1. HTML
2. CSS
3. JS

2.14.5自定义列表：dl（定义列表） dt（大哥） dd（小弟）

名词1

名词1解释1

名词1解释2

2.15表格

名字/科目	语文	数学	英语
小红	48	48	69
小明	96	100	98

tr(table row)表格行，

td(table data)表格数据,

th(tablehead)表头单元格 加粗显示

要写出空格的话不能省略td

2.16表单：form

***表单：***是一个区域，采集用户信息

***表单元素：***用户名密码输入框，文本框密码框，按钮，单选，复选，下拉列表，文本域

2.16.1：文本框、密码框：input

	
       
文本框text
密码框password
区别：密码框里的文本是以*显示

2.16.2：提交按钮，重置按钮

	姓名：
	
	
	

type:提交按钮submit，重置按钮reset
value:按钮上显示的文字

2.16.3：单选框，复选框

	性别：
	男
	女
	
                           name属性设置相同才会被选择一个
	爱好：
	音乐
	体育
	阅读

单选框：radio
复选框：checkbox
cheched:当设置checked="checked"时，该选项被默认选中

2.16.4：下拉列表框

	选项1
	选项2
	选项3

select:当设置selected="selected"时，该选项被默认选中

2.16.5：文本域

文本

例子：

账户：
密码：


性别： 男 女
爱好： 音乐 体育 阅读
选项1 选项2 选项3
请在此输出内容

二、CSS笔记

1、CSS样式

1.1CSS概述

CSS：层叠样式表，内容样式分离，便于修改样式

CSS语法结构：

p{
  font-size:12px;  /*字号*/
  color:blue;      /*文字颜色*/
  font-weight:bold;/*加粗*/
}

p{}选择器开头表示作用于所有p标签，冒号前面属性名，后面属性值，分号结束，/**/注释

1.2CSS添加方法

行内添加 ：css样式被添加到p标签上，作用于单句

你好

内嵌样式：将CSS代码内嵌到当前页面的head标签部分，用style标签，只对当前页面有效

适用于文件少，css代码不多

        


	
举个例子

单独文件：link标签嵌入head标签（用link：css扩展快速生成）

优点：修改样式只需修改公共CSS文件

外部式样式表文件style.css
p{
	color: red;/*设置文字颜色*/
}
网页文件：练习



	


	
你好哦你好你好大家

优先级：多重样式可以层叠，可以覆盖
样式的优先级按照“就近原则”
行样式>内嵌样式>链接样式>浏览器默认样式

1.3CSS选择器

1.3.1标签选择器

	


	
标题
	

	
正文段落
	版权所有

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2Ftuxn4-1615992205944)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-20210202234211429.png)]

1.3.2类别选择器

	
类别一
	
类别一
	
类别二
	
类别二
	
普通段落中的文字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r7SqcNxU-1615992205947)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-20210202235501926.png)]

1.3.3ID选择器

	
类别1
	
类别2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdk2QGgo-1615992205948)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-20210202235809803.png)]

1.3.4嵌套声明

	
天使投资是投资方式的一种

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nCPumHt2-1615992205951)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-20210203000252865.png)]

1.3.5集体声明（并集选择器）

	
南一师兄
	
你好再见

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9qgxu7b-1615992205953)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-20210203000633331.png)]

1.3.6全局声明（通配符选择器）

	
南一师兄
	
你好再见
	
阿巴阿巴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8KYLjjg-1615992205954)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-20210203001144479.png)]

1.3.7混合

• 多个class选择器混合，用空格分开

......

• id和class混用

• id选择器不可多个同时使用

1.4文字样式

1.4.1 单位与颜色

单位：px像素，em字符，%百分比

颜色	描述
red,blue,green	颜色名http://www.w3school.com.cn/cssref/css_colors_legal.asp
rgb(x,x,x)	RGB值，每个颜色分量取值0-255,红色：rgb(255,0,0),灰色(66,66,66)(相同取值则为灰色)
rgb(x%,x%,x%)	RGB百分比值 0%-100% 红色(100%,0%,0%)
rgba(x,x,x,x)	RGB值，透明度。a值：0.0（完全透明）与1.0（完全不透明）红色半透明rgba(255,0,0,0.5)
#rrggbb	十六进制数 红色：#ff0000（去掉重复位#f00）

1.4.2 text文本

属性	描述	取值
color	文本颜色	red#f00
letter-spacing	字符间距	2px -3px
line-height	行高	14px 1.5em 120%
text-align	对齐	center left right justify(两边对齐)
text-decoration	装饰线	none(用于超链接) overline underline line-through
text-indent	首行缩进	2em

1.4.3 font字体

属性	描述	例子
font	在一个声明中设置所有的字体属性	font：bold 18px ‘幼圆’
font-family	字体系列	font-family:“Hiragino Sans GB”,“Microsoft YaHei”,san-serif(字体名字中间有空格的，用双引号括起来，多种字体用逗号隔开，按顺序获取有第一种字体则用第一种，以此类推)
font-size	字号	14px 120%
font-style	斜体	italic
font-weight	粗体	bold 700

1.4.5简化font（顺序）

font：斜体 粗体 字号/行高 字体

font：italic bold 16px/1.5em ‘宋体’；

1.5背景超链接样式

1.5.1背景

空元素需要先定义元素的高度和宽度

• background-color

• background-image：url（“logo.jpg”）

• background-repeat(背景图片填充方式)：

  repeat（棋盘式填充)，repeat-x（填充横向一行），repeat-y（填充垂直一行），no-repeat（一张图片做背景）

• background：颜色 图片 repeat

1.5.2超链接

按此顺序

1. a:link 普通的未被访问的链接

2. a:visited 用户已访问的链接

3. a:hover 鼠标指针位于链接的上方悬停（每一种盒子都可以用：hover）

4. a:active 链接被点击的时刻

：伪类选择器

a:link{
    text-decoration: none;
    color: #09f;/*未访问*/
}
a:visited{
    text-decoration: none;
    color: #930;/*已访问*/
}
a:hover{
    text-decoration: underline;
    color: #03c;/*鼠标悬停*/
}
a:active{
    text-decoration: none;
    color: #03c;/*按下鼠标*/
}

鼠标悬停放大

a{
	font-size:22px;
}
a:hover{
	font-size:120%;
}

1.6列表，表格样式

1.6.1列表List

• 前面这个点就叫列表项标志

属性	描述
list-style	所有用于列表的属性设置于一个声明中
list-style-image	为列表项标志设置图像（使用url属性，例list-style-image：url（“logo.jpg”））
list-style-position	标志的位置（inside缩进在列表之内，outside突出在列表左侧）
list-style-type	标志的类型

list-style-type可取值：

属性值	效果说明
none	不使用任何项目符号
disc	默认值，实心圆
circle	空心圆
square	实心矩形
decimal	数字1、2、3、4、5
decimal-leading-zero	以0打头的数字，01、02、03、04、05
lower-alpha	小写英文字母，a、b、c、d、e
upper-alpha	大写英文字母，A、B、C、D、E
lower-roman	小写罗马数字，ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
upper-roman	大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ

1.6.2表格

表格大小：width（宽），height（高）

table{
    width:500px;
    height:200px;
}

表格边框：border属性

table{
	border-collapse:collapse;/*合并表格边框，美化*/
}

表示：tr的父元素table的奇数个子元素，不管这些子元素是tr还是th

2、CSS布局与定位

*CSS属性书写顺序（重点）

1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / backgroud
3. 文本属性：color / font / text-decoration / text-align / white-space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

2.1盒子模型

2.1.1盒子模型概念与组成

概念：页面中所有元素都可以看成一个盒子，占据着一定的页面空间

盒子模型组成：

content内容

height高度

width宽度

border边框

padding内边距

margin外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KS7D4OwQ-1615992205955)(C:\Users\爸爸\Desktop\HTML\盒子模型.jpg)]

2.1.2overflow属性（内容溢出盒子框时，overflow属性取值）

hidden 超出部分不可见

scroll 显示滚动条

auto 如果有超出部分，显示滚动条

2.1.3border属性(边框)

border-width: px、thin、medium、thick

border-style: dashed、dotted、solid、double

border-color: 颜色

border: width、style、color

2.1.4水平分割线

.line{
	height:1px;
	width:500px;
	border-top:1px soild#e5e5e5;
}

2.1.5padding属性和margin属性

对浏览器默认设置清零

*{
	margin:0;
	padding:0;
}

内边距	外边距	组成
padding：5px；	margin：5px；	上右下左（顺时针）
padding-top：10%	margin-top：10%；	上
padding-right	margin-right	右
padding-bottom	margin-bottom	下
padding-left	margin-left	左

书写规矩：当缩写时，上下一样，左右一样

书写	等价于
margin:1px;	margin:1px 1px 1px 1px;
margin:1px 2px;	margin:1px 2px 1px 2px;
margin:1px 2px 3px;	margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;	注意这里虽然上下边距都为1px，但不可缩写

• font-size:0;/否则图间有空隙/

2.1.6内边距padding

1. 如果盒子本身有指定width/height属性，则此时padding会撑开盒子大小，让width/height减去多出来的内边距大小即可
2. 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

2.1.7外边距margin

1. 块级元素水平居中，margin:0 auto;

   必须满足两个条件：

   • 盒子必须指定宽度（width）
   • 盒子左右外边距都设置auto

2. 行内元素和行内块元素水平居中,给其父元素添加text-align：center；

3. margin的合并：垂直外边距合并，水平方向不合并，两个盒子的外边距合并成一个外边距（等于大的那个）

4. 嵌套块元素塌陷（浮动盒子不会有外边距合并问题）

   解决方案：

   • 为父元素定义上边框border:1px solid transparent;（透明）
   • 为父元素定义内边距
   • 为父元素添加overflow：hidden；

2.2CSS定位注意点

• 网页布局第一准则：多个块级元素纵向排列找文档流，多个块级元素横向排列找浮动

• 网页布局第二准则：先设置盒子大小，之后设置盒子位置

• 先用标准流父元素排列上下，在用浮动左右排列

• 一个元素浮动，理论上其他兄弟元素也要浮动

• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

2.3文档流定位

2.3.1block元素特点（块元素）

• 独占一行

• 元素的height、width、margin、padding都可设置

• 常见的block元素

  、

  、

  …

  、

  1. 、
     • 、、

• 将元素显示为block元素

  a{
  	display:block;
  }
  

  inline元素a转换为block元素，从而使a元素具有块状元素的特点

• 宽度默认父级的100%

  注意：

  • 文字类元素内不能放块级元素 例：

    ,

    ~

2.3.2inline元素特点（行内元素）

• 一行可以显示多个

• width、height不可设置

• width就是它包含的文字或图片的宽度，不可改变（宽度由内容撑开）

• 常见的inline元素、

• 显示为inline元素：display：inline；

• inline元素之间有一个间距问题，通常将inline类型转换成block等等其他类型的元素来进行显示，例如：

• 行内元素只能容纳文本或其他行内元素

  注意：

  链接里不能放链接

2.3.3inline-block元素（行内块元素）

• 不单独占用一行
• 两个行内块元素之间会有间隔
• 元素的height、width、margin、padding都可设置，例如：
• 常见的inline-block元素，表单元素
• 显示为inline-block元素display：inline-block；

2.4浮动定位

2.4.1float属性：left，right

使盒子向两边浮动脱离文档流原来位置，左右浮动直到左右边缘或另一浮动框的边缘。

1. 脱离标准流控制，移动到指定位置（脱标）
2. 浮动盒子不再保留原先位置（会被其他标准流占有）
3. 任何元素都可浮动，添加浮动后具有行内块元素相似特性
4. 浮动盒子之间没有缝隙，如果父级宽度装不下多个浮动盒子，多出的盒子会另起一行对齐
5. 多个盒子设置浮动，会按照属性值一行内显示并且顶端对齐

2.4.2清除浮动（清除浮动元素造成的影响）

为什么要清除浮动？由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有高度，最后父级盒子高度为0时，就会影响下面的标准流盒子。（父级没高度，子盒子浮动，影响下面布局）

• 父盒子有高度不用清除浮动

方法：

• 额外标签法：clear:left/right/both

  在最后一个浮动元素末尾添加一个空的标签。例：

  要求这个新的空标签必须是块级元素

• 父级添加overflow属性:overflow:hidden/auto/scroll

• after伪元素：

  .clearfix:after {  
  	content: ""; 
  	display: block; 
  	height: 0; 
  	clear: both; 
  	visibility: hidden;  
  }   
  .clearfix {
  	*zoom: 1;
  }  /*IE6,7专有*/   

• 双伪元素:

  .clearfix:before ,.clearfix:after {
  	content: "";
  	display: table;
  }
  .clearfix:after {
      clear:both;
  }
  .clearfix {
     *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
  }

清除浮动的方式	缺点
额外标签法	添加许多无意义标签，结构化差
父级添加overflow属性	溢出隐藏
父级after伪元素	由于IE6、7不支持：after，兼容性问题
父级双伪元素	由于IE6、7不支持：after，兼容性问题

2.5层定位

2.5.1position属性

• 默认值 static：

  • 没有定位，元素出现在正常的流中
  • top，bottom，left，right，z-index无效

• 相对定位 relative：

  • 相对于其原来位置进行定位
  • top，bottom，left，right，z-index有效
  • 脱离正常文档流中，但其在文档流中原位置依然存在，不脱标
  • 相对定位会压住标准流，或其他浮动盒子

• 绝对定位 absolute：

  • 相对于最近一级有定位的父层进行定位
  • 如果其父层无定位或者无父元素，则将相对于浏览器边框进行定位
  • top，bottom，left，right，z-index有效
  • 脱离正常文档流中，但与 relative 的区别其在文档流中原位置不再存在，脱标

• 固定定位 fixed：

  • 相对于浏览器可视窗口进行定位
  • top，bottom，left，right，z-index有效
  • 不会随浏览器窗口滚动条滚动而变化，脱标
  • 固定定位一定要有宽度

  （固定版心右侧小技巧，下面例子）

  固定定位例子

• 粘性定位 sticky

  粘性定位例子

  • 相对于浏览器可视窗口进行定位
  • 占有原先的位置
  • 必须添加top，bottom，left，right其中一个才有效

2.5.2边偏移

top，bottom，left，right

2.5.3 relative + absolute（子绝父相）

常用父元素relative，子元素absolute，再用top、bottom、left、right相对于父元素来进行偏移定位

2.5.4 定位叠放次序 z-index

定位叠放次序例子

• 数值可正负或0，默认为auto看，数值越大，盒子越上
• 如果属性值相同，则后来居上
• 数字后面不能加单位

2.5.5绝对定位的盒子居中算法

加了绝对定位的盒子不能通过margin：0 auto；水平居中

left 和 margin 配合使用

绝对定位水平垂直居中例子

2.5.6定位的特殊特性

1. 行内元素添加绝对或固定定位，可以直接设置高度和宽度

2. 块级元素添加绝对或固定定位，如果不给宽高，默认大小是内容大小

3. 脱标的盒子不会触发外边距塌陷

   浮动，绝对定位，固定定位元素不会触发外边距合并问题

4. 浮动元素只会压住标准流盒子，不会压住标准流盒子里的文字或图片（文字环绕效果）

   但绝对定位（固定定位）会压住下面标准流所有内容

2.6元素的显示与隐藏

元素显示隐藏例子

2.6.1 display

• display: none;隐藏对象
• display; block;除了转换为块级元素之外，同时有显示元素的意思
  display 隐藏元素之后，不再占有原来的位置

2.6.2 visibility 可见性

• visibility: visible;元素可见

• visibility: hidden;元素隐藏

  visibility 隐藏元素之后，继续占有原来的位置

2.6.3 overflow 溢出

visible 默认状态，不剪切内容也不添加滚动条

hidden 超出部分不可见

scroll 显示滚动条

auto 如果有超出部分，显示滚动条

如果有定位的盒子，慎用overflow: hidden; 因为他会隐藏多余部分

3、CSS3

3.1圆角边框border-radius（盒子四角内切圆或椭圆）

border-rasius:水平值 垂直值(长半轴，短半轴)

• 参数值可为数值或百分比

• 圆

  div{
  	width:50px;
  	height:50px;
  	border:2px solid #ccc
  	border-rasius:25px;
  }

• 左上，右上，右下，左下：border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-right-radius

3.2盒子阴影box-shadow

box-shadow:h-shadow v-shadow blur spread color inset

水平偏移（可负），垂直偏移（可负），模糊距离，阴影大小，颜色，内阴影

注意：

1. 默认是外阴影，但不可写outset，否则阴影无效
2. 盒子阴影不占空间，不影响其他盒子排列

3.3文字阴影text-shadow

text-shadow:h-shadow v-shadow blur color

3.4属性选择器

E[attribute]	选择具有attribute属性的E元素
E[attribute=“value”]	选择具有attribute属性且属性值等于 value 的E元素
E[attribute^=“value”]	选择具有attribute属性且属性值以 value 开头的E元素
E[attribute$=“value”]	选择具有attribute属性且属性值以 value 结尾的E元素
E[attribute=“value”]	选择具有attribute属性且属性值含有 value 的E元素

注意：类选择器、属性选择器、伪类选择器，权重为10

3.5结构伪类选择器

选择符	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type	指定类型E的第 n 个

区别：

1. nth-child 对父元素里面所有孩子排序选择（序号是固定的先找到第n个孩子，然后看看是否和E匹配）
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第几个孩子

nth-child（n）选择某个父元素的一个或多个特定子元素

• n可以是数字，关键字和公式

• n如果是数字，就是选择第n个子元素，里面数字从1开始…

• n可以是关键字：even 偶数，odd 奇数

• n可以是公式：常见公式如下（n都是从0开始）

  公式	取值
  n	全选
  2n	偶数
  2n+1	奇数
  5n	5，10，15···
  n+5	从第5个开始（包含第五个）到最后
  -n+5	前5个（包含第五个）

  奇偶选择器 :nth-child(odd|even)
  ​ 奇数|偶数

  tr:nth-child(odd){
  	background-color:#EAF2D3;
  }

3.6伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before 和after创建一个元素，但属于行内元素
• 新创建的这个元素在文档树中找不到，所以我们称为伪元素
• 语法：element::before{}
• before和after必须有content 属性
• before在父元素内容前面创建元素，after在父元素内容后面插入元素
• 伪元素选择器和标签选择器一样，权重为1

伪元素选择器应用

3.7CSS3 盒子模型

1. box-sizing: content-box 盒子大小为 width + padding + border（默认）
2. box-sizing: border-box 盒子大小为 width

如果盒子模型我们改了box-sizing: border-box，那么padding和border就不会撑大盒子（前提padding加border不能超过width）

3.8图片模糊处理（了解）

filter：函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊

3.9 calc函数（了解）

calc()此CSS函数让你声明CSS属性值时执行一些计算

width:calc(100%-80px);

±*/

3.10 CSS3 过渡（重点）

transition：要过渡的属性 花费时间 运动曲线 何时开始；

transition:width 0.5s,height 0.5s;多个属性用逗号隔开

1. 属性：宽高，背景颜色，内外边距。所有属性变化过度用 all
2. 花费时间：单位秒（必须写单位）比如：0.5s
3. 运动曲线：默认ease（逐渐慢下来）linear（匀速）ease-in（加速）ease-out（减速）ease-in-out（先加速后减速）
4. 何时开始：单位秒，设置延迟触发时间 默认0s

谁做过渡给谁加

div{
    width: 400px;
    height: 200px;
    background-color: pink;
    transition: all 0.5s;
}
div:hover{
    width: 400px;
    height: 200px;
    background-color: skyblue;
}

进度条与过渡练习

3.11 2D转换

3.11.1 移动translate

transform: translate(x,y);
transform: translateX(x);
transform: translateY(y);

重点：

• 定义2D转换中的移动，沿X和Y轴移动元素
• translate最大优点不会影响其他元素的位置
• translate中的百分比单位是相对自身元素的宽高，translate:(50%,50%);
• 对行内标签没有效果

盒子水平垂直居中例子

3.11.2 旋转rotate

transform:rotate(度数);

• rotate里面跟度数，单位是deg比如 rotate(45deg)
• 角度为正，顺时针，负时，逆时针
• 默认旋转中心点是元素中心点

3.11.3 转换中心点 transform-origin

transform-origin: x y;

• 参数x y用空格隔开
• x y默认转换的中心点是元素的中心点（50%，50%）
• 可以给x y设置 像素 或者 方位名词（top bottom left right center）

旋转案例

3.11.4 缩放scale

transform:scale(x,y);

• scale最大优点不会影响其他元素的位置
• 可以设置转换中心点缩放

3.11.5 2D转换综合写法

顺序不能改transform:translate() rotate() scale();

3.12 动画

先定义动画，后调用动画

/* 1.定义动画 */
@keyframes move{
    /* 开始状态 */
    0%{
    transform:translateX(0px);
    }
    /* 结束状态 */
    100%{
    transform: translateX(1000px);
    }
}
/* 使用动画 */
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 2.调用动画 */
    /* 动画名称 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
}

3.12.1 动画序列

• 0%是动画的开始，100%是完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，创建由当前样式逐渐改变为新样式的动画效果
• 动画可改变任意多样式任意多次数
• 用百分比规定变化发生时间，或用 ”from“ 和 ”to“，等同于 0% 和 100%
  • 百分比，keyframe关键帧
  • 总时间划分

动画序列例子

3.12.2 动画常见属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。alternate（反复横跳）
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	动画结束后的状态 默认是 （backwards 回到起始状态）（forwards 结束状态）
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。infinite（无限）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”，还有paused停止

animation: 动画名称(必写) 持续时间(必写) 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

不包含animation-play-state

3.12.3 速度曲线

animation-timing-function：默认ease（逐渐慢下来）linear（匀速）ease-in（加速）ease-out（减速）ease-in-out（先加速后减速）

step() 步长，一段一段显示

3.13 3D 转换

• 近大远小

• 物体后面遮挡看不见

3.13.1 3D移动 translate3d

translate3d(xpx,ypx,zpx); xyz不能省略，没有就写0

translateZ沿Z轴移动，向外移动为正，向里为负

3.13.2 透视

透视写在被观察元素的父盒子上面

perspective，单位px，又称视距（眼睛到屏幕的距离）

translateZ，物体与屏幕距离，值越大我们看到的物体越大

3.13.3D 旋转 rotate3d

可让元素沿 x y z 轴或自定义轴旋转

语法：

transform: rotateX(45deg);

transform: rotateY(45deg);

transform: rotateZ(45deg);

transform: translate3d(x,y,z,deg);

元素旋转方向判断

左手准则：

• 左手拇指指向 x 轴正方向（即右），y 轴同理拇指指向 y 轴正方向（即下）
• 四指弯曲方向则为元素沿 x 轴正向旋转的方向

3.13.4 3D呈现 transfrom-style

• 控制子元素是否开启三维立体环境
• transfrom-style：flat默认子元素不开启3d立体空间
• transfrom-style：preserve-3d；子元素开启立体空间
• 代码给父级，影响子盒子

3D转换-两面翻转盒子

4、网页制作相关内容

4.1类名

• header头部盒子
• logo
• nav导航栏（实际开发中会用 li + a 做导航栏）
• search搜索框
• user个人信息

类名大全

4.2 favicon图标制作（title前的小图标）

1. 制作favicon图标

   找出图标的图片ps切图，用比特虫在线网站将 png 图片转换为 ico 格式

2. favicon图标放在网站根目录下

3. HTML页面引入favicon图标

4.3 网站TDK三大标签SEO优化

1.title 网站标题

title 具有不可替代性，是我们内页第一个重要标签，是搜索引擎了解网页入口和对网页主题归属的最佳判断点

建议：网站名（产品名）—网站介绍（尽量不要超过30个汉字）

例如：京东(JD.COM)-综合网购首选—正品低价、品质保障、配送及时、轻松购物

2.description 网站说明

简要说明网站是做什么的

3.keywords 关键字

6~8个关键词，关键词间用英文逗号隔开

例如：

4.4LOGO SEO 优化

1. logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

2. h1里面再放一个链接，可以返回首页，把logo的背景图片给链接即可。

3. 为了搜索引擎收录我们，我们链接里面放文字（网站名称），但是文字不要显示出来。

   • 方法1：text-indent移到盒子外面（text-indent：-9999px），然后overflow:hidden，淘宝的做法
   • 方法2：直接给font-size:0;就看不到文字了，京东的做法。

4. 最后给链接一个title属性，这样鼠标放在logo上就可以看到提示文字。

5、精灵图

为什么需要精灵图？为了有效减少服务器接收和发送请求的次数提高页面的加载速度 CSS精灵技术，CSS Sprites，CSS雪碧

核心原理：将网页中的小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1. 精灵技术主要针对于小的背景图片使用。就是把多个小背景图片整合到一张大图中
2. 主要借助于背景位置来实现—backgroud-position
3. 一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边是负值，y轴往下为正，往上为负）

backgroud：url(“图片”) no-repeat x y；

6、字体图标

精灵图缺点：

1. 图片文件比较大
2. 图片本身放大缩小会失真
3. 一旦图片制作完毕更换十分复杂

字体图标，展示的是图标，本质是字体

字体图标优点：

• 轻量级：一个字体图标比一系列图像小得多，减少服务器请求
• 灵活性：可随意改变颜色，产生阴影，透明效果，旋转
• 兼容性：几乎支持所有浏览器

注意：字体图标只能做一些简单的小图标，结构和样式复杂的还是用精灵图

使用方法：先将 fonts 文件放到页面目录下面，再用以下代码引入图标，再找到 html 文件，复制所要图标后面对应方框，再给图标声明

font-family：‘icomoon’;（参考百度例子）

7、CSS 三角

CSS三角例子

8、CSS 用户界面样式

8.1 鼠标样式 cursor

属性值	描述
default	小白 默认
pointer	小手
move	移动（十字架）
text	文本
not-allowed	禁止

鼠标样式例子

8.2表单轮廓和防拖拽文本域

表单点击时有一个蓝色边框出现，用以下方法去掉

文本域默认右下角有个东西可以放大或拖动文本域，用以下方法去掉

注意：文本域两个标签放在一行，中间不要有空格，不然光标定上去会有间隔

9、vertical-align 属性应用

用于设置一个元素的垂直对齐方式，只对行内元素或行内块元素有效

vertical-align: baseline | top | middle | bottom

​ 默认基线对齐|顶线对齐|中线对齐|底线对齐

9.1图片、表单和文字对齐

图片、表单属于行内块元素，默认的 vertical-align 是基线对齐。

此时给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐

9.2解决图片底部默认空白缝隙问题

bug : 图片底侧会有空白缝隙，原因是行内块元素会和文字的基线对齐。

解决方法：

1. 给图片添加 vertical-align: top | middle | bottom（推荐）
2. 把图片转换为块级元素 display：block；

10、溢出文字省略号显示

10.1单行文字溢出省略号显示

第一步：white-space：nowrap；如果文字显示不开，也强制一行显示

第二步：overflow：hidden；溢出部分隐藏

第三步：text-overflow：ellipsis；文字溢出时用省略号来显示

10.2多行文字溢出省略号显示

11、常见布局技巧

11.1 margin 负值运用

两个盒子间 1px 的边框

margin-left：-1px；（盒子向左走1px，两个盒子边框重叠）

此时做鼠标经过盒子显示边框，不这样做的话，会有一边被压住

li：hover{
	/*如果盒子没有定位，则添加相对定位即可*/
	position：relative；
	/*如果盒子有定位，则利用z-index提高层级*/
	z-index：1；
}

11.2 文字围绕浮动元素

12、HTML5

12.1 HTML5新增的语义化标签

：头部标签
：导航标签
：内容标签
：定义文档某个领域
：侧边栏标签
：尾部标签

注意：

• 这种语义化标准主要是针对搜索引擎的
• 这些新标签页面中可以使用多次
• 在IE9中，需要把这些元素转换为块级元素
• 其实，我们移动端更喜欢使用这些标签

12.2 HTML5新增多媒体标签

12.2.1 视频

当前 video 元素支持三种视频格式MP4，WebM，Ogg：尽量使用mp4格式

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

语法

//符合大部分浏览器

常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels(像素)	设置宽度
height	pixels(像素)	设置高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频)none(不应加载视频)	规定是否加载视频（如果有了autoplay 就忽略该属性）
src	url	视频url地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

12.2.2音频

目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

语法

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
loop	loop	播放完是否继续播放该视频，循环播放
src	url	视频url地址

12.3 HTML5新增 input 表单

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
color	定义拾色器。
date	定义 date 控件（包括年、月、日，不包括时间）。
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
month	定义 month 和 year 控件（不带时区）。
number	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
search	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
tel	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
time	定义用于输入时间的控件（不带时区）。
url	定义用于输入 URL 的字段。
week	定义 week 和 year 控件（不带时区）。12

12.4 HTML5新增 input 属性

属性	值	描述
required	required	表单内容不能为空
placeholder	提示文本	表单提示信息
autofocus	autofocus	光标定在表单上
autocomplete	on off	浏览器提示之前输入过字段
multiple	multiple	可以多选文件提交

三、移动端布局

1、移动端web开发流式布局

1.1视口

视口（viewport）浏览器显示页面内容的屏幕区域。视口可分为布局视口、视觉视口、理想视口

1.1.1理想视口 ideal viewport

手机屏幕有多宽，布局视口就有多宽

meta标签

1.1.2 meta视口标签

属性	说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximun-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

1.2 二倍图

1.2.1 物理像素&物理像素比

• 物理像素点指屏幕显示的最小颗粒，物理真实存在

• 我们开发时1px不一定等于一个物理像素

• pc端1px等于一个物理像素，移动端不尽相同

• 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

1.2.2 多倍图

使用倍图提高图片质量

img{
    /* 原始图片100*100px */
    width: 50px;
    height: 100px;
}
.box{
    /* 背景原图100*100px */
    background-size: 50px 50px;
}

1.2.2 背景缩放 background-size:宽度 高度；

1. 只写一个参数 肯定是宽度 高度省略 会等比缩放

   background-size:500px;

2. 里面单位可以跟% 相对父盒子而言

   background-size:50%;

3. cover 高度和宽度等比例拉伸 完全覆盖盒子 可能有部分背景图片显示不全

   background-size:cover；

4. contain 高度和宽度等比例拉伸 单高度或宽度铺满盒子，就停止拉伸，可能有部分空白

   background-size:contain；

1.2.3 二倍精灵图

• 在firework里面把精灵图缩放为原来的一半
• 再测量大小 测量坐标
• 注意代码里面background-size也要写：精灵图原来宽度的一半

1.3 移动端技术解决方案

移动端样式初始化 normalize.css

1.4 移动端特殊样式

/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除  设置为transparent  完成透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时弹出菜单 */
img,a{-webkit-touch-callout: none;}

1.5 单独制作移动端页面

1.5.1流式布局（百分比布局）

• 通过设置盒子宽度为百分比来根据屏幕宽度进行伸缩
• max-width：最大宽度（mxa-height 最大高度）
• min-width：最小宽度（min-height 最小高度）

1.6 响应式页面兼容移动端