前端html+CSS基础

一.HTML

1.前言与常用标签

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

Web标准构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

web标准小结

• web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
• 结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
• 理想状态下，他们三层都是独立的， 放到不同的文件里面

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 指定html 语言种类

head 头部. 标题 title 文档标题

标签名	定义	说明
	标题标签	作为标题使用，并且依据重要性递减
	段落标签	可以把 HTML 文档分割为若干段落
	水平线标签	没啥可说的，就是一条线
	换行标签
	div标签	用来布局的，但是现在一行只能放一个div
	span标签	用来布局的，一行上可以放好多个span

标签	显示效果
b或strong	粗体
i或em	斜体
s或del	加删除线
u或ins	加下划线

b 只是加粗 strong 除了可以加粗还有 强调的意思， 语义更强烈。

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的宽度
border	数字	设置图像边框的宽度

**注意: **

1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3. 采取 键值对 的格式 key=“value” 的格式

   ​

链接标签

<a href="跳转的路径">文字或图片</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

快捷键是： ctrl + / 或者 ctrl +shift + /

相对路径

路径分类	符号
同一级路径
下一级路径	“/”
上一级路径	“…/”

锚点定位

1. 使用相应的id名标注跳转目标的位置。 (找目标)

第2集

2. 使用 链接文本创建链接文本（被点击的） （拉关系） 我也有一个姓毕的姥爷..

base标签

1. base 可以设置整体链接的打开状态
2. base 写到 之间
3. 把所有的连接 都默认添加 target="_blank" 在新窗口中打开链接

预格式化文本pre

 标签可定义预格式化的文本。被包围在 
 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

特殊字符

大于号 &gt

小于号 &lt

空格 &nbsp

2.表格table

表格作用：

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表

格式数据

1. table用于定义一个表格标签。
2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
3. td 用于定义表格中的单元格，必须嵌套在标签中。

**总结： **

• 表格的主要目的是用来显示特殊数据的

• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签

• 中只能嵌套 类的单元格
• 标签，他就像一个容器，可以容纳所有的元素

表格属性 重点记住 cellspacing 、 cellpadding

属性名	含义	常用属性值
border	设置表格的边框（border="0"为无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	这是表格在网页中的水平对齐方式	left、center、right

表头单元格标签th

• 作用：
  • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
• 语法：
  • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可

表格标题caption

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption 标签必须紧随 table 标签之后。
3. 这个标签只存在 表格里面才有意义。

合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

合并的顺序我们按照 先上 后下 先左 后右 的顺序

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ：
3. 删除多余的单元格 单元格

3.列表和表单

列表

无序列表ul

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

有序列表ol

1. 列表项1
2. 列表项2
3. 列表项3
4. ......

自定义列表

名词1

名词1解释1

名词1解释2

... 名词2

名词2解释1

名词2解释2

...

标签名	定义	说明
	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	有序标签	里面只能包含li 有顺序， 使用情况较少
	自定义列表	里面有2个兄弟， dt 和 dd

表单

input控件

• input 输入的意思
• <input />标签为单标签
• type属性设置不同的属性值用来指定不同的控件类型
• 除了type属性还有别的属性

type的属性	描述
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式提交按钮
file	文件域

属性	属性值	描述
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

checked="checked"表示就默认选中了

label标签

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

1.第一种用法就是用label直接包括input表单。

用户名：

2.第二种用法 for 属性规定 label 与哪个表单元素绑定

男

textarea文本域

• 语法：

<textarea >
  文本内容
</textarea>

• 作用：

  通过textarea控件可以轻松地创建多行文本输入框.

  cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

select下拉列表

选项1 选项2 选项3 ...

1. <select> 中至少包含一对 option
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

form表单域

各种表单控件

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

二.CSS

1.样式、选择器、文字文本样式

行内样式

<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

内部样式

外部样式

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

选择器 CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

文字文本样式font

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位，谷歌浏览器默认的文字大小为16px，最小为12px
font-family	字体	实际工作中按照团队约定来写字体 p{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}
font-weight	字体粗细	记住加粗是 700 或者 bold ， 不加粗 是 normal 或者 400 记住数字不要跟单位 数值在100-900之间
font-style	字体样式	记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 写法： 选择器 { font: font-style font-weight font-size/line-height font-family;}必须有font-size和font-family属性

css外观属性

属性	表示	注意点
color	颜色	我们通常用 十六进制 比如 而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式 left左对齐(默认);right右对齐;center居中对齐
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em; 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration	文本修饰	记住 添加 下划线 underline ; 取消下划线 none;

复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是**>** .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

伪类选择器

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */
• a:active /* 选定的链接 */

2.display、行高、背景、特性

标签显示模式display

