入坑前须要了解的知识点

可以说出网页的基本组成

前端的工做是开发网页，那什么是网页呢？
- 网站是指的因特网上根据必定规则，使用HTML等制做的，用于展现特定内容相关的网页集合。
- 网页是网站中的一页，一般是HTML格式的文件，它要经过浏览器来阅读。
- 网页是构成网站的基本元素，它一般由图片、连接、文字、声音、视频等元素组成，一般咱们看到的网页常以.htm或.html后缀结尾的文件,所以将其俗称为HTML文件。
什么是HTML？
- HTML指的是超文本语言，他是用来描述网页的一种语言
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- 所谓的超文本有两层含义
  - 它能够加入图片、声音、视频、动画、多媒体等内容（超越了文本限制）
  - 它能够从一个文件跳转到另外一个文件，与世界各地主机的文件连接
网页的造成?
- 网页是由网页元素组成的，这些元素是利用HTML标签描述出来的，而后经过浏览器解析来显示给用户。
网页总结
- 网页是由图片、视频、文本、音频等元素组成的，其实就是一个HTML文件
- 网页生成制做，有前端人员进行书写HTML文件，而后用浏览器打开解析渲染，最终咱们就能看见网页了。

可以说出经常使用的浏览器

浏览器是网页显示、运行的平台，经常使用的浏览器有IE、火狐（Firefox）、谷歌(Chrome)、Safari和Poera，平称五大浏览器。
浏览器内核（渲染引擎）：负责网页内容、整理讯息、计算网页显示方式并显示网页。

浏览器	内核	备注
IE	Trident	IE、百度
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
chrome/Opera	Blink	谷歌和跑欧朋浏览器内核，其实Blink是Webkit的分支

可以说出Web标准的三大组成部分

Web标准是由W3C组织和其余标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。

为何须要Web标准？
- 浏览器不一样，他们显示页面或者排版就会有些许差别。开发者经常须要为多版本的开发而艰苦的工做。
- 遵顼Web标准除了可让不一样的开发人员写出的页面更加标准，更统一外，还有一下的优势。
  - 让Web的发展前景变得更广阔
  - 内容能被更普遍的设备访问
  - 更容易被搜索引擎搜索
  - 减低网站流量费用
  - 使网站更容易维护
  - 提升页面的浏览速度
Web标准的构成。
- 主要包括结构、表现和行为三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、字体等外观样式，主要是指css
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

HTML标签

说出HTML标签的书写注意规范

HTML的语法规范

基本语法概述
- HTML标签是由尖括号包围的关键词，例如<html>
- HTML一般是成对出现的，例如<html></html>,咱们称为双标签。标签中的第一个标签咱们称为开始标签，第二标签是结束标签。
- 有些特殊的标签必须是单标签（极少数状况下），例如<br />，咱们称为单标签。

标签的关系

双标签的关系能够分为包含关系和并列关系。

包含关系
<head>
    <title></title>
</head>
并列关系
<p></p>
<div></div>
复制代码

HTML基本结构标签

第一个HTML网页
- 每个网页都会有一个基本的结构标签（也成为骨架标签），页面内容也是在这些基本标签上书写，HTML页面也称为HTML文档
```
骨架标签
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        存放内容
    </body>
<html/>
复制代码
```
- html是页面中最大的标签，咱们称为跟标签
- 文档头部，注意在head中咱们必需要设置的标签是title标签
- 文档的标题，让页面有一个属于本身的网页标签
- 文档主体，元素包含文档的全部内容，页面内容基本都是放在body里面。

HTML经常使用标签

文档类型声明标签
- <!DOCTYPE html>文档类型声明标签，做用就是告诉他们浏览器使用哪一种HTML版原本显示网页。这句话的意思是，当前页面采起的是HTML的页面来显示的。
- <!DOCTYPE>声明位于文档中最前面的位置，处于html标签以前。
- <!DOCTYPE>不是一个HTML标签，它只是文档类型声明标签。
<html lang = en >,lang用来定义当前文档显示的语言
- en定义语言种类为英文
- zh-CN定义语言种类为中文
- fr定义语言种类为法语
- 简单来讲就是en为英文文档，zh-CN就是中文文档，可是这两个并不影响显示英文或者中文，这个属性对浏览器是有做用的，翻译功能的切换。
<meta chartset = 'UTF-8' />字符集，字符集是多个字符的集合，以便计算机可以识别和存储各种文字，在head标签内，能够经过meta标签的chartset属性来规定HTML文档应该使用哪一种字符编码。
- chartset经常使用的值有：GB2312（简体中文）、BIG5（繁体中文）、GBK（简繁体）和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界全部国家须要用到的字符。
- meta标签规定的字符集是必需要写的，不然可能引发乱码的状况，通常状况下统一使用UTF-8，尽可能携程标准的UTF-8，不要写成utf-8或UTF8
标题标签<h1>-<h6>
段落标签和换行标签
- 在网页中，要把文字有条理的显示出来，就须要将这些文字分段显示。在HTML标签中，
  标签用于定义段落，它能够将网页分红若干个段落。css
