什么叫解耦合，不理解，不清楚，不知道
一、web前端介绍
1.1 前段发展史
web1.0
网页制作是web1.0时代的产物，那时网页主要是静态网页，就是没有用户交互只能浏览的网页，网页三剑客 Dreamweaver，fireworks，flash就是这个时代的产物；
web2.0
前端开发是由网页制作演变而来；从2005年开始互联网进入web2.0时代，网页有静态和动态之分，动态网页就是用户不仅可以浏览网页还可以与服务器交互，这个时代的网页可包含视频，音频等，用户还可在网页里进行评论交流上传下载文件等等，这时的网站制度难度和方式，都更接近传统的后台网站开发，然后就有了web前端开发，三剑客也在这时代就此没落；
1.2 前端开发包含哪些内容
网页最主要由三部分组成： 结构，表现，行为；
网页现在新标准是W3C，目前模式为HTML，CSS，JavaScript；
web前段能做什么： 公司官网，移动端网页，移动端app，微信小程序等；
HTML是什么
全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
CSS
全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
JavaScript
JavaScript是一门脚本语言。
HTML、CSS和JavaScript简单区分
HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为，步骤为：先用HTML搭建网页结构，然后CSS进行装饰，然后通过JavaScript定制行为；
1.3 开发环境
常见的有Hbuild、Sublime Text、Dreamweare都可以用来开发HTML，PyCharm也支持HTML开发。
浏览器
浏览器在本地也能打开html文件，浏览器就跟解释器一样，从上倒下，从左到右解析，全球共有五大浏览器厂商(ie、chrome、firfox、safri、presto)浏览器内核不同，浏览器渲染引擎不同（后期需考虑兼容性问题），其他浏览器都是使用这5款浏览器内核；
浏览器历史
世界最早浏览器，网景浏览器（Netscape ）
后来它想动微软蛋糕做操作系统，微软这边就做出动作了利用windows操作系统的市场占有率，提供了免费浏览器ie,且windows操作系统里还必须有，用户基数及免费使用，网景浏览器渐渐没落；
中国最早浏览器ie6，国企内就用的ie6；
浏览器不同，解析的标签标准不同，霸道微软，就不改标准，坚持不更新，后来谷歌和火狐抢占了市场，IE就傻眼了，目前也只有傻逼才用IE。。。(小声逼逼自带对普通用户还是很香的，普通用户对浏览器没有过多要求)
市场越发地混乱，于是w3c（万维网联盟（World Wide Web Consortium，W3C））成立，用来制定大家的统一标准；
须知：学前端一半工作在考虑兼容性，目前html5在兼容性方面解决的比较好
文件后缀名规范
.htm和.html扩展名的区别:
DOS系统（win95或win98）下只能支持长度为3的后缀名，所以老版本的系统一直在用.htm后缀；
但在windows后缀长度是可以大于3位，所以windows下用谁后缀是无所谓的，html是为长文件的格式命名的，如果文件后缀是.htm，毫无疑问，浏览器也可以兼容，但推荐使用.html；
二 HTML
2.1 HTML简介
用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件(即网页文件)内容下载到本地，然后打开显示的过程；
而文本文件的文档结构只有空格和换行两种组织方式，如此，文本文件在打开显示时，显示的效果将会非常非常非常的单一；
为了让显示的效果不那么单调，我们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部分内容，然后为内容打上不同的标记，比如什么是标题，什么是段落，然后存放硬盘里，等下次打开时，word会识别之前的标记，然后按照预先编排好的结果显示出来；
站在显示文本内容的角度去看，浏览器与word的原理一样，我们可以将浏览器当成一个网页版的只读word，浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为HTML,HTML全称是超文本标记语言（HyperText Markup Language）；
“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本；
“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签，比如用标签h1标记标题，用标签p标签段落，如此我们标记一首诗就成了如下格式：
<h1>床头诗</h1>
<P>床前明月光</p>
<p>地上鞋两双</p>
<p>举头望明月</p>
<p>低头擦裤裆</p>这样浏览器在接收到文本内容后，就可以按照事先规定好的记号去显示各部分的内容，所以我们学习HTML就是在学习一系列的标签；
2.2 HTML发展史
超文本标记语言（第一版）：在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准），后来陆续由w3c制定标准
#IETF简介
IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等
#W3C简介
W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。
Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人目前常用的两种文档类型是xhtml 1.0和html5，pc端两种都可以，html5向下兼容；
xhtml1.0文档类型创建的快捷方式： html:xt + tab
html5文档类型创建的快捷方式： html:5 + tab 或者 ! + tabHTML5与XTML的区别
XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起，img必须要加alt属性(对图片的描述)
等等：
HTML5是HTML的下一个版本所以除了非常宽松容错性强（可以选择性遵守xhtml制定的文档编写规范）以外,还增加许多新的特性；
2.3 HTML标签与文档结构
一个网页可以没有样式没有交互，但是必须要有网页需要呈现的内容，HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，所以HTML部分是整个前端的基础，学习HTML主要就是学习的HTML标签。
2.3.1 标签与文档结构
标签
在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，
HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，
开始标签和结束标签之间的就是标签的内容，有些标签功能比较简单，
使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>；HTML中的标签存放于文本文件中，首先需要按照下述固定的文档结构组织：
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
构筑解释
#1、<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
#2、<html></html> 称为根标签，所有的网页标签都在<html></html>中。
HTML的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器
的统计分析,不定义也没什么影响
根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面
中的主要语言进行声明，比如：
<html lang="en"></html>
#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下面中会有介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
#4、在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。标签间的关系
head与body属于并列/平级
html和body属于父子/上下级2.3.2 HTML标签详细语法与注意点
标签语法
<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>注意事项
#1、记号/标签是不会显示出来的。
#2、标签只是用来做记号而不负责控制样式：虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，HTML的作用只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一种解耦合的思想
#3. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。
#4. HTML中有部分标签是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>2.3.3 HTML标签分类
单从是否可以嵌套子标签的角度去分，标签分为两类；
#1、容器类标签
容器类标签可以简单的理解为能嵌套其它所有标签的标签。
常见容器级的标签:
h系列
ul>li
ol>li
dl>dt+dd
div
#2、文本类标签
文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。
常见文本级的标签:
p
span
strong
em
ins
del2.3.4 HTML注释
HTML中注释的格式
<!--这里是注释的内容-->注意： 注释中可以直接使用回车换行。
我们可以用注释的标签把HTML代码包裹起来。如：
<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->HTML注释的注意事项：
#1、HTML注释不支持嵌套。
#2、HTML注释不能写在HTML标签中。2.4 head内常用标签
meta相关
#1、指定字符集
<meta charset="gbk">
#2、页面描述
<meta name="Description" content="具体描述。。。">
#3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
#4、3秒后跳转
<meta http-equiv="refresh" content="3,http://www.baidu.com">
#5、三秒刷新
<meta http-equiv="refresh" content="3">非meta标签
#1、标题
<title>百度一下，你就知道</title>
#2、网站的图标
<link rel="icon" href="https://www.baidu.com/favicon.ico">
#3、定义内部样式
<style></style>
#4、引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#5、定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script> 2.5 body内常用标签
2.5.1 HTML语义化
body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的；
虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情，而且在布局的时候多使用语义化的标签，会方便搜索引擎在爬取网页文件时更好地解析文档结构，从而进行收录。
对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，都是用来修改样式的；
#1、<br> 换行
我是帅气逼人的矮跟老师
<br>
我是帅气逼人的矮跟老师
#2、<hr> 分割线
#3、<font> 修改文字大小，颜色
<font color="red" size="10px">我是哈哈哈</font>
#4、<b> 加粗
<b>论颜值，我秒杀宇宙</b>
#5、<u> 下划线
#6、<i> 倾斜
#7、<s> 删除线
html5中推出了一些新的标签
strong == b
ins == u
em == i
del == s
新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事）
strong的语义：定义重要性强调的文字
ins的语义（inserted）：定义插入的文字
em的语义（emphasized）：定义强调的文字
del的语义（deleted）：定义被删除的文字
div与span标签都是没有语义的标签，我们在css中讲解
#1、div用来标记一块内容，没有具体的语义。
#2、span用来标记一行中的一小段内容，也没有具体的语义。2.5.2 字符实体
#1、在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理
#2、字符实体指的是
在HTML中
有的字符是被HTML保留的比如大于号小于号
有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体，如下| 内容 | 代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版权符 | © |
| 注册符 | ® |
2.5.3 h系列标签
语义： 标记内容为一个标题，全称headline；
h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其实是h2以此类推；
虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的；
<h1>床头诗</h1>
<h2>床头诗2</h2>
<h3>床头诗3</h3>
<h4>床头诗4</h4>
<h5>床头诗5</h5>
<h6>床头诗6</h6>
<h7>床头诗7</h7>
在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑，搜索引擎会使用标题将网页的结构和内容编制索引）,比如www.163.com。
2.5.4 p标签
语义： 标记内容为一个段落，全称paragraph；
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>矮跟无敌</title>
</head>
<body>
<h1>Egon</h1>
<p>论身高，鹤立鸡群</p>
<p>论骚气，天下无敌</p>
<p>深得男同，胞喜爱</p>
</body>
</html>2.5.5 img标签
语义： 标记一个图片，全称image；
#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
#2、注意
2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 alt="图片加载失败时显示的内容" 为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。
2.4 title = "鼠标悬停到图片上时显示的内容"
2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形
那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可
只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形2.5.6 a标签
语义： 标记一个内容为超链接，全称anchor，锚；
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
#2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="template/aaa.html">锤你胸口</a>
2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆，
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容"1. 假链接
什么是假链接：
就是点击之后不会跳转的链接，称之为假链接；
假链接存在的意义：
在企业开发前期，其他界面都还没有写出来，
那么我们就不知道应该跳转到什么地方，这时就可使用假链接来代替；
假链接的定义格式
1、href="#" :会自动回到网页的顶部 去掉\#也可
2、href="javascript:" ：不会返回顶部2. 页面内锚点
#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置3. 跳到首页
#1、跳到首页
<a href="">刷新页面，回到顶部，人类感觉不出来区别</a>
<a href="#">回到顶部</a>
#2、注意点：
通过我们的a标签跳转到指定的位置，是没有过度动画的
是直接一下子就跳转到了指定位置,比如京东主页
如果跳到首页需要过渡动画，则不用a标签做，比如天猫主页2.5.7 列表标签
语义： 标记一堆数据是一个整体/列表；
HTML中列表分为三种；
1. 无序列表
#1、作用：
制作导航条、商品列表、新闻列表等
#2、组合使用ul>li
<ul>
<li>炉石传说</li>
<li>王者荣耀</li>
<li>火焰纹章</li>
<li>召唤之夜</li>
<li>荒野大镖客</li>
</ul>
#3、ul标签的属性type（属于列表的样式）
type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
ul {
list-style: none;
}
</style>
#4、注意
ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签2. 有序列表
<h1>收益排名</h1>
<ol>
<li>Alex</li>
<li>Lxx</li>
<li>Egon</li>
</ol>
<!--有序列表能干的事，完全可以用无序列表取代-->
<h1>收益排名</h1>
<ul style="list-style: none">
<li>1. Alex</li>
<li>2. Egon</li>
<li>3. Lxx</li>
</ul>3. 自定义列表
#1、作用分析
选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
无序列表：内容是并列的,没有先后顺序
有序列表：内容是有先后顺序的
自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
#2、自定义列表也是一个组合标签：dl>dt+dd
dl:defination list，自定义列表
dt：defination title，自定义标题
dd：defination description，自定义描述
<dl>
<dt>自定义标题1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定义标题2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定义标题3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</dl>
#3、注意:
3.1 dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签；
3.2 一个dt可以不对应dd，也可对应多个dd，建议一个dt至少对应一个dd；2.5.8 table标签
语义： 标记一段数据为表格；
#1、作用
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行数据
td表一行中的一个普通单元格
th表示表头单元格
#3、注意点：
表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框 1. 表格属性设置
#1、宽度和高度
可以给table和td设置width和height属性
1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高
1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度
#2、水平对齐和垂直对齐
水平对齐align可以给table、tr、td标签设置
垂直对齐valign只能给tr、td标签设置
========水平对齐===========
取值
align=“left”
align=“center”
align=“right”
2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
强调：table只能设置水平方向
2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
========垂直对齐===========
取值
valign=“top”
valign=“center”
valign=“bottom”
2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐
#3、外边距和内边距
只能给table设置
3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"
2. 三种细线表格创作方式
#1、方式一
在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现
<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
<tr bgcolor="white">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white" >
<td>Egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>ALex</td>
<td>male</td>
<td>73</td>
</tr>
<tr bgcolor="white">
<td>Wxx</td>
<td>female</td>
<td>84</td>
</tr>
</table>
#2、方式二
细线表格的制作方式：
1、给table标签设置bgcolor
2、给tr标签设置bgcolor
3、给table标签设置cellspacing="1px"
注意：
table、tr、td标签都支持bgcolor属性
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white" >
<td>Egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>ALex</td>
<td>male</td>
<td>73</td>
</tr>
<tr bgcolor="white">
<td>Wxx</td>
<td>female</td>
<td>84</td>
</tr>
</table>
#3、方式三（style="border-collapse: collapse;border: 1px solid red"）
<table border="1px" style="border-collapse: collapse;border: 1px solid red">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr>
<td>alex</td>
<td>female</td>
<td>19</td>
</tr>
</table>3. 表格结构解析
为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：
#1、表格的标题:caption
特点:相对于表格宽度自动居中对齐
注意:
1.1 该标签一定要写在table标签里，否则无效
1.2 caption一定要紧跟在table标签内的第一个
#2、表格的表头信息:thead
特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
#3、表格的主体信息:tbody
注意：
3.1 如果没有添加tbody，浏览器会自动添加
3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着
表格的高度变化而变化
#4、表尾信息:tfoot
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">
<caption>学员信息统计</caption>
<thead>
<tr bgcolor="white">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>4. 单元格合并
#1、水平向上的单元格colspan
可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
<td colspan="2"></td>
#2、垂直向上的单元格rowspan
可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
#注意注意注意:
1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格
2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并其他：
传统布局
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
#1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
#2、单元格里面嵌套表格
#3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
#4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
#1、快速制作用于演示的html页面
#2、商业推广EDM制作(广告邮件)2.5.9 form标签
语义： 标记表单
#1、什么是表单？
表单就是专门用来接收用户输入或采集用户信息的
#2、表单的格式
<form>
<表单元素>
</form>
#3、详细属性使用介绍如下图
练习代码 配图见下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080/" method="post">
<fieldset>
<legend>注册界面</legend>
<label for="inp1">用户名：</label>
<input id="inp1" type="text" name="username" placeholder="请输入用户名">
<br>
<label for="inp2">密码：</label>
<input id="inp2" type="password" name="password" placeholder="请输入密码">
<br>
<input type='file' name="头像">头像
<br>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<input type="radio" name="gender" value="null">保密
<br>
<input type="checkbox" name="hobbies" value="打篮球">打篮球
<input type="checkbox" name="hobbies" value="female" checked value="踢足球">踢足球
<input type="checkbox" name="hobbies" value="null" value="羽毛球" checked>羽毛球
<br>
<input type="text" disabled name="k" value="1111">
<br>
<!-- 可指定参数style="resize: none"-->
<textarea name="comment" id="" cols="10" rows="10" >
这是评论信息
</textarea>
<br>
<select name="籍贯" size="2" >
<option value="北京111" >北京</option>
<option value="上海222">上海</option>
<option value="深圳333" selected>深圳</option>
</select>
<br>
<select name="籍贯" >
<optgroup label="一线城市">
<option value="北京111" >北京</option>
<option value="上海222">上海</option>
<option value="深圳333" selected>深圳</option>
</optgroup>
<optgroup label="二线城市">
<option value="杭州">杭州</option>
<option value="烟台">烟台</option>
<option value="德州" selected>德州</option>
</optgroup>
</select>
<br>
<input type="submit" value="登录">
<br>
</fieldset>
</form>
</body>
</html>
三、CSS
3.1 简单介绍CSS
CSS全称Cascading Style Sheet层叠样式表，是专门用来为HTML标签添加样式的；
层叠属于CSS的三大特性之一后面介绍，样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等，表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里；
不用CSS我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性；
缺点很明显，如下；
记忆困难： 需要记忆每个标签的所有样式相关属性，比如某个标签没有某个样式相关的属性，那么设置了也没有效果；
代码耦合度高： HTML语义与样式耦合到一起；
拓展性差： 当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改；
运用CSS可以有效解决以上问题；
3.2 如何使用CSS
CSS语法分为两部分；
#1、选择器
#2、声明
声明由属性和值组成，多个声明之间用分号分隔，如下图
CSS的四种引入方式
行内式
行内式是在标签的style属性中设定CSS样式，不推荐使用；
<p style='color:red;font-size:50px;text-align: center'> 你好 </p>嵌入式
嵌入式是将CSS样式集中写在网页head标签内的的style标签对中；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>
外链式
通过link导入外部链接路径；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<p>你好</p>
</body>
</html>
导入式
import关键字导入外部链接路径，后出的语法部分浏览器不支持；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*形式一：*/
/*@import "css/mystyle.css";*/
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>
<body>
<p>你好</p>
</body>
</html>导入式与链接式的区别
1、<link/>标签属于XHTML,@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
2、导入式的缺点：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，用户体验差。
3、链接式的优点：
使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。加载优先级
行内式最高，嵌入式，导入式以及外链式平级按先后顺序判断；
其他注意点
1、style标签必须放到head内 ,type="text/css"代表文本类型的css
2、type属性其实可以不用写，默认就是type="text/css"
3、设置样式时必须按照固定的格式来设置，key:value;
其中;规范写不省略
3.3 CSS选择器
3.3.1 基本选择器
1. id选择器
作用： 根据指定的id名称，在当前界面中找到对应的唯一标签，然后设置属性；
格式：
#id名称 {属性：值;}使用注意：
- 在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用；
- 每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复；
- 引用id一定要加#；
- id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等；
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你要跟龙骑士比比枪法吗¿</title>
<style>
#p1 {font-size: 10px;}
#p2 {color: green}
#p3 {color: yellow}
</style>
</head>
<body>
<p id="p1">床头诗</p>
<p id="p2">床前明月光</p>
<p id="p3">地上鞋两双...</pid>
</body>
</html>2. 类选择器
作用： 根据指定的类名称，在当前界面中找到对应的标签，然后设置属性；
格式：
.类名称 {属性：值;}使用注意：
- 类名就是专门用来给某个特定的标签设置样式的；
- 每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复；
- 引用class一定要加点.；
- 类名的命名规则与id的命名规则相同；
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你要跟龙骑士比比枪法吗¿</title>
<style>
.p1 {font-size: 10px;}
.p2 {color: yellow}
.p3 {background-color: green}
</style>
</head>
<body>
<p class="p1">床头诗</p>
<p class="p2 p3">床前明月光</p>
<p class="p2 p3">地上鞋两双...</pid>
</body>
</html>3. 标签选择器
作用： 根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性；
格式：
标签名称 {属性：值;}使用注意：
- 只要是HTML的标签都能当做标签选择器；
- 标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签；
- 标签选择器，无论嵌套多少层都能选中；
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {color:yellow;background-color: green}
</style>
</head>
<body>
<p>少年阿宾
<ul>
<li>
<ul>
<li>
<p>第一章 房东太太</p>
<ul>
<li>
<p>阿宾的高中成绩并不理想...</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
</body>
</html>4. 通配符选择器
作用： 选择所有标签；
格式：
* {属性：值；}使用注意：
在企业开发中一般不会使用通配符选择器，由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机动战士高达</title>
<style>
* {color: yellow;}
.p1 {color: red;}
.p2 {color: white;background-color: blueviolet}
</style>
</head>
<body>
<h1>逆袭的夏亚</h1>
<p class="p1">赤色彗星</p>
<p class="p2">白色恶魔</p>
<a href="">联邦军的ms都是怪物吗</a>
</body>
</html>3.3.2 组合选择器
1. 后代选择器
作用： 找到指定标签的所有后代子子孙孙标签，设置属性；
格式：
标签名1 xxx {属性：值;}使用注意：
- 后代选择器必须用空格隔开；
- 后代不仅仅是儿子，也包括后面的子子孙孙；
- 后代选择器不仅可以使用标签名称，还可以使用其他选择器比如id或class；
- 后代选择器可以通过空格一直延续下去；
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div p ul{
color: green;
}
</style>
</head>
<body>
<div>
<p>爸爸</p>
<ul>
<p>儿子</p>
<li>
<p>孙子</p>
</li>
</ul>
</div>
</body>
</html>2. 子元素选择器
作用： 找到指定标签的所有特定的直接子元素，然后设置属性；
格式：
标签名1>标签名2 {属性：值;}
先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素使用注意：
- 子元素选择器之间需要用>符号链接，并且不能有空格，比如div >p会找div标签的所有后代标签，标签名为">p"；
- 子元素选择器只会查找儿子，不会查找其他嵌套的标签；
- 子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class；
- 子元素选择器可以通过>符号一直延续下去；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div > p {color: red}
</style>
</head>
<body>
<div>
<p>儿子</p>
<ul>
<li>
<p>孙子</p>
</li>
</ul>
</div>
</body>
</html>3. 毗邻选择器
CSS2推出，又称相邻兄弟选择器；
作用： 选定紧跟其后的那个标签；
格式：
选择器1+选择器2 {属性：值;}使用注意：
- 毗邻选择器必须通过+号链接；
- 毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div+p {color: red}
</style>
</head>
<body>
<div>
<p>p儿子</p>
<ul>
<li>
<p>p孙子</p>
</li>
</ul>
</div>
<p>p爸爸</p>
<p>p妈妈</p>
</body>
</html>4. 弟弟选择器
CSS3推出，又称通用兄弟选择器；
作用： 给指定选择器后面的所有选择器中的所有标签设置属性；
格式：
选择器1~选择器2 {属性：值;}使用注意：
- 通用兄弟选择器必须用~来链接；
- 通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签，无论有没有被隔开，都可以被选中；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div~p {color: red}
</style>
</head>
<body>
<div>
<p>p儿子</p>
<ul>
<li>
<p>p孙子</p>
</li>
</ul>
</div>
<hr>
<p>p爸爸1</p>
老王
<p>p妈妈</p>
</body>
</html>3.3.3 其他选择器
1. 交集选择器
作用： 给所有选择器选中的标签中，相交的那部分标签设置属性；
格式：
选择器1选择器2 {属性：值;}使用注意：
- 选择器与选择器之间没有任何链接符号；
- 选择器可以使用标签名称、id、class；
- 交集选择器在企业开发中并不多见，了解即可，如下案例p.part1 完全可以用.part1取代；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
</style>
</head>
<body>
<p class="part1">我是段落part1</p>
<p id="p1">我是段落p1</p>
<p class="part1">我是段落part1</p>
<p>我是段落p</p>
</body>
</html>2. 并集选择器
作用： 给所有满足条件的标签设置属性；
格式：
选择器1,选择器2 {属性：值;}使用注意：
- 选择器与选择器之间必须用逗号来链接；
- 选择器可以使用标签名称、id、class；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.part1,h1,a {
color: red;
}
</style>
</head>
<body>
<h1>哈哈啊</h1>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<a href="#">我是我</a>
<p>我是段落</p>
</body>
</html>3. 序列选择器
作用： css3中新推出的选择器中，最具代表性的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个；
格式：
#3.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
#3.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#3.3 其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个案例：
这里只示范部分，可参考以此类推，进行实践；
#1、同级别的第一个
#1.1 示范一
p:first-child {
color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话第一个p和div中的第一个p都变成红色，
#1.2 示范二
p:first-child {
color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签
<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p4. 属性选择器
作用： 根据指定的属性名称找到对应的标签，然后设置属性，该选择器，最常用于input标签；
格式与用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1：找到所有包含id属性的标签
[id]
例2：找到所有包含id属性的p标签
p[id]
例3：找到所有class属性值为part1的p标签
p[class="part1"]
例4：找到所有href属性值以https开头的a标签
a[href^="https"]
例5：找到所有src属性值以png结果的img标签
img[src$="png"]
例6：找到所有class属性值中包含part2的标签
[class*="part"] 案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>5. 伪类选择器
作用及使用方式：
#1、常用的几种伪类选择器。
#1.1 没有访问的超链接a标签样式：
a:link {
color: blue;
}
#1.2 访问过的超链接a标签样式：
a:visited {
color: gray;
}
#1.3 鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
#1.4 鼠标点击瞬间的样式：
a:active {
color: green;
}
#1.5 input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
使用注意：
- a标签的伪类选择器可以单独出现，也可以一起出现；
- a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效；
link，visited，hover，active - hover是所有其他标签都可以使用的；
- focus只给input标签使用；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color: red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
</html>6. 伪元素选择器
常用：
1 first-letter：杂志类文章首字母样式调整
例：p:first-letter {font-size: 48px;}
2 before：用于在元素的内容前面插入新内容
例：p:before {content: "*";color: red;}
3 after：用于在元素的内容后面插入新内容
例：p:after {content: "?";color: red;}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p:first-letter {
font-size: 50px;
}
/*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/
a::after {
content: "?";
color: red;
}
a:before {
content: "-";
color: green;
}
</style>
</head>
<body>
<p>爱爱爱爱</p>
<a href="#" class="help">啊啊啊啊</a>
<a href="#" class="help">啊啊啊</a>
<a href="#" class="help">嗷嗷嗷</a>
</body>
</html>3.4 CSS的三大特性
3.4.1 继承性
定义： 给某一个元素设置一些属性，该元素的后代也可以使用，这个就是继承性；
注意点：
- 只有以color、font-、text-、line-开头的属性才可以继承；
- a标签的文字颜色和下划线是不能继承别人的；
- h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p {
color: red;
}
.ppp {
color: green;
}
</style>
</head>
<body>
<p class="ppp">我是段落</p>
</body>
</html>3.4.2 优先级
1. 优先级定义
定义： 当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定；
优先级：
整体优先级从高到底：行内样式>嵌入样式>外部样式
行内样式并不推荐使用，我们以嵌入为例来介绍优先级；
案例
大前提：直接选中 > 间接选中(即继承而来的)
#1、以下为直接选中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
#2、以下为间接选中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>2. 直接间接选中优先级判断案例解析
如果都是间接选中，那么谁离目标标签比较近，就听谁的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*离目标近*/
li {
color: red;
}
/*离目标远*/
ul {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p {
color: red;
}
/*同样都是标签选择器，谁写在后面谁生效*/
p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠；
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow;
}
li {
color: #7e1487;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>3. 优先级之!important
作用： 它是一种不讲道理的方式，用来强制提升属性的优先级为最高，但是不推荐使用。因为大量使用!important的代码是无法维护的；
使用注意：
- !important只能用于直接选中，不能用于间接选中；
- !important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升；
- !important必须写在属性值分号的前面；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow !important;
}
li {
color: #7e1487;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>4. 优先级之权重计算
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级；
计算方式：
- id数多的优先级高；
- id数相同，则判定类数多的优先级高；
- id数、class数均相同，则判定标签数多的优先级高；
- 若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
#id1 #id2 #id3 .ppp{
color: red;
}
#id2 #id3.aaa p{
color: purple;
}
#id1.ccc>.bbb>.aaa>p {
color: pink;
}
#id1 .aaa .ppp {
color: green;
}
#id2 .aaa p {
color: yellow;
}
div ul li p {
color: blue;
}
div ul p {
color: cyan;
}
</style>
</head>
<body>
<div id="id1" class="ccc">
<ul id="id2" class="bbb">
<li id="id3" class="aaa">
<p class="ppp">我是段落</p>
</li>
</ul>
</div>
</body>
</html>3.4.3 层叠性
定义： 层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果；
注意：
层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性；
3.5 CSS属性设置
3.5.1 字体属性
1. 文字粗细
font-weight：XX;| 取值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bord | 粗体 |
| border | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等于normal，700等于bord |
| inherit | 继承父元素的粗细值 |
2. 文字风格
font-style:XX;
normal 正常 默认值
italic 倾斜3. 文字大小
font-size:XX;
通过font-size设置文字大小一定要带单位，即一定要写px
如果设置成inherit表示继承父元素的字体大小值。4. 文字字体
font-family:XX;
"Microsoft Yahei", "微软雅黑", "Arial", sans-serif
常见字体：
serif 衬线字体
sans-serif 非衬线字体
中文：宋体，微软雅黑，黑体
注意：
设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。
如果取值为中文，需要用单或双引号扩起来；5. 文字属性简写
/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: 'serif','微软雅黑';*/
简写为
font: bolder italic 50px 'serif','微软雅黑'; 6. 文字颜色
| 取值 | 格式 | 描述 |
|---|---|---|
| 单词 | color:yellow; | 大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色 |
| rgb | color：rgb(255,0,0) | 三原色red，green，blue，数字的范围0-255，0代表不发光，255代表发光，值越大越亮，发光元件协调三种颜色发光的明亮度可以调节出其他颜色 |
| rgba | color：rgba(255,0,0,0.1); | a代表透明度a取值0-1，取值越小，越透明 |
| 十六进制 | color: #FF0000; | 如#FFEE00 其中FF代表R，EE代表G，00代表B |
3.5.2 文本属性
1. 元素中文本的水平对齐方式
text-align:XX;| 值 | 描述 |
|---|---|
| left | 左边对齐，默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
2. 文本装饰
text-decoration:XX;| 值 | 描述 |
|---|---|
| none | 默认值，定义标准的文本，可以用来去掉a标签的下划线 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的文本装饰属性值 |
3. 首行缩进
#将段落的第一行缩进 32像素,16px;=1em;
p {text-indent: 32px;}4. 行高
line-height：XX;
3.5.3 背景属性
1. 设置标签背景颜色
background-color: red;
background-color: rgb(0,255,0);
background-color: rgba(0,255,0,0.1);
background-color: #00ffff;2. 设置标签背景图片
background-image: url("images/2.jpg");
background-image: url("图片网址");
注意：如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充3. 设置标签背景图片，宽高
background-size: 300px 300px;
background-size: 100% 100%;4. 设置标签背景图片平铺方式
background-repeat: repeat; #默认值，在垂直和水平方向都重复
background-repeat: no-repeat; #不重复，背景图片将仅显示一次
background-repeat: repeat-x; #背景图片将在水平方向平铺
background-repeat: repeat-y; #背景图片将在垂直方向平铺
应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复
这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问
例如很多网站的导航条都是用这种手法制作的5. 设置固定还是滚动
设置标签背景图片在标签中是固定的，还是随着页面而滚动
background-attachment: scroll; #默认值，背景图片会随着滚动条的滚动而滚动
background-attachment: fixed; #不会随着滚动条的滚动而滚动6. 控制背景图片的位置
background-position：水平方向的值，垂直方向的值
6.1 具体的方位名词
水平方向：left，center，right
垂直方向：top，center，bottom
如果只设置了一个关键词，那么第二个值就是"center"。
6.2 百分比
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果只设置了一个值，另一个值就是50%。
6.3 像素
第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果只设置了一个值，另一个值就是50%。
可以混合使用%和position值7. 设置从父元素继承backgrond属性值
以上背景属性的值均可以设置为inherit，代表从父元素继承background属性；
8. 案例
属性缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 500px;
height: 500px;
/*background-color: red;*/
/*background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510215639652-367382094.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: right bottom;*/
/*background-size: 100px 100px;*/
background: red url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510215639652-367382094.jpg") no-repeat right bottom/100px 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景图片和插入图片的区别
#1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置
#2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以
#3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片rgba与opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1 {
height: 800px;
/*背景颜色不能与背景颜色同时使用，如果想给背景图片设置透明度，则必须使用opacity*/
background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg");
background-size:300px auto;
opacity: 0.55; /*改变整个标签的透明度*/
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>9. 精灵图
什么是精灵图
CSS精灵图是一种图像合成技术，例如一个电商网站可能有很多图片，例如有10张图片，这就要求客户端发10次请求给服务端但其实一次请求的带宽就足够容纳10张图片的大小，精灵图的作用就是用来减少请求次数，以及降低服务器处理压力；
如何使用精灵图
CSS的精灵图需要配合背景图片和背景定位来使用；
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
.box1 {
width: 86px;
height: 28px;
background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510222513182-115432192.png");
background-repeat: no-repeat;
background-position: -425px -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>3.5.4 盒子模型
1. 盒子模型初步解析
HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么可与做出如下比喻；
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
2. 盒子模型的高度和宽度
内容的宽度和高度
通过标签的width和height属性设置
元素/盒子模型的宽度和高度
宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
高度= 。。。。元素/盒子模型空间的宽度和高度
宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
高度= 。。。。案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型宽度和高度</title>
<style>
span,a,b,strong {
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#"> 我是草链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>如何让 height:100%起作用；
需要给这个元素的所有父元素的高度设定一个有效值。如现在你给div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度。
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
这样这个div的高度就会100%了
</p>
</div>
</body>
</html>
3. CSS显示模式(块级，行内，行内分级)
在HTML中将所有标签分为两类，分别是容器级和文本级；
在CSS中也将所有标签分为两类，分别是块级元素和行内元素；
① HTML容器级和文本级
容器级标签： 可以嵌套其他的所有标签；
div、h、ul>li、ol>li、dl>dt+dd文本级标签： 只能嵌套文字、图片、超链接；
span、p、buis、strong、em、ins、del②CSS中块级与行内
块级： 块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级；
div、h、ul、ol、dl、li、dt、dd、p行内： 行内元素不会独占一行，所有除了p标签以外的文本标签都是行内；
span、buis、strong、em、ins、del③块级元素与行内元素的区别
I 块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
II 行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
III 行内块级元素inline-block
不会独占一行
可以设置宽高案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*块级元素*/
div,p,h1 {
background-color: red;
width: 200px;
height: 100px;
}
/*行内元素*/
span,b,strong {
background-color: blue;
width: 200px;
height: 100px;
}
/*行内块级元素*/
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--块级-->
<div>我是div</div>
<p>我是段落 </p>
<h1>我是标题</h1>
<hr>
<!--行内-->
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>
<!--行内块级-->
<img src="ys.jpg" alt="">
<img src="ys.jpg" alt="">
</body>
</html>4. CSS显示模式转换
可以通过标签的display属性设置显示模式
none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。5. 盒子模型各部分解析
①border边框
同时设置四条边的边框
border:边框的宽度 边框的样式 边框的颜色分别设置四条边的边框
border-left:边框的宽度 边框的样式 边框的颜色
border-top:边框的宽度 边框的样式 边框的颜色
border-right:边框的宽度 边框的样式 边框的颜色
border-bottom:边框的宽度 边框的样式 边框的颜色分别指定宽度、格式、颜色
I 连写：（分别设置四条边的边框）
bord-width: 上 右 下 左
border-style:上 右 下 左
border-color：上 右 下 左
II 注意点：
这三个属性时按照顺时针，即上、右、下、左来赋值的
这三个属性的取值省略时的规律
省略右面，右面默认同左边
省略下部，下面默认跟上面一样
只留一个，那么其余三边都跟这一个一样非连写(了解)
border-left-width: ;
border-left-style: ;
border-left-color: #000;
border-top-width: ;
border-top-style: ;
border-top-color: #000;
border-right-width: ;
border-right-style: ;
border-right-color: #000;
border-bottom-width: ;
border-bottom-style: ;
border-bottom-color: #000;
其他：
http://www.w3school.com.cn/cssref/pr_border-style.asp
边框的样式
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。边框角设置弧度
border-radius
/* 单独设置一个角：数值越大，弧度越大*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* 缩写设置 */
border-radius: 20px;/* 所有角设置相同值 */
border-radius: 20px 10px 10px 20px; /* 顺时针顺序：上左 上右 下左 下右*/
/* 百分比设置 */
border-radius: 50%;
/* 椭圆圆弧设置 */
border-radius: 25%/50%; /* 前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向 */②padding内边距
边框与内容的距离就是内边距；
非连写
padding-top：20px；
padding-right：20px；
padding-bottom：20px；
padding-left：20px；
连写
padding：上 右 下 左;
注意
⑴给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值
⑵padding是添加给父级的，改变的是父级包含的内容的位置
⑶内边距也会有背景颜色③外边距
标签与标签之间的距离就是外边距；
非连写
margin-top：20px；
margin-right：20px；
margin-bottom：20px；
margin-left：20px；
连写
margin：上 右 下 左;
⑴外边距的那一部分是没有背景颜色的
⑵外边距合并现象
在默认布局的水平方向上，默认两个盒子的外边距会叠加
而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的④内边距vs外边距
在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding其次再考虑margin，margin本质上是用于控制兄弟直接的关系的，padding本质才是控制父子关系的关系；
⑤盒子居中和内容居中
内容居中
1、让一行内容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;
2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）
让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中，
比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行
的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading为20，底部padding为20
*/
height: 80px;
line-height: 20px;
padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;盒子居中
text-align center；只能让盒子中存储的文字、图片水平居中
如果想让盒子自己相对于父元素水平居中，需要用到
margin: 0 auto;⑥清除默认边距
#1、为什么要清空默认边距（外边距和内边距）
浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距
#2、如何清空默认的边距
* {
margin: 0px;
padding: 0px;
}
#3、注意点：
通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，参考：https://yuilibrary.com/yui/docs/cssreset/
拷贝代码：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
可以查看京东，bat主页也是这么做的，在企业开发中也应该像上面这么写3.6 CSS网页布局
3.6.1 网页布局方式
什么是网页布局方式
布局可以理解为排版，类似于word，nodpad++等文本编辑器的排版方式，网页布局就指的是浏览器怎么对网页内的元素进行排版；
网页布局的三种方式： 标准流，浮动流，定位流；
3.6.2 标准流
标准流排版方式又称文档流/普通流，所谓文档流，就指的是元素排版过程中，元素会自动从左往右，从上往下流式排列，浏览器默认就是标准流排版；
在CSS中将元素分为三类： 块级，行内，行内块级；
标准流中有两种排版方式： 垂直排版，水平排版；
垂直排版: 如果元素是块级元素，那么就会垂直排版；
水平排版： 如果元素是行内元素或行内块级元素，那么就会水平排版；
3.6.3 浮动流
浮动流是一种半脱离标准流的排版方式，下面进行解析什么是脱离文档流以及半脱离；
flort:左/右;1. 什么是脱离文档流
浮动元素脱离文档流
意味着其不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版，无论是什么级的元素都可以设置宽高；
综上所述，浮动流中的元素和标准流总的行内块级元素很像；
浮动元素脱标文档流
意味着当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标，如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后会覆盖填充上来的元素；
浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值；
一旦使用了浮动流，则margin:0 auto;失效；
2. 什么是半脱离文档流
脱离分为半脱离与完全脱离；
完全脱离
指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，
半脱离
之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，贴靠的准则就是：
同一个方向上谁先浮动，谁在前面
不同方向上左浮动找左浮动，右浮动找右浮动案例：
案例一： 浮动元素浮动后位置取决于之前标准流的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: left;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
案例二：
同一个方向上谁先浮动，谁在前；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: left;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
float: left;
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
案例三：
不同方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: right;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
float: right;
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>3. 浮动元素贴靠问题
当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示；
当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素贴靠问题</title>
<style>
.father {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box1 {
float: left;
width: 50px;
height: 300px;
background-color: rebeccapurple;
}
.box2 {
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3 {
float: left;
width: 250px;
/*width: 300px;*/
/*width: 310px;*/
/*width: 400px;*/
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box3">3</div>
<div class="box3">3</div>
<div class="box3">3</div>
<div class="box3">3</div>
</div>
</body>
</html>4. 浮动元素字围现象
没有浮动的文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围 ；
只要是行内元素都会有字围效果；
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素字围现象</title>
<style>
img {
float: left;
width:300px;
}
p {
background-color: #b9950c;
}
</style>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526318630409&di=8186a1ab56ed36696ade3e23a228acfc&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F58be1c554d5f0.jpg" alt="">
<p>
迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员。2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。2014年，她主演了奇幻剧《逆光之恋》。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖。2016年，其主演的现代剧《麻辣变形计》播出；同年，她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖。2017年，迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名。2018年 ...
迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员 [1] 。
2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道 [2] 。2014年，她主演了奇幻剧《逆光之恋》 [3] 。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖 [4] 。2016年，其主演的现代剧《麻辣变形计》播出 [5] ；同年，她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖 [6] 。2017年，迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名 [7] 。2018年4月20日，主演的爱情喜剧电影《21克拉》上映 [8] 。
迪丽热巴出生于新疆乌鲁木齐市，父亲是新疆歌舞团的独唱演员。因受父亲影响，迪丽热巴从小便对各种艺术类的东西颇感兴趣，并主动要求学习钢琴、舞蹈、小提琴、吉他等 [9] 。
2001年，9岁的迪丽热巴被父亲带去一所艺术学院参加考试，当时她以为是上兴趣班，结果被录取后才发现是一个专业的舞蹈院校，而迪丽热巴也开始了为期六年的民族舞、芭蕾舞专业学习。2007年，从艺术学院毕业的迪丽热巴成为了新疆歌舞团的舞蹈演员 [10] 。2009年，迪丽热巴还在东北师范大学民族学院读了一年预科，在此期间她还参加了吉林省的首届少数民族新歌大赛，并最终获得了省级三等奖的成绩 [11] 。
之后，迪丽热巴却慢慢发现这并不是自己想要的生活。于是决定继续求学，去看看外面的世界，因为有不错钢琴基础，所以本来想报考的是中央音乐学院，可报名时却看到了中戏和上戏在招生，便突然决定改学表演。而迪丽热巴会有这样的决定则是受到了她钢琴老师的指点。2010年，迪丽热巴顺利考入了上海戏剧学院表演系戏剧影视专业；同年，她参加了陆川执导的古装片《王的盛宴》女主角“虞姬”的上海站海选 [12] ，并因此获得了颇多关注 [13] 。
</p>
</body>
</html>5. 浮动流排版
在企业开发中，如何对网页进行布局
#1、垂直方向的布局用标准流布局，水平方向用浮动流布局
#2、从上至下布局
#3、从外向内布局
#4、水平方向可以先划分为一左一右再对左边后者右边进一步布局6. 浮动流高度问题(父级坍塌)
在标准流中,内容的高度可以撑起父元素的高度，在浮动流中,浮动的元素是不可以撑起父元素的高度的，当子元素都浮动起来后，父亲的内容高度即height变为0，父元素就好像塌陷了一样，因而又称为父级塌陷；
7. 解决浮动问题
方式一：
为浮动的那些子元素的父亲设置一个高度；
在企业开发中，这样限定固定高度会使页面操作不灵活，不推荐；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header {
border: 5px solid #000;
height: 200px;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.nav {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.content {
width: 960px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">logo</div>
<div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>方式二：
clear : none | left | right | both
注意：clear这个属性必须设置在块级、并且不浮动的元素中
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许左右有浮动对象案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box11 { border:3px solid red;
}
.box1 {height: 100px;
width: 200px;
background-color: #bdc724;
float: left;}
.box2 {height: 200px;
width: 300px;
background-color: blue;
clear:both;
}
</style>
</head>
<body>
<div class="box11">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>注意点：
元素是从上到下、从左到右依次加载的。在右侧元素还没有加载到时，clear：right是无用的；
这种方式有个弊端，当我们给某个元素添加clear属性之后，那么这个属性的margin-top属性会变质；方式三：
第三种为隔墙法，分为外墙法和内墙法；
外墙法
在两个盒子中间添加一个额外的块级元素，再给这个额外添加的块级元素设置clear：both；属性；
注意：
外墙法它可以让第二个盒子使用margin-top属性；
外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度作margin的替代品；
在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素，再给这个额外添加的块级元素设置clear：both；属性；注意：
内墙法它可以让第二个盒子使用margin-top属性
内墙法可以让第一个盒子使用margin-bottom属性方式四：
本质原理与内墙法一样，但我们用的css的伪元素选择器实现的，就应该用css来控制样式，符合前端开发思想；
详细用法
.header:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素通常元素写table。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。
visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
.header { *zoom:1;} <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="header"></div>
#II、必须要写的是下面这三句话
content: '.';
display: block;
clear: both;
#III、新浪首页清除浮动的方法，也是采用伪元素
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;方式五：
overflow:hidden 它除了清除浮动还有其他方面的用途
#1、可以将超出标签范围的内容裁剪掉
#2、清除浮动
#3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了将超出范围的内容裁减掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 50px;
background-color: red;
/*将超出标签范围的内容剪裁掉*/
overflow: hidden;
}
</style>
</head>
<body>
<div>
阿斯蒂芬俺的沙发士大夫撒分萨芬按时发到付阿道夫按时大是大非啊
阿道夫阿士大夫撒地方
</div>
</body>
</body>
</html>清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
}
.header {
overflow: hidden;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.nav {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.content {
width: 960px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">logo</div>
<div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>防止父亲盒子被顶下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动方式六</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
/*border: 1px solid #000;*/
overflow: hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>3.6.4 定位流
1. 相对定位
格式：
position：relative
配合以下四个属性一起使用
top:20px;
left:30px;
right:40px;
bottom:50px;相对定位就是相对于自己以前在标准流中的位置来移动；
注意点
1、在相对定位中同一个方向上的定位属性只能使用一个；
top/bottom 只能用一个
left/right 只能用一个
2、相对定位是不脱离标准流的，会继续在标准流中占用一份空间；
3、由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的；
4、由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局，即给相对定位的标签设置marin或padding，是以该标签原来的位置为基础来进行偏移的；应用场景
#1、用于对元素进行微调
#2、配合后面学习的绝对定位来使用 2. 绝对定位
格式：
position：absolute
需要配合以下四个属性一起使用
top:20px;
left:30px;
right:40px;
bottom:50px;注意点
1、默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点；
2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点；
2.1 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不行)；
2.2 如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点；
3、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素；
4、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚动而滚动；
5、一个绝对定位的元素会忽略祖先元素的padding绝对定位盒子水平居中
#1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中；
#2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px; 应用场景
#1、用于对元素进行微调
#2、配合相对定位来使用
企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用===>子绝父相
那为何要用子绝父相呢，请看下图
3. 固定定位
#1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）
背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动
而固定定位可以让某一个元素不随着滚动条的滚动而滚动
#2、注意点
1、固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
2、固定定位的元素是脱离标准流的，不会占用标准流中的空间
3、固定定位和绝对定位一样不区分行内、块级、行内块级
4、E6不支持固定定位 案例： 定制回到顶部图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 2000px;
height: 200px;
background-color: green;
}
.box3 {
width: 300px;
height: 3000px;
background-color: blue;
}
a {
width: 100px;
height: 100px;
background-color: pink;
text-align: center;
line-height: 100px;
border-radius: 50%;
position: fixed;
bottom: 0;
right: 0;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<a href="#">回到顶部</a>
</body>
</html>4. 静态定位
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流；
5. z-index属性
z-index属性： 用于指定定位的元素的覆盖关系；
1.1、z-index值表示谁压着谁。数值大的压盖住数值小的。
1.2、只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝
对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。
1.4、如果大家都没有z-index值（默认所有元素z-index值为0），或者z-
index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了
的元素，永远能够压住没有定位的元素。
#2、注意点：从父现象（父亲怂了，儿子再牛逼也没用）
父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁
扫一扫
1806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