元素模式	元素排列	设置样式	默认宽度	包含
块级元素block	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素inline	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素inline-block	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;

行高line-height

• 如果 行高 等 高度 文字会 垂直居中
• 如果行高 大于 高度 文字会 偏下
• 如果行高小于高度 文字会 偏上

CSS 背景(background)

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码 语法：background-color:颜色值; 默认的值是 transparent 透明的
background-image	背景图片	url(图片路径)， none(无背景图，默认的) background-image : none | url (url)
background-repeat	是否平铺	repeat 背景图像在纵向和横向上平铺（默认的） /no-repeat 不平铺 /repeat-x 在横向上平铺/repeat-y 在纵向平铺
background-position	背景位置	length(百分比,长度值)/position(方位名词 : top | center | bottom | left | center | right) 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll(随对象内容滚动) / fixed(背景图像固定)
背景简写	更简单	background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值，最后一个参数是alpha 透明度 取值范围 0~1之间，低于 ie9 的版本是不支持的

CSS层叠性

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
• 样式不冲突，不会层叠

CSS继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。

CSS优先级 权重

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3.盒子模型

• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

盒子边框border

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

综合写法border : border-width || border-style || border-color

​ border: 1px solid red; 没有顺序

表格的细线边框border-collapse:collapse

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

• 但是两个单元格之间的边框会出现重叠，从而使边框变粗

• 通过css属性：

  table{ border-collapse:collapse; }  
  

  • collapse 单词是合并的意思
  • border-collapse:collapse; 表示相邻边框合并在一起。

  ​

内边距padding

1. 添加了内边距，内容和边框 有了距离。
2. 盒子会变大了(解决办法：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小)

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距 左右内边距 ；
3个值	padding：上内边距 左右内边距 下内边距；
4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

外边距（margin）

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离，和padding类似。

margin可以让一个块级盒子实现水平居中必须：

• 盒子必须指定了宽度（width）
• 然后就给左右的外边距都设置为auto，语法： margin:auto;或margin: 0 auto;

清除元素的默认内外边距

{
padding:0; / 清除内边距 /
margin:0; / 清除外边距 */
}

外边距合并

1.相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
• 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

2.嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者

解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden。
4. 还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。

圆角边框border-radius(CSS3)

语法：border-radius:length; 让正方形length=50%则为圆形 ， 对于长方形设置为高度的一半