- 若须要文本强制换行显示，可使用换行标签
文本格式化标签
- 在网页中，有时须要为文本设置粗体、斜体和下划线等效果，使文本以特殊的方式显示。

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	推荐使用`<strong>`标签，语义更强烈
倾斜	`<em></em>或<i></i>`	推荐使用`<em>`，语义更强烈
删除线	`<del></del>`或`<s></s>`	推荐使用`<del>`,语义更强烈
下划线	`<ins></ins>或<u><u>`	推荐使用`<ins>`,语义更强烈

<div>和<span>标签 ,<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
图像标签介绍
- 标签介绍<img src='图像路径URL' />

属性	属性值	说明
src	图片路径	必须属性，图像路径
alt	文本	在图像不能成功加载时，显示
title	文本	提示文本，鼠标移到图片上时，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框线的粗细

超连接<a />标签，做用是从一个页面到另外一个页面，既能够跳转外部连接，也能够跳转至内部连接，例如，两个属性的做用以下
- 连接分类
  - 外部连接<a href="跳转目标url" target="目标窗口的弹出方式"></a>
  - 内部连接<a herf="index.html">跳至首页</a>
  - 空链接<a herf="#">空连接</a>
  - 下载连接<a herf="img.zip">下载</a>若是href里面地址是一个文件或压缩包则会下载这个文件
  - 网页元素的连接<a herf="http://www.baidu.com"><img src="img.png" /></a>点击这个图片元素就会跳转到百度首页，文本、图片、视频、音频等均可以加
  - 锚点连接，点击咱们的连接，能够快速定位到页面中的某一个位置。用法：第一步，在连接href中设置属性值为#+名字，例如<a href="#one">第一季</a>;第二步，找到目标位置标签，在里面添加一个id属性= 刚刚设置的名字，如<h3 id='two'>第二季介绍</h3>

属性	做用
href	用于超连接目标的url，必须属性
target	用于指定连接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开

特殊字符

在HTML页面中，一些特俗的符号很难或者不方便直接使用，此时咱们就可使用下面的字符来替代

特殊符号	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
°	摄氏度	`°`
×	乘号	`×`
÷	除号	`÷`
²	平方2上标	`²`
³	立方3上标	`³`
©	版权	`&copr;`
®	注册商标	`®`

表格标签

表格的做用；主要用于显示、展现数据；它可让数据展现的很是规整。
表格的基本语法

<table>
    <thead>
          <tr>
                <th></th>
           </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
复制代码

<table></table>用于定义表格的标签;为了更好的表示表格的语义化，能够将表格分为表格头部和表格主体两大部分。<thead>表示表格头部部分，<tbody>表明表格主体部分；<tr></tr>行标签；<th></th>标题标签,<td></td>单元格的标签
经常使用的表格属性

属性名	属性值	描述
align	left、right、center	规定表格相对周围元素的对齐方式
border	一、""	规定表格是否有边框，默认为""，表示没有边框
width	像素或者百分比	规定表格的宽度
cellpadding	像素值	规定单元格边缘border和内容之间的距离，默认是1像素
cellspacing	像素值	规定单元格之间的距离，默认是2像素
height	像素	规定单元格的高度

合并表格的单元格
- 合并表格的方式
  - 跨行合并:rowspan = "合并行单元格的个数"
  - 跨列合并:colspan= "合并列的单元格个数"

列表标签

无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
自定义列表

<dl>
    <dt>名词</dt>
    <dd>名词解释</dd>
</dl>
复制代码

在HTML标签中<dl>标签用于定义描述列表或（定义列表）,该标签会与<dt>(定义项目/名字)和<dd>（描述每个项目/名字）一块儿使用。
列表总结

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含li，没有顺序，使用较多，li里能够包含任何标签
`<ol></ol>`	有序列表	里面只能包含li，有顺序，使用相对较少，li里面能够包含任何标签
`<dl></dl>`	自定义列表	里面只能包含dt和dd，dt和dd里面能够包含任何标签

表单标签

表单标签的目的是为了收集用户的信息，在HTML中，一个完整的表单一般由表单域、表单控件(也成为表单元素)和提示信息3个部分组成。

在HTML中，<form>标签会定义表单域，以实现用户信息的收集和传递。<form>表单会把它范围内的表单元素信息提交给服务器。

<form action="utl地址" method="提交方式" name="表单域名称">
    各类表单控件
</form>
复制代码

表单经常使用属性以下

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

表单控件（表单元素）
- input输入表单元素，用于手机用户信息，其中包含了type属性，输入不一样的字段能够拥有不少形式的控件类型（能够是文本输入框、复选框、单选按钮、按钮）；
  - type属性的属性值以下

属性值	描述
button	定义能够点击的按钮
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的全部数据
submit	定义提交按钮，提交按钮会把表单数据提交到服务器
text	定义单行的输入字段，用户能够在其中输入字段

