浏览器与服务器的基本概念
浏览器（安装在电脑里面的一个软件）
作用：
①将网页内容渲染呈现给用户查看。
②让用户通过浏览器与网页进行交互。
常见主流浏览器：
①IE浏览器 -ms-
②Chrome（谷歌浏览器） -webkit-
③Firefox（火狐浏览器） -moz-
④Safari（苹果浏览器）
⑤Opera（欧朋浏览器） -o-
浏览器内核，即浏览器所采用的渲染引擎，其决定了浏览器如何显示网页的内容以及页面格式信息。不同的浏览器有不同的浏览器内核，因此浏览器有兼容问题。
浏览器访问网页原理：
①当利用浏览器访问网页时，其实是有真实的物理文件传输的，浏览器会先将网页上的内容缓存到本地文件夹中，然后再渲染出来呈现给用户查看。
②第二次访问网页比第一次访问要快，因为第一次访问时已经将这个网页上的信息缓存到了本地。
③一个网页不是一个文件，而是一堆文件，网页越复杂那么组成这个网页的文件就越多。
浏览器请求数据的过程：
①浏览器访问网页，发送“请求报文”至服务器；
②服务器处理浏览器请求；
③服务器将处理结果返回给浏览器；
④服务器发送“响应报文”；
⑤浏览器解析服务器返回的内容呈现给用户。
请求报文：请求行+请求头+空行+请求体
响应报文：响应行+响应头+响应体
服务器（专门用于存储数据的电脑，24小时不断电不关机，访问者可以访问服务器获得服务器上的资源）
URL及HTTP协议的基本认知
在浏览器中输入的地址就是一个URL
URL拆分：
URL协议类型+服务器ip地址+服务器端口号（默认80）+需要访问的资源名称
URL拆分后各部分的作用：
①服务器ip地址和服务器端口号的作用就是告诉浏览器需要访问的服务器的详细地址。
②通过资源名称告诉服务器需要获取服务器上的哪个资源。
HTTP（超文本传输协议）
HTTP协议用于规范／约束浏览器和服务器之间如何沟通。
纯文本文件
只要能够被记事本打开，并且能够正常显示的文件都是纯文本文件。纯文本文件中所有文字都是同级别的。
字符集导致乱码问题
在网页中指定字符集的意义在于告诉浏览器如何找到对应的正确的内容，否则会导致乱码问题。
注意：在html文件中指定的字符集必须和保存这个文件的字符集一致，否则会出现乱码。
GBK（GB2312）和UTF-8的区别：
①GBK（GB2312）里面存储的字符比较少，仅仅存储了汉字和一些常用外文。体积比较小。
②UTF-8里面存储了世界上所有的文字。体积比较大。
HTML基本概念
HTML（超文本标记语言），一种纯文本类型的语言，由浏览器解释执行
作用：专门用来给文本添加语义，而不是用来修改文本的样式。
html基本结构：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
html标签：用于告诉浏览器这是一个网页，即告诉浏览器这是一个html文档。
head标签：一般情况下，写在head标签内部的内容都不会显示给用户查看，用于给网站添加一些配置信息，如
①指定网站的标题／指定网站的小图片
②添加网站的SEO相关的信息（指定网站的关键字／指定网站的描述信息）
③外挂一些外部的css/js文件
④添加一些浏览器适配相关的内容
title标签：专门用于指定网站的标题，并且这个标题会作为用户保存网站的默认标题。title标签必须写在head标签中。
body标签：专门用于定义html文档中需要显示给用户查看的内容（文字／图片／视频／音频）。
HTML、XHTML、HTML5的区别：
①HTML语法非常宽松容错性强；
②XHTML更为严格，它要求标签必须小写，必须严格闭合，标签中的属性必须使用引号引起等；
③HTML5是HTML的下一个版本，所以除了非常宽松容错性强以外，还增加了许多新的特性。
.html与.htm扩展名的区别：
htm是为了兼容过去的DOS操作系统命名格式存在的（DOS操作系统只能支持长度为3的后缀名），在windows下无所谓htm与html。
HTML标签
h系列标签（h1~h6）
作用：用于给文本添加标题语义（不是用来修改文本的样式的）。
注意点：
①在h系列的标签中，h1最大，h6最小，最多只能到6，超过6则无效；
②被h系列标签包裹的内容会独占一行；
③一般情况下一个界面只能出现一个h1标签（与SEO有关）。
p标签
作用：用于定义哪些文字是一个段落。
注意点：被p标签包裹的内容会独占一行。
hr标签
作用：在浏览器上实现一条分割线。
注意点：
①在浏览器中单独占据一行；
②hr标签没有结束标签，hr标签可以写成<hr/>或<hr>，但是XHTML中hr标签必须正确闭合写成<hr/>，而在HTML5中，由于HTML5兼容HTML和XHTML，所以HTML5中写不写/都可以。
img标签
作用：告诉浏览器需要显示一张图片。
格式：
<img src="需要显示的图片资源" />
img标签中的src就是用来告诉img标签，需要显示的图片名称。
img标签具有width和height（宽度和高度）两个属性，用于指定需要显示的图片的宽度和高度。如果img标签没有指定需要显示的图片的宽高，系统会按照图片默认的宽高来显示，如果img标签指定宽高，则按照指定的宽高来显示。
img标签的title属性用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容。
img标签的alt属性用于告诉浏览器，当需要显示的图片找不到时显示什么内容。
注意点：
①img标签在浏览器中不会独占一行；
②如果同时手动指定img标签显示的图片的宽度和高度，有可能会导致图片变形，可以只指定宽度或高度其中一个值即可，系统会根据指定的值计算出另外一个的值，进行等比拉伸，图片不会变形。
br标签
作用：换行。
格式：<br>
注意点：
①多个br可以连续使用，使用多少个br标签就会换多少行；
②由于HTML的作用是用来给文本添加语义的，而br标签的语义就是不另起一个段落换行，在一般开发情况下需要换行都是因为需要另起一个段落，因此在开发中很少使用br标签，而是使用独占一行的标签来解决。
nobr标签
作用：禁止标记中间的文本换行。
a标签
作用：用于控制页面与页面之间跳转。
格式：
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
a标签的target属性专门用于控制跳转的方式：
①_self：用于在当前选项卡中跳转，即不新建界面跳转，默认就是_self；
②_blank：用于在新的选项卡中跳转，也就是新建界面跳转；
③_parent：在上一级框架中打开超链接；
④_top：在整个浏览器窗口中打开超链接。
a标签的title属性用来控制鼠标悬停时显示的提示文本。
注意点：
①a标签不仅可以让文字能够点击，还可以让图片能够被点击；
②一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方；
③如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或https://；
④a标签的href属性除了可以指定一个网络地址以外，还可以指定一个本地地址。
假链接：点击之后不会跳转的链接。
假链接的意义：开发前期，多数界面未完成，此时a标签还不知道要跳转到什么地方，只能用假链接来代替。当开发后期其它界面都已经完成时再将假链接替换为真链接。
假链接的格式：
①<a href="#">需要展现给用户查看的内容</a>
②<a href="javascript:">需要展现给用户查看的内容</a>
假链接的两种格式的区别：#的假链接会自动回到网页的顶部，而javascript:的假链接不会自动回到网页顶部。
a标签的锚点跳转：可以通过给目标位置的标签添加一个唯一的id属性，然后在a标签的href属性中指定目标位置标签的id值，即可跳转到目标位置。既可以跳转到当前界面的指定位置，也可以跳转到其它界面的指定位置。（该方法没有过渡效果）
div标签
作用：一般用于配合css完成网页的基本布局，把标记中的内容做为单独的一块处理。
span标签
作用：一般用于配合css修改网页中的一些局部信息。
div和span的区别：
①div会单独占据一行，而span不会单独占据一行。
②div是一个容器级的标签，而span是一个文本级的标签。
容器级标签和文本级标签的区别：
①容器级的标签可以嵌套其它所有的标签；
②文本级的标签中只能嵌套文字/超链接/图片。
容器级的标签：div h ul ol dl li dt dd......
文本级的标签：span p b u i s strong em ins del......
pre标签
作用：预设格式文本，可以让空白字符、换行字符保存下来。
base标签
作用：专门用来统一的指定当前网页中所有的超链接（a标签）的跳转方式。
格式：
<base target="跳转方式">
注意点：
①base标签必须写在head标签的开始标签和结束标签中；
②当base标签和a标签同时指定了target属性，浏览器会按照a标签中指定的跳转方式来执行。
列表标签
作用：给一堆数据添加列表语义，告诉搜索引擎和浏览器这一堆数据是一个整体。
列表标签的分类：
1、无序列表
格式：
<ul>
<li></li>
</ul>
作用：给一堆数据添加列表语义，并且这一堆数据没有先后之分。
type 属性取值：
①disc 实心圆点
②square 实心方点
③circle 空心圆
注意点：
①ul标签和li标签是一个整体，是一个组合，一般情况下都是一起出现，不会单独使用。
②由于ul标签和li标签是一个组合，所以ul标签中不推荐包含其它标签，但是li标签中还可以添加其它的标签。
应用场景：
①新闻列表
②商品列表
③导航条
2、有序列表
格式：
<ol>
<li></li>
</ol>
属性：
①type属性取值：
❶阿拉伯数字
❷大小写英文字母
❸大小写罗马数字
②start 指定序号的起始值，只能取数字。
③reversed 反向编号列表
作用：给一堆数据添加列表语义，并且这一堆数据有先后之分。
注意点和应用场景与无序列表相同。
3、定义列表
格式：
<dl>
<dt></dt>
<dd></dd>
</dl>
作用：
①给一堆数据添加列表语义；
②dt标签定义列表中的所有标题，再通过dd标签给每个标题添加描述信息。
应用场景：
①做网站尾部的相关信息
②做图文混排
注意点：
①dl标签、dt标签和dd标签是一个整体，一般情况下不会单独出现。
②由于dl和dt/dd是一个组合标签，所以dl标签中建议只放dt和dd标签。
③一个dt标签可以没有对应的dd标签，也可以有多个对应的dd标签，但推荐使用一个dt对应一个dd。
④当需要丰富界面时，可以在dt和dd标签中继续添加其它标签。
表格标签
作用：用来给一堆数据添加表格语义，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现方式。
格式：
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>表格的标头信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格的主体信息</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格的附加信息</td>
</tr>
</tfoot>
</table>
table标签代表整个表格。
thead标签用于指定表格的表头信息。
tbody标签用于指定表格的主体信息。
tfoot标签用于指定表格的附加信息。
tr标签代表整个表格中的一行数据，即一对tr标签就是表格中的一行。
th标签专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中和加粗文字。
td标签代表表格中一行中的一个单元格，即一对td标签就是一行中的一个单元格，专门用于存储数据。
caption标签专门用来设置表格的标题，标题写在caption标签中，会自动相对于表格的宽度居中。
表格标签的属性：
①宽度和高度（可以给table标签和td标签使用）：
表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width和height属性的方式来手动指定表格的宽度和高度。
如果给td标签设置width/height属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽度和高度。
②水平对齐和垂直对齐（水平对齐可以给table标签、tr标签和td标签使用，垂直对齐只能给tr标签和td标签使用）
给table标签设置align属性，可以控制表格在水平方向的对齐方式。
给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式。
给td标签设置align属性，可以控制当前单元格中内容在水平方向的对齐方式。
tr标签和td标签中都设置align属性时，单元格中的内容会按照td标签中设置的来对齐。
给tr标签设置valign属性，可以控制当前行中所有单元格中的内容在垂直方向的对齐方式。
给td标签设置valign属性，可以控制当前单元格中的内容在垂直方向的对齐方式。
tr标签和td标签中都设置valign属性时，单元格中的内容会按照td标签中设置的来对齐。
③外边距和内边距（只能给table标签使用）
外边距cellspacing就是单元格与单元格之间的距离，默认情况下外边距的距离是2px。
内边距cellpadding就是单元格的边框和文字之间的距离，默认情况下内边距的距离是1px。
④背景颜色（table标签、tr标签和td标签都支持bgcolor属性）
注意点：
①表格标签有一个边框属性border，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以看不到边框；
②表格标签是一个组合标签，所以table/tr/td不会单个出现；
③caption标签一定要写在table标签中，紧跟在table标签后面，否则无效；
④如果没有编写tbody标签，系统会添加。
⑤如果指定了thead标签和tfoot标签，那么修改整个表格的高度时，thead标签和tfoot标签有自身默认的高度，不会随着表格的高度变化而变化。
细线表格的制作方式：
①给table标签设置bgcolor属性；
②给tr标签设置bgcolor属性；
③给table标签设置cellspacing="1px"。
单元格合并：
①水平方向上的单元格合并：给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待。colspan="合并单元格数目"
②垂直方向上的单元格合并：给td标签添加一个rowspan属性，来指定把某一个单元格当做多个单元格来看待。rowspan="合并单元格数目"
单元格合并注意点：
①由于把某一个单元格当做多个单元格来看待，就会多出一些单元格，所以需要删掉一些多余的单元格才能正常显示；
②单元格合并永远都是向后或者向下合并的，而不能向前或者向上合并。
表单标签
表单就是专门用来收集用户信息的。
格式：
<form>
<表单元素>
</form>
常见表单元素：
（1）input标签：input标签有一个type属性，这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观。
通过添加value属性可以给输入框设置默认值。
通过添加checked属性可以给选择框设置默认选项。
①明文输入框：<input type="text">
②密文输入框：<input type="password">
③单选框：<input type="radio">，默认情况下单选框不会互斥，要想单选框互斥，则必须给每一个单选框设置一个name属性，然后name属性必须设置相同的值。
④多选框：<input type="checkbox">
⑤普通按钮：<input type="button">，可以通过value属性来给按钮指定标题。
作用：配合JS完成一些操作。
⑥图片按钮：<input type="image" src="图片资源">
作用：配合JS完成一些操作。
⑦重置按钮：<input type="reset">，可以通过value属性修改默认的按钮标题。
作用：用来清空表单中已经填写好的数据。
⑧提交按钮：<input type="submit">
作用：将表单中已经填写好的数据提交到远程服务器。
注意点：要想把表单中填写好的数据提交到远程服务器，必须具备两个条件
1、需要给form表单添加一个action属性，通过action属性指定需要提交到的服务器地址；
2、需要给提交到服务器的表单元素添加一个name属性，除了按钮类型的input标签以外，其它类型的标签都可以通过value属性来指定提交到服务器的值。
⑨隐藏域：<input type="hidden">
作用：配合提交按钮将一些数据提交到服务器。
（2）select标签：用于定义下拉列表。
格式：
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
注意点：
①下拉列表不能输入内容，但可以直接在下拉列表中选择内容；
②可以通过给option标签添加一个selected属性来指定列表的默认值；
③可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类。
（3）textarea标签：文本域，定义一个多行输入框。
格式：<textarea></textarea>
注意点：
①默认情况下，输入框可以无限换行，有自己的宽度和高度；
②可以通过cols属性和rows属性来指定输入框的宽度和高度，但是虽然指定了列数和行数，还是可以无限往下输入；
③默认情况下输入框是可以手动拉伸的，可以通过CSS样式{resize:none;}来控制文本域不可手动拉伸。
HTML5新增的表单标签
①<input type="email">，可以自动校验输入的内容是否符合邮箱的格式。
②<input type="url">，可以自动校验输入的内容是否为url地址。
③<input type="number">，可以限制输入框中只能输入数字。
④<input type="date">，可以通过日历来选择时间。
⑤<input type="color">，可以通过取色板来选择颜色。
label标签
默认情况下，文字和输入框是没有关联关系的，即点击文字输入框不会聚焦，要想让文字和输入框绑定在一起，可以使用label标签。
绑定方式：
第一种：
①将文字用label标签包裹起来；
②给输入框添加一个id属性；
③在label标签中通过for属性和输入框中的id值进行绑定即可。
第二种：用label标签将文字及输入框同时包裹起来。
datalist标签
作用：给输入框绑定待选项。
格式：
<datalist>
<option>待选项内容</option>
</datalist>
绑定方式：
①建立一个datalist列表，并给其添加一个id属性；
②给需要绑定的输入框添加一个list属性，将datalist列表的id对应的值赋值给需要绑定的输入框中的list属性即可。
fieldset标签
作用：可以给表单添加一个边框。可以通过legend标签给边框指定一个标题。
格式：
<form>
<fieldset>
<legend>边框标题</legend>
<表单元素>
</fieldset>
</form>
HTML5新增标签：
（1）video标签
作用：播放视频。
格式：
①<video src="视频资源地址">
</video>
②<video>
<source src="视频资源地址" type="video/视频格式"></source>
</video>
video标签支持的三种视频格式：
①webm
②mp4
③ogg
video标签的属性：
①src属性：用于告诉video标签需要播放的视频地址。
②autoplay属性：用于告诉video标签是否需要自动播放视频。默认情况下不会自动播放。
③controls属性：用于告诉video标签是否需要显示控制条。
④poster属性：用于告诉video标签视频没有播放之前显示的占位图片。
⑤loop属性：用于告诉video标签视频是否需要循环播放，一般用于做广告视频。
⑥preload属性：预加载视频，与autoplay属性冲突，如果设置了autoplay属性，则preload属性就会失效。
⑦muted属性：静音。
⑧width属性/height属性：设置视频的宽度/高度。
注意点：通过video标签的第二种格式可以指定所有浏览器都支持的视频格式，但前提是浏览器必须支持html5标签，否则同样无法播放。有部分浏览器是不支持html5标签的，为了使这部分浏览器也能够通过video标签来播放视频，可以通过一个JS的框架html5media来实现。
（2）audio标签
作用：播放音频。
格式：
①<audio src="音频资源地址">
</audio>
②<audio>
<source src="音频资源地址" type="audio/音频格式"></source>
</audio>
audio标签的属性：与video标签相同，除了width/height/poster这三个属性外，其它属性大部分都能够使用，并且功能都一样。
（3）详情和概要标签
作用：利用summary标签来描述概要信息，利用details标签来描述详情信息。默认情况下是折叠展示，想看见详情必须点击。
格式：
<details>
<summary>概要信息</summary>
详情信息
</details>
marquee标签
作用：用于制作跑马灯效果。
格式：
<marquee>
</marquee>
属性：
①direction：设置滚动方向，left/right/up/down。
②scrollamount：设置滚动速度，值越大就滚动越快。
③loop：设置滚动次数。默认是-1，即无限滚动。
④behavior：设置滚动类型，slide滚动到边界就停止，alternate滚动到边界就弹回。
注意点：marquee标签不是W3C推荐的标签，无法在W3C官方文档中查询这个标签，但是各大浏览器对这个标签的支持非常好。
font标签
作用：字体标签。
b标签
作用：设置标记间的文字为粗体。
i标签
作用：设置标记间的文字为斜体。
u标签
作用：设置标记间的文字带下划线。
sup标签
作用：设置标记间的文字为上标。
sub标签
作用：设置标记间的文字为下标。
address标签
作用：表示地址。
q标签
作用：定义引用。
kbd标签
作用：用户键入的文字，字体变细变轻。
cite标签
作用：一段引用的文字，斜体。用于书名、电影名。
small标签
作用：字体变小。
big标签
作用：字体变大。
center标签
作用：设置标记中文本或者图像居中显示。
HTML中被废弃的标签
因为当前HTML中的标签只有一个作用，就是用来添加语义，而早期的HTML标签中有一部分是没有语义的，是用来修改样式的，所以这部分标签就被淘汰了。如br标签、hr标签、font标签、b标签、u标签、i标签、s标签等。在开发中，一般情况下不要使用这些标签。一定要使用时，一般情况下都是用来作为CSS的钩子来使用。
①strong标签：定义重要性强调的文字，用来替换b标签。
②ins标签：定义插入的文字，用来替换u标签。
③em标签：定义强调的文字，用来替换i标签。
④del标签：定义被删除的文字，用来替换s标签。
常用字符实体
在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西要想显示出来就必须通过字符实体。
① ：空格，一个 就是一个空格，有多少个 就有多少个空格。
②<：小于符号，<。
③>：大于符号，>。
④©：版权符号，©。
⑤"：双引号，"。
⑥&：and符号，&。
HTML标签分类
HTML用于描述功能的符号称为“标记”， 标记（也叫元素/标签）分为：
①非封闭类型标记，也叫做空标记，或者单标记/单标签：只有开始标签没有结束标签，也就是由一个<>组成的，不能包含内容。
②封闭类型标记（双标记/双标签）：有开始标签和结束标签，也就是由一个<>和一个</>组成的，必须成对出现。
HTML注释
注释可以用来解释某一段程序或某一行代码是什么意思，方便程序员之间的交流。适当的注释可以让程序更加可读。
注意点：注释的内容并不会在网页中显示，注释只在编辑文档情况下可见。
DTD文档声明
由于html有很多个版本的规范，每个版本的规范之间又有一定的差异，所以为了让浏览器能够正确的编译／解析／渲染我们的网页，需要在html文件的第一行告诉浏览器，当前这个页面是用哪一个版本的html规范来编写的，浏览器知道了是用哪一个版本的规范来编写之后，它就能够正确的编译／解析／渲染网页。
DTD文档声明注意点：
①任何一个标准的HTML网页，第一行一定是DTD文档声明，即DTD文档声明必须写在HTML的第一行；
②DTD文档声明不区分大小写；
③DTD文档声明不是一个标签；
④DTD文档声明的作用是用于告诉浏览器网页是用哪一个版本的标准编写的，以便于浏览器解析和渲染，但是浏览器并不是完全依赖于DTD文档声明，浏览器有一套属于自身的机制，即DTD文档声明不写网页也能正常运行，但是由于W3C规定第一行必须写上DTD文档声明。
DTD文档声明格式：
html5的DTD文档声明格式（向下兼容）
<!DOCTYPE html>
路径问题
1、相对路径：
相对路径就是每次都从.html文件所在的文件夹开始查找。
相对路径下的情况：
①同级：需要的资源和.html文件存储在同一个文件夹中；
②下级：存储资源的文件夹和.html文件在同一个文件夹中；
③上级：存储资源的位置和存储.html文件的文件夹在同一文件夹中，使用../代表从当前位置找到上一级文件夹。
2、绝对路径：
绝对路径就是每次都从指定的盘符开始查找。
注意点：
①路径中不要出现中文，否则可能出现未知问题；
②如果是通过相对路径来指定，那么不能跨盘符；
③开发中需要编写路径，统一使用反斜杠/，不使用正斜杠\，因为其它操作系统中路径都是使用反斜杠/，如果使用正斜杠\，可能会引发问题；
④开发中一般不会使用绝对路径，因为可移植性不好。
CSS基础
CSS的作用：用来修改样式。
格式：
<style type="text/css">
标签名称{
属性名称:属性对应的值;
......
}
</style>
注意点：
①style标签必须写在head标签之间；
②style标签中的type属性可以写可以不写，默认就是type="text/css"；
③设置样式时必须按照固定的格式来设置，{key:value;}，其中:不能省略，分号大多数情况下也不能省略。
CSS样式的三种写法
①内联样式：使用style作为属性，样式语句作为属性值。
②外联样式：外部的样式文件通过HTML的link元素连接到HTML文档中。
③嵌入样式：使用<style>标记把样式代码插入到页面的<head>标记中。
CSS属性
规定文字样式的属性font-style
取值：
①normal 正常的，默认取值
②italic 倾斜的
规定文字粗细的属性font-weight
取值：
①bold 加粗
②bolder 比加粗更粗
③lighter 细线，默认取值
④数字取值：100~900之间的整百数字
规定文字大小的属性font-size
单位：px（像素）
注意点：通过font-size设置大小一定要带单位，即一定要写px。
规定文字字体的属性font-family
注意点：
①如果取值是中文，需要用双引号或者单引号括起来；
②设置的字体必须是用户电脑里已经安装的字体，如果设置的字体不存在，那么系统会使用默认的字体（宋体）来显示；
③如果设置的字体不存在，又不想用默认的字体来显示时，可以给字体设置备选方案，格式：{font-family:"字体1","备选字体1",....;}；
④中文字体可以处理英文，英文字体不能处理中文，如果想给中文和英文分别单独设置字体，那么英文的字体必须写在中文的前面。
开发中最常见的字体：
①中文：宋体（SimSun）/黑体（SimHei）/微软雅黑（Microsoft YaHei）
②英文：Times New Roman/Arial
文字属性的缩写格式：
font:style weight size family;
注意点：
①其中style和weight属性值可以省略，且位置可以交换；
②其中size和family属性值不可以省略，且位置不能随便乱放，size一定要写在family的前面，且size和family必须写在所有属性的最后面。
文本装饰的属性text-decoration
取值：
①underline 下划线
②line-through 删除线
③overline 上划线
④none 无，最常见的用途就是用于去掉超链接的下划线
文本水平对齐的属性text-align
取值：
①left 向左对齐
②right 向右对齐
③center 居中
文本缩进的属性text-indent
单位：em，一个em代表缩进一个文字的宽度，最常用为2em。
颜色控制属性color
取值：
①英文单词
注意点：一般情况下常见的颜色都有对应的英文单词，但不是所有的颜色都能够通过英文单词来表达。
②rgb
格式：rgb(值,值,值)
注意点：rgb其实就是三原色，r（red红色），g（green绿色），b（blue蓝色），格式中的每个数字对应用来设置对应三原色中的光源元件显示的亮度，取值范围为0~255之间，0代表不发光，255代表发光，值越大就越亮。三个值越小就越偏黑色，越大就越偏白色。
③rgba
格式：rgb(值,值,值,透明度取值)
注意点：相对于rgb多了一个透明度，取值为0~1之间，取值越小就越透明。
④十六进制
在前端开发中通过十六进制来表示颜色，其本质就是RGB，十六进制中是通过每两位表示一个颜色。
⑤十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的，就可以简写为一位。
注意点：
①如果当前颜色对应的两位数字不一样，那么就不能简写；
②如果两位相同的数字不是属于同一个颜色的，那么也不能简写。
补充：十六进制和十进制转换的公式
用十六进制的第一位*16+十六进制的第二位=十进制
设置标签背景颜色的属性background-color
取值：
①英文单词
②rgb
③rgba
④十六进制
设置标签背景图片background-image:url()
注意点：
①图片的地址必须放在url()中，图片的地址可以是本地的地址，也可以是网络的地址；
②如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充；
③如果网页上出现了图片，那么浏览器会再次发送请求获取图片；
④同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。
设置背景图片平铺方式属性background-repeat
取值：
①repeat 默认取值，在水平和垂直方向都需要平铺
②no-repeat 在水平和垂直方向都不需要平铺
③repeat-x 只在水平方向需要平铺
④repeat-y 只在垂直方向需要平铺
应用场景：可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度。
控制背景图片的位置background-position
格式：
background-position:水平方向 垂直方向
取值：
①具体的方位名词
水平方向：left center right
垂直方向：top center bottom
②具体的像素（一定要写单位px，具体的像素是可以接收负数的）
背景属性的缩写格式：
background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点：
①background属性中，任意一个属性都可以被省略。
背景关联方式：默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，可以修改背景图片和滚动条的关联方式。
修改背景关联方式：在css中background-attachment属性，专门用于修改关联方式。
格式：
background-attachment:值;
取值：
①scroll 默认值，会随着滚动条的滚动而滚动
②fixed 不会随着滚动条的滚动而滚动
背景图片和插入图片的区别：
①背景图片仅仅是一个装饰，不占位，插入图片占位；
②背景图片有定位属性，可以控制图片的位置，插入图片没有定位属性；
③插入图片的语义比背景图片的语义要强，如果图片想被搜索引擎收录，推荐使用插入图片。
边框属性border
边框就是环绕在标签宽度和高度周围的线条。
格式：
（1）同时设置四条边的边框
border:边框的宽度 边框的样式 边框的颜色;
边框线的样式：
①solid 实线
②dashed 虚线
③dotted 点状线
注意点：
①格式中颜色属性或宽度属性可以省略，省略之后默认就是黑色，还是可以看到边框；
②格式中边框的样式不能省略，省略之后就看不到边框。
（2）分别设置四条边的边框
border-top:边框的宽度 边框的样式 边框的颜色;
border-bottom:边框的宽度 边框的样式 边框的颜色;
border-left:边框的宽度 边框的样式 边框的颜色;
border-right:边框的宽度 边框的样式 边框的颜色;
注意点：
①格式中颜色属性或宽度属性可以省略，省略之后默认就是黑色，还是可以看到边框；
②格式中边框的样式不能省略，省略之后就看不到边框。
（3）分别设置四条边的边框
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
注意点：
①这三个属性的取值是按照顺时针来赋值的；
②取值为上右下，取值省略左时，左边的取值和右边一样；
③取值为上右，省略下左时，左边的取值和右边一样，下边的取值和上边一样；
④取值为上，省略右下左时，右下左的取值和上边一样。
（4）单独设置某一方向的边框（方向+要素）
border-方向-width:值;
border-方向-style:值;
border-方向-color:值;
内边距属性padding
边框和内容之间的距离就是内边距。
注意点：
①给标签设置内边距后，标签占有的宽度和高度会发生变化；
②当标签设置背景颜色时，内边距也会有背景颜色。
格式：
（1）单独给某个方向设置
padding-top:值;
padding-bottom:值;
padding-lrft:值;
padding-right:值;
（2）给四个方向设置
padding:上 右 下 左;
注意点：
①取值为上右下，取值省略左时，左边的取值和右边一样；
②取值为上右，省略下左时，左边的取值和右边一样，下边的取值和上边一样；
③取值为上，省略右下左时，右下左的取值和上边一样。
外边距属性margin
标签和标签之间的距离就是外边距。
注意点：当标签设置背景颜色时，外边距是没有背景颜色的。
格式：
（1）单独给某个方向设置
margin-top:值;
margin-bottom:值;
margin-lrft:值;
margin-right:值;
（2）给四个方向设置
margin:上 右 下 左;
注意点：
①取值为上右下，取值省略左时，左边的取值和右边一样；
②取值为上右，省略下左时，左边的取值和右边一样，下边的取值和上边一样；
③取值为上，省略右下左时，右下左的取值和上边一样。
外边距合并现象：
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的。
外边距合并常见两种情况：
①当两个元素为父子关系时，它们的上下边距会发生合并现象，合并后的外边距大小等于合并前外边距高的元素的外边距。
解决方法：
❶给父级元素一个overflow:hidden;
❷让子级元素浮动。
②当两个元素为兄弟关系时，哥哥的下外边距与弟弟的上外边距会发生合并现象，合并后的外边距大小等于合并前外边距高的元素的外边距。
解决方法：让所有同级元素浮动。
注意点：外边距的合并一般只发生在上下不发生在左右，元素左右的外边距可以叠加。
盒子模型：
（1）内容的宽度和高度
通过标签的width/height属性设置的宽度和高度
（2）元素的宽度的和高度
宽度=左边框+左内边距+width+右内边距+右边框
高度=上边框+上内边距+height+下内边距+下边框
（3）元素空间的宽度和高度
宽度=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距
高度=上外边距+上边框+上内边距+height+下内边距+下边框+下外边距
box-sizing属性：
（1）CSS3中新增了一个box-sizing属性，可以保证给盒子新增padding和border之后，盒子元素的宽度和高度不变；
（2）box-sizing属性要保证新增padding和border之后，盒子元素的宽度和高度不变，则必须减去一部分内容的宽度和高度；
（3）box-sizing取值：
①content-box
元素的宽高=边框+内边距+内容宽高
②border-box
元素的宽高=width属性
盒子模型注意点：
①如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来，如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性；
②开发中，一般情况下如果需要考虑嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin，margin本质上是用于控制兄弟关系之间的间隙的；
③在嵌套关系的盒子中，可以利用margin:0 auto;的方式来让里面的盒子在外面的盒子中水平居中，margin:0 auto;只对水平方向有效，对垂直方向无效。
盒子居中和内容居中
text-align:center;作用：设置盒子中存储的文字/图片水平居中。
margin:0 auto;作用：让盒子自身水平居中。
清空默认边距（外边距和内边距）
①在开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，编写代码之前通常会清空默认的边距；
②清空默认的边距的方式：
*{
margin:0;
padding:0;
}
注意点：通配符选择器会遍历当前界面中所有的标签，性能较差，通常采用并集选择器选择多个标签控制。
yui css reset网址：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
行高line-height
注意点：在CSS中所有的行都有自己的行高，行高和盒子的高度不是同一个概念。
规律：
①文字在行高中默认是垂直居中的；
②开发中，经常将盒子的高度和行高设置为一样，这样可以保证一行文字在盒子的高度中是垂直居中的；
③开发中，如果一个盒子中有多行文字，就不能使用设置行高等于盒子高来实现让文字垂直居中，只能通过设置padding来让文字垂直居中。
注意点：
①在开发中，如果一个盒子中存储的是文字，一般情况下会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为右边的内边距有误差（右边如果放不下一个文字时，文字就会换行显示，所以文字和右内边距之间的距离就有了误差）；
②顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。
overflow:hidden;属性
作用：
①可以将超出标签范围的内容裁剪掉；
②清除浮动影响；
③在嵌套的盒子中，可以通过给外面的盒子设置overflow:hidden;让里面的盒子设置margin-top之后外面的盒子不被顶下来。
不透明度opacity
用于设置元素的不透明度，默认取值为1。
取值为1时完全不透明，取值为0时完全透明。
流动对齐方式float
取值：
①left 向左浮动
②right 向右浮动
③none 不浮动
CSS选择器
标签选择器
作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。
格式：
标签名称{
属性:值;
}
注意点：
①标签选择器选中的是当前界面中所有的标签，而不能单独选中某一标签；
②只要是HTML中的标签就可以作为标签选择器。
id选择器
作用：根据指定的id名称找到对应的标签，然后设置属性。
格式：
#id名称{
属性:值;
}
注意点：
①每个html标签都有一个id属性，即每个标签都可以设置id；
②在同一个界面中id的名称是不可以重复的；
③编写id选择器时一定要在id名称前面加上#；
④id的名称是有一定规范的，只能由字母、数字、下划线组成，且不能以数字开头，也不能是html标签的名称。
类选择器
作用：根据指定的类名称找到对应的标签，然后设置属性。
格式：
.类名称{
属性:值;
}
注意点：
①每个html标签都有一个class属性，即每个标签都可以设置class；
②在同一个界面中class的名称是可以重复的；
③编写class选择器时一定要在class名称前面加上.；
④类名的命名规范和id名称的命名规范一样，class的名称是有一定规范的，只能由字母、数字、下划线组成，且不能以数字开头，也不能是html标签的名称；
⑤在html中每个标签可以同时绑定多个类名。
id选择器和类选择器的区别：
①一个html标签只能绑定一个id名称，但可以绑定多个class名称；
②id名称不可以重复，class名称可以重复；
③id选择器以#开头，class选择器以.开头；
④一般情况下id是给JS使用的，不使用id去设置样式。
后代选择器
作用：找到指定标签的所有后代标签，设置属性。
格式：
标签名称1 标签名称2{
属性:值;
}
注意点：
①后代选择器必须用空格隔开；
②后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放到指定标签中的都是后代；
③后代选择器不仅仅可以使用标签名称，还可以使用其它选择器。
子元素选择器
作用：找到指定标签中所有特定的直接子元素，然后设置属性。
格式：
标签名称1>标签名称2{
属性:值;
}
先找到名称叫做标签名称1的标签，然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素。
注意点：
①子元素选择器只会查找儿子，不会查找其它被嵌套的标签；
②子元素选择器之间需要用>符号连接，并且不能有空格；
③子元素选择器不仅仅可以使用标签名称，还可以使用其它选择器；
④子元素选择器可以通过>符号一直延续下去。
后代选择器和子元素选择器的区别：
①后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号；
②后代选择器会选中指定标签中所有的特定后代标签，子元素选择器只会选中指定标签中所有特定的直接标签。
后代选择器和子元素选择器的共同点：
①后代选择器和子元素选择器都可以通过使用标签名称/id名称/class名称来作为选择器；
②后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去。
交集选择器
作用：给所有选择器选中的标签中，相交的那部分标签设置属性。
格式：
选择器1选择器2{
属性:值;
}
注意点：
①选择器和选择器之间没有任何符号；
②选择器可以使用标签名称/id名称/class名称。
并集选择器
作用：给所有选择器选中的标签设置属性。
格式：
选择器1,选择器2{
属性:值;
}
注意点：
①并集选择器必须使用,来连接；
②选择器可以使用标签名称/id名称/class名称。
兄弟选择器
（1）相邻兄弟选择器（CSS2）
作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性。
格式：
选择器1+选择器2{
属性:值;
}
注意点：
①相邻兄弟选择器必须通过+连接；
②相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签。
（2）通用兄弟选择器（CSS3）
作用：给指定选择器后面的所有选择器选中的所有标签设置属性。
格式：
选择器1~选择器2{
属性:值;
}
注意点：
①通用兄弟选择器必须用~连接；
②通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以。
序选择器（CSS3中新增的最具代表性的选择器）
（1）同级别
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的元素
:nth-child(odd) 选中同级别中的所有奇数标签
:nth-child(even) 选中同级别中的所有偶数标签
:nth-child(xn+y) x和y是用户自定义的，而n是一个计数器，从0开始递增
注意点：不区分类型。
（2）同类型
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
:nth-of-type(odd) 选中同级别中同类型的所有奇数标签
:nth-of-type(even) 选中同级别中同类型的所有偶数标签
:nth-of-type(xn+y) x和y是用户自定义的，而n是一个计数器，从0开始递增
属性选择器
作用：根据指定的属性名称找到对应的标签，然后设置属性。
格式：
①[属性名称]
作用：根据指定的属性名称找到对应的标签，然后设置属性。
②[属性名称=值]
作用：找到有指定属性，并且属性的取值等于指定值的标签，然后设置属性。（最常见的应用场景就是用于区分input标签属性）
③属性的取值是以什么开头的
[属性|=值]（CSS2）
[属性^=值]（CSS3）
两者之间的区别：
CSS2中的只能找到指定值开头并且指定值是被-和其它内容隔开的。
CSS3中的只要是以指定值开头的都可以找到，无论有没有被-隔开。
④属性的取值是以什么结尾的
[属性$=值]（CSS3）
⑤属性的取值是否包含某个特定的值
[属性~=值]（CSS2）
[属性*=值]（CSS3）
两者之间的区别：
CSS2中只能找到独立的单词，也就是包含指定值，并且指定值是被空格隔开的。
CSS3中只要包含指定值就可以找到。
通配符选择器
作用：给当前界面上所有的标签设置属性。
格式：
*{
属性:值;
}
注意点：由于通配符选择器时设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差。
伪元素选择器
作用：给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。
格式：
①标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素。
②标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素。
CSS三大特性
继承性
作用：给父元素设置一些属性，子元素也可以使用，这个称之为继承性。
注意点：
①不是所有的属性都可以继承，只有以color/font-/line开头的属性才可以继承；
②在CSS的继承中只要是后代都可以继承；
③a标签的文字颜色和下划线颜色是不能继承的；
④h标签的文字大小是不能继承的。
应用场景：一般用于设置网页上的一些共性信息。
层叠性
作用：层叠性就是CSS处理冲突的一种能力。
注意点：
①层叠性只有在多个选择器选中同一个标签，并且设置了相同的属性，才会发生层叠性。
优先级
作用：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠由优先级来确定。
优先级判断的三种方式：
①是否是直接选中（间接选中就是指继承）
如果是间接选中，那么就是谁离目标标签比较近就听谁的。
②相同选择器
如果都是直接选中，并且都是同类型的选择器，那么谁写在后面就听谁的。
③不同选择器
如果都是直接选中，并且不是相同类型的选择器，那么就按照选择器的优先级来层叠。
id>标签>通配符>继承>浏览器默认
important
作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高。
注意点：
①important只能用于直接选中，不能用于间接选中；
②通配符选择器选中的标签也是直接选中的；
③!important只能提升被指定的属性的优先级，其它属性的优先级不会被提升；
④!important必须写在属性值的分号前面，而且前面的感叹号不能省略。
优先级的权重
作用：当多个选择器混合在一起使用时，可以通过计算权重来判断谁的优先级最高。
权重的计算规则：
①首先先计算选择器中有多少个id，id多的选择器优先级最高；
②如果id的个数一样，再看类名的个数，类名个数多的优先级最高；
③如果类名的个数一样，再看标签名称的个数，标签名称个数多的优先级最高；
④如果id个数、类名个数、标签名称个数都一样，谁写在后面听谁的。
注意点：只有选择器直接选中的标签才需要计算权重。
CSS元素显示模式
在html中html将所有标签分为两类，分别是容器级和文本级；
在css中css将所有标签分为两类，分别是块级元素和行内元素。
块级元素和行内元素的区别：
①块级元素会独占一行，行内元素不会独占一行；
②块级元素如果没有设置宽度，那么默认和父元素一样宽，设置了宽高，就按照设置的来显示；
③行内元素是不可以设置宽度和高度的，大小由内部填充物决定。
行内块元素：能够让元素既能够不独占一行，又可以设置宽度和高度。
块级元素：p div h ul li dt dd......
行内元素：span b u i s strong em ins del img a.....
CSS元素显示模式转换：设置元素的display属性。
display属性取值：
①block 块级
②inline 行内
③inline-block行内块
CSS精灵图
CSS精灵图是一种图像合成技术。
作用：可以减少图片请求的次数，以及可以降低服务器处理压力。
使用方式：CSS的精灵图需要配合背景图片和背景定位来使用。
网友评论