盒子阴影box-shadow(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

4.浮动、书写顺序

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是

普通流（标准流:块级元素，行内元素，行内块元素）

浮动 (让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行)

定位(将盒子定在某一个位置 自由的漂浮在其他盒子的上面)

在 CSS 中，通过 float 中文， 浮 漏 特 属性定义浮动，语法如下：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

float —— 浮漏特

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

清除浮动

父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

1.使用after伪元素清除浮动

.clearfix:after { content: “”; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {zoom: 1;} / IE6、7 专有 */

2.使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

CSS属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

5.定位

定位也是用来布局的，它有两部分组成：定位=定位模式+边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

定位模式 (position) 语法：选择器 { position: 属性值; }

定位模式(position)	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

子绝父相 —— 子级是绝对定位，父级要用相对定位。

绝对定位的盒子居中

position:relative;

top:50%;

left:50%;

transform: translate(-50%,-50%);

堆叠顺序（z-index）

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

6.css高级技巧

透明度

opacity:0~1;

元素的显示与隐藏

display 显示

• display 设置或检索对象是否及如何显示。

  display: none 隐藏对象
  
  display：block 除了转换为块级元素之外，同时还有显示元素的意思。
  

• 特点： 隐藏之后，不再保留位置。

visibility 可见性

• 设置或检索是否显示对象。

  visibility：visible ; 　对象可视
  
  visibility：hidden; 　  对象隐藏
  

• 特点： 隐藏之后，继续保留原有位置。

overflow 溢出

• 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

三者关系比较

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

鼠标样式cursor

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

轮廓线 outline

语法：outline: none;

防止拖拽文本域resize

语法：

vertical-align垂直对齐

让文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素

语法：vertical-align : baseline |top |middle |bottom

图片、表单和文字对齐

语法：vertical-align : middle

去除图片底侧空白缝隙

• 原因：

  图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

  就是图片底侧会有一个空白缝隙。

• 解决的方法就是：

  • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

溢出的文字省略号显示

1. 先强制一行内显示文本

   white-space: nowrap;

2. 超出的部分隐藏

   overflow: hidden;

3. 文字用省略号替代溢出的部分

   text-overflow: ellipsis;

精灵技术

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

1. 精确测量，每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

滑动门

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css样式

*{

padding:0;
margin:0;

}
body{

background: url(images/wx.jpg) repeat-x;

}
.father {

padding-top:20px;

}
li {

padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0  10px;
background: url(./images/to.png) no-repeat left ;

}
a {

padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;

}
li:hover,
li:hover a {

background-image:url(./images/ao.png);

}

总结：

1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。

CSS三角形

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

阻止链接跳转

需要给href添加 javascript:void(0); 或者 javascript:;

7.练习

网站ico图标

1.使用ico图标

• 首先把favicon.ico 这个图标放到根目录下。

• 再html里面， head 之间 引入 代码。

2.制作ico图标

我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。

方法步骤：

• 首先把我们想要的切成图片。
• 要把图片转换为 ico 图标，我们借助于第三方转换网站： http://www.bitbug.net/。 比特虫

总结：

代码：  <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>     

注意：

1. 她（它）是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片
3. 位置是放到 head 标签中间。
4. 后面的type=“image/x-icon” 属性可以省略。（我相信你也愿意省略。）
5. 为了兼容性，请将favicon.ico 这个图标放到根目录下。

网站优化三大标签

1.网页title 标题

一般不超过28个中文，最先出现的词语权重高，主关键词出现3次，辅关键词出现1次

2.Description 网站说明

品优购网：

<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

注意点：

1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。
2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
3. 补充在 title 和 keywords 中未能充分表述的说明.
4. 用英文逗号 关键词1,关键词2

3.Keywords 关键字

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

品优购网：

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />

字体图标iconfont

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器

UI设计人员给我们svg文件，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

​ 推荐网站： http://icomoon.io

• icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

给盒子使用字体

span {
		font-family: "icomoon";
	}

过渡transition

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

语法格式:

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

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

运动曲线 默认是 ease 匀速:lineaar 逐渐慢下来:ease 加速:ease-in 减速:ease-out 先加后减速:ease-in-out

获得焦点元素

:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素

:hover

8.命令行、gulp

命令行

• 盘符： 就可以进入某个盘符

• dir 列出目录中的所有文件

• cd 切换文件夹(目录)

  • cd 目录名 可以进入指定目录，目录名可以是绝对路径也可以是相对路径
  • cd …/ 返回上一层目录
    • cd ./ 当前目录
    • cd / 返回根目录（盘符下）

• md/mkdir 创建文件夹

• rd/rmdir 删除文件夹

  • rd newdir 删除目录，如果目录中有其它内容会提示目录不是空的
  • rd /S newdir 删除目录，如果目录中有其它内容会提示newdir, 是否确认(Y/N)?，输入Y按回车删除
  • rd /S /Q newdir 静默删除目录，如果目录中有其它内容，不提示直接删除(此操作危险)

• 创建文件

  • cd./>文件 比如 cd./>index.html 这样就可以创建一个html页面

• 删除文件

  • del 文件名 比如 del index.html

  ​

小技巧

• 自动补全

  • 在敲出文件/目录前几个字母后，按下tab键
    • 如果有以这前几个字母开头的文件/目录，系统会自动补全
    • 如果补全的文件/目录不是想要的可以继续按tab键，切换到下一个文件/目录，知道找到想要的为止

• 曾经使用过的命令

  • 按上/下光标键可以在曾经使用过的命令间来回切换
  • 如果不想执行当前的命令可以按ctrl + c 中断r

• cls 清屏 （CLear Screen）

• exit 退出

• 快捷键 ctrl + c 终止当前操作

• notepad 记事本

• calc 计算器

gulp

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。

• 自动压缩代码
• 自动打包、代码检查
• 打开浏览器，并监视源码变化实时刷新
• 部署到线上服务器

安装

• 安装node.js

  https://nodejs.org/

  检测node 是否安装成功

   node -v

• 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测安装cnpm 是否成功

    cnpm -v

• 安装gulp

  gulp中文网

  gulp官网

  # 全局安装
  cnpm install  gulp -g
  

  检测安装成功 gulp

​ gulp -v

本地环境搭建体验

以下内容首先打开命令行，然后切换到项目的根目录，输入以下命令并运行

• 初始化

  # 在当前目录自动生成一个package.json文件
  cnpm init -y
  

• 安装插件

  # 当前项目中安装gulp
  cnpm install gulp --save-dev
  # 压缩html的插件
  cnpm install gulp-htmlmin --save-dev
  # 压缩css的插件
  cnpm install gulp-cssmin --save-dev
  # 自动打开浏览器，并实时刷新插件(浏览器同步测试工具)
  cnpm install browser-sync --save-dev
  

• 配置文件

  在当前项目的根目录中创建一个gulpfile.js文件，如链接中文件

  gulpfile.js

  ​

演示自动化构建

# 自动化压缩和复制文件到发布目录dist
gulp build
# 开启测试用的服务器
gulp dev