input标签中的经常使用属性

属性	属性值	描述
name	由用户定义	定义input元素的名称，在定义单选按钮和复选框时，必须给input表单控件添加同样的name值
value	由用户定义	规定input元素的值
checked	checked	规定input元素首次加载时应被选中
maxlength	正整数	规定输入字段中的字符的最大长度

<lable>标签为input元素定义标注（标签）;当点击lable标签时，input标签鼠标会自动聚焦；语法以下

<label for="sex">男</label>
<input id="sex" type="radio" name="sex" />
核心：input中的id属性值等于for属性值。
复制代码

select下拉表单元素，语法以下
- select中必须包含至少一个option标签
- option标签中的selected属性 = "selected"时，表示当前项默认选中

<form>
<select>
    <option selected="selected" value="one">选项一</option>
    <option value="two">选项二</option>
</select>
<form>
//选中选项一时，返回值是one，选中选项二时，返回值是two
复制代码

textarea表单元素,用于输入较多的多行文本。语法以下

<form>
    <textare>
        文本
    </textarea>
</form>
复制代码

相对路径的三种形式

路径介绍

相对路径	符号	说明
同一级路径		图像文件位于HTML文件同一级
下一级路径	/	图像位于HTML文件的下一级
上一级路径	../	图像位于HTML文件的上一级

绝对路径：是指目录下的绝对路径，直接到达目标位置，一般是从盘符开始的路径，例如，"D:\web\logo.png"或完整的网络地址，"www.baidu.com/images/logo…"

CSS层叠样式表

css的简介

css是层叠样式表的简称，主要使用场景就是美化网页、页面布局的，css是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

css语法规范

css规则主要由两个部分构成：选择器以及一条或者多条声明
- 选择器是用于指定css样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值是以键值对的形式出现，属性是对指定的对象设置的样式属性；例如文本大小、字体颜色；属性和属性值之间用英文的:分开，多个属性之间用英文的;分开。

css代码风格
- 样式格式书写;建议使用第二种格式更加的直观。
  - 紧凑格式
```
h3 { color: red; font-size: 16px }
复制代码
```
  - 展开格式
```
h3 {
    color: red;
    font-size: 16px;
}
复制代码
```
- 样式大小写，建议使用第二种。
  - 大写
```
h3 {
    COLOR: RED;
}
复制代码
```
  - 小写
```
h3 {
    color: red;
}
复制代码
```
- 空格规范
  - 属性值的前面，冒号的后面，保留一个空格
  - 在选择器和大括号之间留有一个空格
```
h3 {
    color: red;
}
复制代码
```

CSS选择器

css基础选择器

选择器的做用是根据不一样的需求把不一样的标签选择出来，就是选择标签用的。
在css中，能够根据选择器的类型把选择器分为基础选择器和符合选择器，符合选择器就是创建在基础选择器之上，对基本选择器进行组合造成。
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
- 标签选择器指的用HTML做为选择器，按标签名称分类，为页面中的某一种标签指定统一的css样式。
- 类选择器是当咱们想要差别化选择不一样的标签，单独选一个或者几个标签，能够选择类选择器。
- id选择器能够为标有特定id选择器的HTML元素指定特定的样式,HTML中的id属性不容许有相同的属性值，不能重复。
- 通配符选择器使用*定义，他表示选中页面中的全部元素。
  - 代码以下
```
h3 {
    color: red;
}
.class {
    color: pink;
}
#id {
    color: black;
}
* {
    padding: 0;
}
复制代码
```
类命名规则以下

类命	对应的结构类名
header	头部
content/container	内容
footer	尾部
nav	导航栏
sidebar	侧栏
column	栏目
left/center/right	左中右
loginbar	登录条
logo	标志
banner	广告
main	页面主体
hot	页面热点
news	新闻
download	下载
subnav	子导航
menu	菜单
submenu	子菜单
## CSS字体属性

css使用font-family属性定义文本的字体系列

p {
    font-family: "微软雅黑",Arial;
}
div {
    font-family: "Microsoft Yahei";
}
复制代码

各类字体之间必须使用英文的逗号分隔开。
通常状况下，多个单词组成的字体须要在单词之间用间隔分隔开，而且用英文的引号包含单词组。
尽可能使用系统默认自带的字体，保证在任何浏览器中都能正常的显示。
多个字体的，浏览器会由左到右优先显示，若是第一个字体没有，则显示下一个；以此类推。

css的复合选择器

复合选择器能够更准确、更高效的选择目标元素，复合选择器由两个或者多个基础选择器，经过同的方式组合而成；一般的复合选择器包括：后代选择器、子元素选择器、并集选择器、伪类选择器等等。

后代选择器

后代选择器又称为包含选择器，能够选择父元素里面的子元素，语法就是外层标签写在前面，内城标签写在后面，中间用空格分隔，内层标签为外层标签的后代。

div p {
    color: red;
}
复制代码

子元素选择器（子选择器）

子元素选择器(子选择器)只能选择做为某元素的最近一级子元素，简单李健就是只能选亲儿子元素。样式设置孙子及孙子如下是不会生效的。
语法是外层元素>内层亲儿子元素

<div class="ins">
        <p>
            你好
        </p>
        <div>
            <p>换行</p>
        </div>
</div>

.ins>p {
    color:red;
}
复制代码

并集选择器

并集选择器能够选择多组标签，同时为他们定义相同的样式，一般用于集体声明。
语法；并集选择器是各选择器经过英文的,链接而成，任何形式的选择器均可以做为并集选择器的一部分。

div>p,ul>li {
    color: red;
}
复制代码

伪类选择器

伪类选择器用于向耨写选择器添加特俗的效果，好比给链接添加特殊效果、或选择第一个，第n个元素；伪类选择器最大的特色是用冒号 :表示，好比:hover、:first-child。
连接伪类选择器 -a:link；选择全部未被访问的连接。
- a:visited；选择全部已被访问的连接。
- a:hover;选择鼠标移上的连接。
- a:active；选择活动连接(鼠标按下未弹起的连接)
连接伪类选择器注意事项
- 为了确保生效，请按照LVHA的顺序声明::link,:visited,:hover,:active。口诀也能够用love hate来记。
:focus伪类选择器；获取鼠标光标的表单

input:focus {
    background: red;
}
复制代码

css字体属性

css字体大小

css使用font-size属性定义字体大小

p {
    font-size: 16px;
}
复制代码

px（像素）是咱们网页最经常使用的单位。
谷歌浏览器的文字默认大小为16px。
不一样的浏览器，可能默认的字号大小不同，咱们给body设置一个默认的大小。例如body { font-size: 16px}

css字体粗细

css使用font-weight属性设置文本字体的粗细。

p {
    font-weight: bold;
}
复制代码

font-weight经常使用的属性值

属性值	描述
normal	默认值（不加粗）
bold	加粗
100-900	400等于normal，而700等同于bold，注意数字后面不能加符号
## css文本属性
### css文本装饰

text-decoration属性规定添加到文本的修饰，能够给文本添加下划线、上划线、删除线等

p {
    text-decoration: underline;
}
复制代码

属性值	描述
none	没有装饰线，默认值
underline	下划线
overline	上划线
line-through	删除线

css文本缩进

text-indent属性用来指定文本第一行的缩进，一般是将段落的首行缩进。

p {
    p {
        text-indent: 15px;
    }
    div {
        text-indent: 2em;
    }
}
// em是一个相对单位，就是当前元素1个中文文字的大小。
复制代码

行间距

line-height属性用于设置行间的距离，能够控制文字与行之间的距离

css文本属性总结

属性	表示	注意点
color	文本颜色	咱们一般用十六进制好比#ffffff
text-align	文本对齐	能够设定文字水平对齐方式
text-indent	文本缩进	一般用于段落首行缩进2个字的距离
text-decoration	文本修饰	添加下划线为underline，取消下划线为none，删除线为line-through
line-heigt	行间距	用于设置行与行之间的距离

css的引入方式

css的三种样式表

行内样式表（行内式）,是在元素标签内部的style属性中设置css样式，适合简单的样式。

<div style="color:red;font-size:25px"></div> 复制代码

内部样式表（嵌入式），是写在html内部，将全部的css单独放到一个style里面。

<style>
    div {
        color: red;
    }
</style>
复制代码

外部样式表（外链式）;实际开发都是外部样式表，适合样式比较多的状况，核心是样式单独写到css文件中，以后把css文件引入HTML页面中。

<link rel="stylesheet" href="home.css">
复制代码

css引入方式总结

样式表	优势	缺点	使用状况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式分离	没有完全分离	较多	控制一个页面
外部样式表	完成是心啊结构和样式相分离	须要引入	最多、吐血推荐	可控制多个页面

css的元素显示模式

块级元素

常见的块级元素<h1>~<h6>、<p>、<div>、<ul>、<li>等。
块级元素的特色
- 比较霸道，独占一行。
- 高度、宽度、外边距、以及内边距均可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子，里面能够放行内元素或者块级元素。
注意事项
- 文字类的元素内不能使用块级元素。
- <p>标签主要用于存放文字，所以<p>里面不能放块级元素，特别是<div>。
  - 同理<h1>~<h6>也是文字标签，里面也不能放块级元素。

行内元素

常见的行内元素：<a>、<strong>、<b>、<i>、<del>、<s>、<ins>、<u>、<span>等。
行内元素的特色
- 相邻的行内元素在一行上，一行能够显示多个。
- 高、宽直接设置是无效的。
- 默认的宽度就是它自己内容的宽度。
- 行内元素只能容纳文本或者其余行内元素。
注意事项
- 连接里面不能再放连接
- 特殊状况连接<a>里面能够放在块级元素,可是给<a>转换成块级元素最安全。

行内块元素

在行内元素中有几个特殊的标签<img>、<input>、`。他们同时具备块级元素和行内元素的特色。
行内块元素的特色
- 和相邻的行内块元素及行内元素在一行上，可是他们之间会有空白间隙。一行能够显示多个。
- 默认宽度就是它自己内容的宽度。
- 宽高、行高、内外边距能够直接设置。

css的三大特性

层叠性

相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另外一个冲突样式。

继承性

css继承性，子标签会继承父标签的某些样式，如文本颜色字号。
- 子元素能够继承父元素的样式（text-、font-、line-）等这些开头的均可以继承，以及color
- 行高的继承性，语法以下
```
body {
    font:12px/15px;
} 
div {
    font:14/1.5;
}
复制代码
```
- 注意：
  - 行高能够跟单位也能够不跟单位。
  - 若是子元素没有设置行高，则会继承父元素的行高的1.5倍。
  - 没有单位的写法，行高是当前字体大小的1.5倍。第二种写法的优点是子元素能够根据本身文字大小调整行高。

优先级

选择器相同，则执行层叠性（覆盖）
选择器不一样，则根据选择器的权重执行。选择器权重以下表

选择器	选择器权重
继承或者`*`	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式	1，0，0，0
!important	无穷大

css背景图片

背景图片的复合写法
- background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置。
背景色半透明
- background:rgba(0,0,0,.3)
- 注意：背景半透明不会影响到内容。这是css3新增的属性，是IE9+版本浏览器才支持。

css盒子模型

页面布局三大核心，盒子模型、浮动和定位。

css浮动

清除浮动的方法
- 额外标签法(隔墙法)；额外标签法在浮动元素的末尾添加一个空标签，例如<div style="clear:both"></div>html
  - 优势：通俗易懂，书写方便。
  - 缺点：添加许多无心义的标签，结构较差。
  - 注意：添加的新标签必须是块级元素，不然不能清除浮动的影响。
- 父元素添加overflow属性，属性值为hidden、auto、scroll均可以。前端
  - 优势：代码简洁。
  - 缺点：没法显示溢出的部分。
- :after伪元素法，给父级元素添加。node
  - 优势：没有增长标签，结构更简单。
  - 照顾低版本浏览器。
```
.clearfix:after {
        content:'';
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
   .clearfix {
        //IE6 7 专有
        *zoom:1;
    }
复制代码
```
- 双伪元素清除元素，也是为父元素添加。css3
  - 优势：代码更简洁。
  - 缺点：照顾低版本浏览器。
```
.clearfix:before,.clearfix:after {
    content:'';
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
复制代码
```

核心阴影

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

值	描述
h-shadow	必需，水平阴影位置，容许负值。
v-shadow	必需，垂直阴影位置，容许负值。
blur	可选，模糊距离。
spread	可选，阴影尺寸大小。
color	可选，阴影的颜色。
inset	可选，将外阴影改成内阴影。

css书写顺序

布局定位属性：display、position、float、clear、visibility、overflow
自身属性：width、height、margin、padding、border、background
文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word
其余属性：content、cursor、border-radius、box-shadow、text-shadow等等。

css定位

相对定位relative（重要）
- 相对定位的特色
  - 他是相对于本身原来的位置来移动的。（移动位置的时候参照点是本身原来的位置）
  - 原来在标准的位置继续占有，后面的盒子仍然以标准流的方式来对待它。（不脱离文档流，继续保留原来的位置），它最典型的应用是给绝对定位当爹的。
绝对定位absolute，绝对定位是元素在移动位置的时候，是相对于他的祖先元素
- 绝对定位的特色
  - 若是没有祖先元素或祖先元素没有定位，则以浏览器为准定位。
  - 若是祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。
  - 绝对定位不在占有原先的位置，脱离文档流。
固定定位fixed，固定于浏览器可视区域的位置。在浏览器页面滚动时元素的位置不会改变。
粘性定位sticky，粘性定位能够被认为时相对定位和固定定位的混合
- 语法： div {position: ticky;top: 10px;}
- 特色：
  - 以浏览器的可视窗口为参照点移动元素(固定定位的特色)。
  - 粘性定位是占有原先的位置（相对定位的特色）。
  - 必须添加top、bottom、left、right其中的一个才会有效。
定位的拓展
- 绝对定位的盒子水平垂直居中
```
//定宽高
div {
    width:200px;
    height:200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50%;
}
//不定宽高
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
复制代码
```
- 定位的特殊性
  - 行内元素添加绝对定位或者固定定位，能够直接设置高度和宽度。浮动也是同样。
  - 块级元素添加绝对或者固定定位，若是不给宽度或者高度，默认大小是内容的大小。
  - 绝对定位和固定定位会完成压住盒子和文字，可是浮动不会压住文字，浮动产生最初的目的就是为了实现文字环绕的效果。给图片添加一个浮动，就会产生文字环绕效果。

定位模式	是否脱标（脱离文档流）	参照点
static静态定位	否（占有位置）	不能使用边偏移
relative相对定位	否（占有位置）	相对于自身位置偏移
position绝对定位	是（不占有位置）	带有定位的父级元素
fixed固定定位	是（不占有位置）	浏览器可视区
sticky粘性定位	否（占有位置）	浏览器可视区

精灵图

精灵技术的目的：为了有效的减小服务器接受和发送请求的次数，提升页面的加载速度。
精灵图主要是针对背景图片使用，就是把多个小背景图片整合到一张大图片中。这个大图片咱们称为sprites 精灵图或者雪碧图。
使用精灵图的核心：移动背景图片的位置，此时可使用background-position，移动雪碧图到对应的位置便可。
精灵图的缺点：
- 图片文件仍是比较大的。
- 图片自己放大缩小会失真。
- 一旦图片制做完毕，想要更换很是的发杂。因而便出现了一种技术，就是字体图标iconfont

字体图标

字体图标展现的是图标，可是本质属于字体。
字体图标的优势
- 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会立刻渲染出来，减小服务器的请求。
- 灵活性：本质实际上是文字，能够很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持全部的浏览器，请放心使用。
- 注意：字体图标并不能替代精灵技术，只是对工做中的图标部分技术的提高和优化。

css用户界面样式

鼠标样式cursor

属性值	描述
default	默认
pointer	小手
move	移动十字架
not-allowed	禁止

轮廓线outline

给表单添加outline:0或者outline:none；样式以后就能够去掉默认input表单点击后的蓝色边框线。

input {outline: none;}web

若是须要点击之后改变input表单的边框线代码以下

input:focus {
    border: 1px solid red;
}
复制代码

防止拖拽文本域resize

<textarea> 你好</textarea>

textarea {
    resize: none;
}
复制代码

vertical-align属性的应用

css的vertical-align属性使用场景；常常用于设置图片或者表单（行内块元素）和文字垂直对齐。可是它只对于行内块素或者行内元素有效。

vertical-align: baseline | top | middle | bottomchrome

值	描述
baseline	默认。元素位置放在父级的基线上
top	把元素的顶端与行中最高的元素的顶端对齐
middle	把此元素的位置放置在父元素的中部
bottom	把元素的底端与行中最低的元素的底端对齐

解决图片底部默认空白缝隙的问题
- 出现这个问题的缘由是：图片底部会有一个空白间隙，缘由是行内块元素和文字的基线对齐。主要解决办法有两种
  - 给图片添加vertical-align:middle|top|bottom（提倡使用的）。
  - 给图片转换成块级元素，display:block。

文字溢出省略号显示

// 单行文本溢出省略号显示

//1、先强制一行内显示文本
white-space: nowrap;(默认normal，自动换行)
//2、超出部分隐藏
overflow: hidden;
//3、文字用省略号替代超出部分
text-overflow: ellipsis;

// 多行文本溢出省略号显示,有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）
overflow: hidden;
text-overflow: elipsis;
//弹性伸缩盒子模型显示
display: -webkit-box;
//限制在一个块元素显示的文本行数
-webkit-line-clamp: 2;
//设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

复制代码

css重置样式表

*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{display:none}.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}
复制代码

Emmet语法

快速生成HTML结构语法
- 若是想要生多个相同标签标签加上*个数就能够了；例如li*3就能够快速生成三个li标签。
- 若是有父子级关系的标签能够用>，例如ul>li就能够了。
- 若是是兄弟级关系的标签就能够用+，例如div+p。
- 若是要生成带有属性或者类的标签，直接写.demo或者#nav加回车键就能够了。
- 若是想要标签类名带顺序可使用.demo$*5便可。
- 若是想要生成的标签内部有内同能够用{}包含内容，例如.demo{hello word}。
快速生成css样式
- 好比w200能够快速生成width: 200px
- lh20px能够快速生成line-height: 20px
- ti2em能够快速生成text-indent: 2em

HTML5的新特性

HTML新增的语义化标签

HTML5的新增特性主要是针对之前的不足，增长了一些新的标签、新的表单和新的表单属性等。

标签元素	描述
header	头部标签
nav	导航栏标签
article	内容标签
section	某个区域标签，能够理解为大号的div
aside	侧边栏标签
footer	底部

HTML5新增的多媒体标签

音频：<audio>

<audio width="200" height="200" controls>
    <source src="movie.mp3" type="video/mp3"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持video标签 </audio> // 视频代码会从上到下执行，若是第一行符合就中止，若是不符合接着往下走，若是都不符合就显示文字部分。 复制代码

音频的常见属性

属性	值	描述
autoplay	autoplay	若是出现该属性，则音频在就绪后就自动播放
controls	controls	若是出现该属性，则向用户显示控件，好比播放按钮
loop	loop	自动循环播放
src	url	播放MP3的地址

视频：<video>

<video width="200" height="200" controls>
    <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持video标签 </video> // 视频代码会从上到下执行，若是第一行符合就中止，若是不符合接着往下走，若是都不符合就显示文字部分。 复制代码

属性	值	描述
autoplay	autoplay	视频就绪就自动播放（谷歌添加muted来解决自动播放的问题）
controls	controls	视频播放控件
loop	loop	播放完自动循环
preload	auto(预先加载视频) node（不预先加载视频）	规定是否预加载播放该视频，若是设置了autoplay属性则该属性就会被忽略
poster	图片src	加载等待的画片图片
muted	muted	静音播放

HTML5新增的input表单

必须配合form表单使用才有效果

属性值	说明
`type="email"`	限制用户输入必须为邮箱类型
`type="url"`	限制用户输入必须为URL类型
`type="date"`	限制用户输入必须为日期类型
`type="time"`	限制用户输入必须为时间类型
`type="month"`	限制用户输入必须为月类型
`type="week"`	限制用户输入必须为周类型
`type="number"`	限制用户输入必须为数字类型
`type="tel"`	限制用户输入必须为手机号码
`type="search"`	搜素框
`type="color"`	生成一个颜色选择表单

HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
palceholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
multiple	multiple	能够多选文件提交
autocomplete	off/on	当用户在字段开始输入时，浏览器基于以前输入过的值，聚焦后显示出在字段中填写的选项，同时加上name属性，而且提交必须成功的才能够哦

能够经过如下方式修改placeholder里面的字体颜色。

input::placeholder {
    color: red;
}
复制代码

css3的新特性

css3新增的选择器

属性选择器

属性选择器能够根据元素特定的特性来选择元素，这样就能够不用借助于类或者id选择器。

/* 选择全部input中有value属性的表单 */
input[value] {
    color: red;
}
/* 选择input表单中type属性等于submit的表单。重点哦 */
input[type=submit] {
    color: pink;
}
/* 选择属性值开头的某些元素 */
div[class^=icon] {
    color: black;
}
/* 选择属性值以什么结尾的某些元素 */
div[class$=data] {
    cursor: pointer;
}
/* 选择属性值中含有什么的某些元素 */
div[class*=val] {
    color: yellow;
}
复制代码

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，经常使用于父级选择器里面的子元素。

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E；n能够为even偶数，odd奇数
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E中的最后一个
E:nth-of-type(n)	指定类型E中的第n个

其中n能够是数字，关键字和公式，公式以下

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 20
n+5	从第五个开始一直到最后

注意：
- nth-child对父元素里面全部的孩子排序选择（序号是固定的），先找到第n个孩子看看是否和E匹配，若是不匹配则不生效。
- nth-of-type对父元素里面的指定元素今昔那个排序选择，先去匹配E,而后再根据E找到第n个孩子

伪元素选择器

伪元素选择器能够帮助咱们利用css建立新标签元素，而不须要HTML标签，从而简化HTML结构。

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

注意
- before和after建立一个元素，可是属于行内元素。
- 新建立的这个元素在文档树中是找不到的，因此咱们称为伪元素。
- 语法：element::before{}。
- before和after必须有content属性。
- 伪元素和标签选择器同样权重为1。

CSS3的其余特性

css3滤镜 filter，将模糊或者颜色偏移等图形效果应用于元素。

语法：filter: 函数();例如filter：blur（5px）模糊处理，blur数值越大越模糊。

css3 calc函数,声明css属性值时执行一些计算

语法：width: calc(100% - 50px)

css3 过渡

过渡在css3中具备颠覆性，当元素从一个样式变换为另外一个样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另一个状态。
可让咱们页面更好看，更动感十足，虽然低版本浏览器不支持，可是不会影响页面布局。
咱们如今常常和:hover一块儿搭配使用。
语法以下
- transition: 要过渡的属性花费的时间运动曲线什么时候开始
  - 运动曲线有linear匀速、ease逐渐减速、ease-in加速、ease-out减速、ease-in-out先加速后减速。默认ease
- 若是想要写多个属性，利用逗号分割
transition: width .5s, height .5s
- 若是想要多个属性都变化能够用all
transition: all .5s
- 注意：谁作过渡就给谁加。

2D转换transform

转换（transform），能够实现元素的位移、旋转、缩放等效果，能够简单理解为变形。

2D转换之平移 translate
- 语法
```
transform: translate(x,y);
/* 或者分开写 */
tansform: translateX(n);
transform: translateY(n);
复制代码
```
- 重点
  - 定义2D转换中的移动，沿x轴和y轴移动元素
  - translate最大的特色是，不会影响到其余元素的位置；
  - translate中的百分比单位是相对于自身元素的宽度或者高度。
  - 对行内标签没有效果。
2D转换之rotate，让元素在二维平面内顺时针或者逆时针旋转
- 语法
```
tansform: rotate(度数)
复制代码
```
- 重点
  - rotate里面的跟度数，单位是deg，好比rotate(45deg)
  - 角度为正时，顺时针，为负时逆时针。
  - 默认旋转的中心点时元素的中心点。
2D转换中心点transform-origin
- 语法
transform-origin: x y;
- 重点
  - 注意后面的参数是x和y是用空格隔开的。
  - x y默认转换的中心点是元素的中心点（50% 50%）。
  - 还能够给x y设置像素或者方位词（top bottom left right center）
2D转换之缩放，顾名思义，能够放大和缩小，只要给元素添加上了这个属性就能控制它放大仍是缩小
- 语法
transform: scale(x,y)
- 注意
  - 注意其中的x和y用逗号隔开
  - transform: scale(1,1)宽高都放大一倍，至关于没有放大。
  - transform: scale(2),宽高都放大了两倍，至关于transform: scale(2,2)。
  - transform: scale(.5)，宽高都缩小了0.5倍。
  - scale缩放最大的优点：能够设置转换中心点缩放，默认是中心点缩放的，并且并不影响其余盒子。
2D转换综合写法
- 同时使用多个转换，其格式为transform: translate() rotate() scale()...等。
- 其顺序会影响转换的效果。（先旋转会改变坐标轴的方向）。
- 当咱们同时又位移和其余属性的时候，记得要将位移放到最前面。

动画（animation）

用keyframes定义动画
```
@keyframes 动画名称 {
    0% {
        width: 200px;
    }
    100% {
        width: 400px;
    }
}
复制代码
```
- 0%和100%叫作动画序列
  - 0%是动画的开始，100%是动画的结束。这样的规则就是动画序列。
  - 在@keyframes中规定某项css样式，就能建立由当前样式逐渐改成新样式的动画效果。
  - 动画是使一种元素逐渐变化到另外一种样式的效果，能够改变任意多的样式任意多的次数。
  - 请用百分比来规定变化发生的时间，或用关键词from和to等同于0%和100%。

元素使用动画

div {
    /* 动画名称 */
    animation-name:move;
    /* 持续时间 */
    animation-duration:2s
}
复制代码

动画经常使用属性

属性	描述
@keyframes	规定动画
animation	全部动画属性的简写属性，除了animation-play-state属性
animation-name	@keyframes规定的动画名称。（必须的）
animation-duration	规定动画完成的持续时间，能够是秒（s）或者毫秒（ms）
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画是合适开始
animation-iteration-count	规定动画被播放的次数，默认是1，值还能够是infinite（无限循环播放）
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，值还能够是alternate（逆向播放）
animation-play-state	规定动画初始状态是运行仍是暂停，默认是running，暂停时paused
animation-fill-mode	规定动画结束后的状态，保持forwards，回到起始backwards

特殊符号	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
°	摄氏度	`°`
×	乘号	`×`
÷	除号	`÷`
²	平方2上标	`²`
³	立方3上标	`³`
©	版权	`&copr;`
®	注册商标	`®`

特殊符号	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
°	摄氏度	`°`
×	乘号	`×`
÷	除号	`÷`
²	平方2上标	`²`
³	立方3上标	`³`
©	版权	`&copr;`
®	注册商标	`®`

重抓基础CSS+HTML入门知识

入坑前须要了解的知识点

可以说出网页的基本组成

可以说出经常使用的浏览器

可以说出Web标准的三大组成部分

HTML标签

说出HTML标签的书写注意规范

HTML的语法规范

HTML基本结构标签

HTML经常使用标签

特殊字符

表格标签

列表标签

表单标签

相对路径的三种形式

CSS层叠样式表

css的简介

css语法规范

CSS选择器

css基础选择器

css的复合选择器

后代选择器

子元素选择器（子选择器）

并集选择器

伪类选择器

css字体属性

css字体大小

css字体粗细

css文本缩进

行间距

css文本属性总结

css的引入方式

css的三种样式表

css的元素显示模式

块级元素

行内元素

行内块元素

css的三大特性

层叠性

继承性

优先级

css背景图片

css盒子模型

css浮动

核心阴影

css书写顺序

css定位

精灵图

字体图标

css用户界面样式

鼠标样式cursor

轮廓线outline

防止拖拽文本域resize

vertical-align属性的应用

文字溢出省略号显示

css重置样式表

Emmet语法

HTML5的新特性

HTML新增的语义化标签

HTML5新增的多媒体标签

HTML5新增的input表单

HTML5新增的表单属性

css3的新特性

css3新增的选择器

属性选择器

结构伪类选择器

伪元素选择器

CSS3的其余特性

css3滤镜 filter，将模糊或者颜色偏移等图形效果应用于元素。

css3 calc函数,声明css属性值时执行一些计算

css3 过渡

2D转换transform

转换（transform），能够实现元素的位移、旋转、缩放等效果，能够简单理解为变形。

动画（animation）

特殊符号	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
°	摄氏度	`°`
×	乘号	`×`
÷	除号	`÷`
²	平方2上标	`²`
³	立方3上标	`³`
©	版权	`&copr;`
®	注册商标	`®`