3万字干货HTML+CSS入门指南（建议收藏）

什么是浏览器

• 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已

• 常见主流浏览器
  

• 浏览器市场份额-国内统计
• 浏览器市场份额-国外统计

• 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现
  • IE内核 Trident
  • 谷歌内核 WebKit / Blink
  • 火狐内核 Gecko
  • Safarri内核 WebKit
  • 欧朋内核 Presto

---

什么是服务器

• 服务器也是电脑，只不过是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机
• 服务器是专门用于存储数据电脑， 访问者可以访问服务器获得服务器上存储的资源
• 服务器一旦关机，访问者就无法访问
  

---

访问网页原理

浏览器请求数据的原理

• 我们是如何通过浏览器查看网页上的内容的？

• 1.打开IE缓存文件夹

  • C:\Users\Jonathan_Lee\AppData\Local\Microsoft\Windows\Temporary Internet Files
  • Jonathan_Lee为个人电脑用户名名称

• 2.清空该文件夹
  

• 3.用IE打开网页
  

• 4.发现文件夹下多了很多文件（.html、.css、.js、.png等）， 仔细观察不难发现其实这些文件都是被访问网页上的内容

• 5.结论

  • 访问网页时是有真实的、物理的文件传输的
  • 网页不是一个文件，而是一堆文件组成的
  • 我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地

---

浏览器请求数据的过程

• 1.按下回车时浏览器根据输入的URL地址发送请求报文

• 2.服务器接收到请求报文，会对请求报文进行处理

• 3.服务器将处理完的结果通过响应报文返回给浏览器

• 4.浏览器解析服务器返回的结果，将结果显示出来
  

• 请求过程验证

  • 1.利用chome浏览器打开一个网页
  • 2.打开开发人员工具
  • 3.打开Network查看请求报文和响应报文
    • 3.1请求报文
    • 一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分
      
    • 3.2响应报文
    • 一个HTTP响应报文由响应行、响应头、响应体组成
      
      

---

什么是URL

• 1.我们在浏览器的地址栏中输入的地址其实就是URL

• 2.URL格式：

  • 127.0.0.1/index.html （浏览器会自动补全http:和：80）
  • http://127.0.0.1/index.html （浏览器会自动补全：80）
  • http://127.0.0.1:80/index.html （完整格式）
  • 协议类型://ip地址:端口号/资源路径/资源名称

• 3.URL拆分

  • 网络协议类型 http://
  • 服务器IP地址 127.0.0.1
  • 服务器端口号 :80
  • 资源路径 网页在服务器上的路径
  • 资源名称 index.html

• 4.URL拆分后每一部分的作用

• 4.1服务器IP地址 和 服务器端口号它们两的作用：

  • 告诉浏览器要去什么地方才能找到对应的服务器， 也就是告诉浏览器服务器的详细地址
  • 服务器IP地址相当于现实生活中的地址； 例如：广州市天河区棠安苑
  • 服务器端口号相当于现实生活中的门牌号码； 例如： 9栋909室
  • 那么如果将地址和门牌号码结合在一起， 就是我的详细地址

• 

• 4.2资源名称它的作用：

  • 告诉服务器我需要获取哪一个文件

• 4.3资源名称

  • 需要访问的文件名称
  • 
  • 

• 5.补充

  • URL全称Uniform Resource Locator(统一资源定位符)， 互联网上的每一个资源都有一个唯一的URL地址
  • 由于IP地址全都是数字， 没有任何的含义，比较难以记忆。 所以在访问网页时最常见的不是IP地址而是“域名”（一串有含义的字母OR数字）
  • 好比： http://www.baidu.com AND http://111.13.100.92:80/

---

什么是HTTP协议

• 1.HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议

• 2.什么是协议?

  • 在现实生活中有很多的协议, 例如租房协议/买卖协议/离婚协议
  • 无论是什么协议他们都是一个共同点, 就是用来规范/约束某一类事物

• 3.沟通问题?

  • 沟通最常见的问题就是语言不通, 例如中国人和美国人沟通, 一个人说中文, 一个人说英文, 如果两个人都不懂中文或者英文, 那么就会出现沟通问题
  • 如果要想解决沟通文件, 是不是需要先拟定规定, 两个人都说中文, 或者两个人都说英文, 或者请一个既懂中文又懂英文的翻译

• 4.HTTP协议是用来规范/约束哪一类事物?

  • 浏览器访问网页其实就是去服务器请求数据, 所以浏览器需要和服务器沟通, 所以也会存在沟通问题
  • HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是规范/约束浏览器和服务器之间如何沟通

---

其它知识储备

• 在Windows系统中如何查看文件的扩展名

  • 默认情况下Windows系统是不显示文件的扩展名的, 但是作为一个开发者而言, 查看文件的扩展名是我们的必备技能
  • win10: 随便打开一个文件夹–>点击查看–>将文件扩展名的选项勾选上
    

• 电脑上的一个文件是可以"同时"被多个软件打开的, 不同的软件打开可能会有不同的效果

  • 例如: 同一个index.html文件可以被多个浏览器和记事本一起打开
  • 例如: .html文件通过浏览器打开不可以编辑, 通过记事本打开可以编辑

• 什么是纯文本文件?

  • 我们Windows电脑上有一款默认安装好的软件叫做记事本. 这款软件就是专门用来打开纯文本文件的, 所以只要能够被记事本打开, 并且能够正常显示的文件都是纯文本文件
  • .html的文件可以被记事本打开, 并且能够正常显示,所以.html文件是一个纯文本文件

什么是HTML

• HTML其实是HyperText Markup Language的缩写, 超文本标记语言

---

HTML的作用

• 1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开

郑伊健

郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] 

1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。

• 2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落…, 所以导致了显示的格式不正确

• 

• 3.正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.

  • 这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的
  • 所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

<h1>郑伊健h1>

<p>郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] p>

<p>1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。p>

• 

• 注意事项:

  • 虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的

• H1标签它的作用是什么?

  • 错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗
  • 正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的

---

HTML发展史

• 

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创始人
百度百科

---

网页的固定格式

• 1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
• 2.写信基本结构

敬爱的江哥:
      您好!
      正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
      此致
敬礼!
                                                              你的朋友 伊健
                                                              2066年6月6日

• 3.编写网页的步骤:
  3.1.新建一个文本文档
  3.2.利用记事本打开
  3.3.编写THML代码
  3.4.保存并且修改纯文本文档的扩展名为.html
  3.5.利用浏览器打开编写好的文件

• 4.网页基本结构:

<html>
	<head>
		<title>title>
	head>
	<body>
	body>
html>

• 5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签
• 

---

html标签

• 作用:
  • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
• 注意点:
  • 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

---

head标签

• 作用:
  • 用于给网站添加一些配置信息
  • 例如:
    • 指定网站的标题 / 指定网站的小图片
    • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
    • 外挂一些外部的css/js文件
    • 添加一些浏览器适配相关的内容
• 注意点:
  • 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

---

title标签

• 作用:
  • 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
• 注意点:
  • title标签必须写在head标签里面

---

body标签

• 作用:
  • 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
• 注意点:
  • 虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
  • 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

---

head内部标签

meta标签

• 1.为什么会有乱码现象?

  • 因为我们在编写网页的时候没有指定字符集
  • 

• 2.如何解决乱码现象?

  • 在head标签中添加, 指定字符集

• 3.什么是字符集

  • 字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的"活字印刷术", 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题
  • 假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取"李"字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取"李"字的小章, 必然找不到, 所以就导致了乱码问题
  • 这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子
  • 所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

• 

• 4.GBK(GB2312)和UTF-8区别

  • GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
    • 体积比较小
  • UTF-8里面存储的世界上所有的文字
    • 提交比较大

• 5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

  • 如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
  • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
  • 懒人推荐: 不管三七二十一, 一律写UTF-8即可

• 6.注意点:

  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
  • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
  • 

---

HTML标签

HTML标签分类

• 单标签
  • 只有开始标签没有结束标签, 也就是由一个<>组成的

<meta charset="UTF-8" />

• 双标签
  • 有开始标签和结束标签, 也就是由一个<>和一个组成的

<html>
html>

---

HTML标签关系分类

• 并列关系(兄弟/平级)

<head>
head>
<body>
body>

• 嵌套关系(父子/上下级)

<head>
		<meta charset="UTF-8" />
		<title>百度一下,你就知道123title>
head>

---

DTD文档声明

• 什么是DTD文档声明?

  • 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页

• DTD文档声明格式:

• 注意事项:
  • 声明必须是 HTML 文档的第一行，位于 标签之前
  • 声明不是 HTML 标签
  • 声明没有结束标签
  • 声明对大小写不敏感
  • 这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
    • 不写也能运行
    • H5网页里面用H4也能运行

---

• HTML5之前有2大种规范, 每种规范中又有3小种规范

大规范	小规范
HTML	Strict (严格的)
HTML	Transitional(过度的,普通的,宽松的)
HTML	Frameset(带有框架的页面)
XHTML	Strict (严格的)
XHTML	Transitional(过度的,普通的,宽松的)
XHTML	Frameset(带有框架的页面)

• HTML的DTD文档声明和XHTML的DTD文档声明有何区别?

  • XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格

• Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用

  • 例如font标签/u标签等
  • font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
  • u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签

• Transitional表示普通的, 这种模式是没有一些别的要求

  • 例如可以使用font标签、u标签等
  • 但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用

• Frameset表示框架, 在框架的页面使用

  • 后面学到框架/NodeJS 再做详细了解

• 常见的DOCTYPE有如下几种

HTML4.01:


XHTML 1.0


HTML5: 

• 有这么多规范我们学习过程中到底使用哪一种比较合适呢?
  • 无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
  • 但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
  • 目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明
    • www.baidu.com (B)
    • www.taobao.com (A)
    • www.qq.com (T)
    • www.sohu.com(大奇葩)

---

HTML和XHTML、HTML5区别

• 在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

• html语言本身有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度

• 为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面

• W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

• 有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。

• 简而言之

  • HTML语法非常宽松容错性强;
  • XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
  • HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

---

.htm 和 .html扩展名区别

• DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
• 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
• 所以htm是为了兼容过去的DOS命名格式存在的

---

开发工具(工欲善其事必先利其器)

• 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用**最高级高发工具**来编写网页

---

常见的前端开发工具

• 记事本: 提示功能较差
• editplus/nodepad++: 提示功能较差
• Dreamwaver: 更偏向设计
• Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
• WebStorm: 重量级, 自带功能全面
  
• 其它ide(zend studio、netbean等)
• 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用**最牛逼最高级**的高发工具WebStorm

---

WebStorm安装和使用

• 安装软件
  
  
  
  
  
  
  
  

• 破解软件(工作之后一定要用正版)
  
  
  
  
  
  

• 汉化软件
  
  

• 设置模版
  

• 创建文件
  
  
  

---

• WebStorm常见快捷键

• 如何在WebStorm中利用快捷键创建一个新的.html的文件

  • 同时按下键盘上的Ctrl + Alt + Insert

• 如何在WebStorm中让光标移动到当前行的末尾

  • 按下键盘上的End键即可

• 如何在WebStorm中让光标移动到当前行的最前面

  • 按下键盘上的Home键即可

• 如何在WebStorm中让光标在多行中闪烁

  • 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可

• 如何在WebStorm中快速的复制光标所在的那一行

  • 按下键盘上的Ctrl + D

• 如何在WebStorm中快速的删除光标所在的那一行

  • 按下键盘上的Ctrl + X

• 如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签

  • 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可

---

基础标签学习

H系列标签(Header 1~Header 6)

• 作用:

  • 用于给文本添加标题语义

• 格式:

  • xxxxxx

• 注意点:

  • H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
  • H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
  • 被H系列标签包裹的内容会独占一行
  • 在H系列的标签中, H1最大, H6最小
  • 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
    

---

P标签(Paragraph)

• 作用:

  • 告诉浏览器哪些文字是一个段落

• 格式:

  • xxxxxxxx

• 注意点:

  • 在浏览器中会单独占一行
    

---

Hr标签(Horizontal Rule)

• 作用:

  • 在浏览器上显示一条分割线

• 格式:

  • ---

• 注意点:

  • 在浏览器中会单独占一行
  • 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
  • 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做
    

---

HTML注释(Annotation)

• 什么是注释?

  • 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
  • 注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流

• 为什么要使用注释?

  • 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的

• 注释格式

• 注意点:
  • 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
  • 注释不能嵌套使用

-->

• 快捷键: ctrl + /

---

img标签(image)

• 作用: 在网页上插入一张图片

• 格式: [图片上传失败...(image-fd0503-1522164219949)]

• 标签的属性

  • 写在标签中K="V"这种格式的文本我们称之为标签属性

属性名称	作用
src(source)	告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate)	规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
title	悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height	设置图片显示的高度
width	设置图片显示的宽度

• 注意点:
  • img标签添加的图片默认不是占一整行空间
  • 如果想让图片等比拉伸, 只写高度或者宽度即可
    

br标签(Break)

• 作用:

  • 让内容换行

• 格式:

  • 


• 注意点:

  • br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

---

相对路径和绝对路径

• 图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径

• 绝对路径

  • 从电脑的具体盘符开始寻找我们需要的资源
  • [图片上传失败...(image-272290-1522164219949)]
  • 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片

• 相对路径

  • 一个文件相对于另外一个文件的位置寻找我们需要的资源
  • [图片上传失败...(image-2aceec-1522164219949)]
  • 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片

• 为什么没人使用绝对路径?

  • 可以移植性太差.

• 什么是可移植性?

  • 可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行

• 为什么绝对路径可移植性差?

  • 假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
  • 例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
  • 你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好

• 为什么相对路径可移植性好?

  • 同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示

• 相对路径几种查找方式

  • 同级
    • 直接编写, 例如: girl.png
    • 加上./ 编写, 例如./girl.png
    • ./代表当前目录, ./girl.png代表在当前目录下查找
  • 下级
    • 直接编写, 例如abc/girl.png
    • 加上./ 编写, 例如./abc/girl.png
    • 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
  • 上级
    • …/代表访问上级目录
    • 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
    • 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以…/代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以…/girl.png就代表在a文件夹查找girl.png

• 注意事项:

  • 相对路径不会出现这种格式aaa/../bbb/girl.png
  • 虽然可以显示, 但是企业开发中千万不要这么写

---

a标签(anchor)

• 格式: 江哥博客

• 作用: 用于从一个页面链接到另一个页面

• 注意事项:

  • 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
  • a标签也叫做超级链接或超链接

• a标签的属性

属性名称	作用
href(hypertext reference)	指定跳转的目标地址
target	告诉浏览器是否保留原始界面, _blank保留, _self不保留
title	悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

• base标签和a标签结合使用

  • 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
  • 格式:

• 注意事项:

  • base必须嵌套在head标签里面
  • 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

• a标签其它用法

  • 假链接(本质是跳转到当前页面)
    • 格式江哥博客
    • 格式江哥博客
  • 跳转到当前页面指定位置(锚点链接)
    • 2.1.格式跳转到指定位置
    • 2.2.在页面的指定位置给任意标签添加一个id属性
      • 例如

        这个是目标

  • 跳转到指定页面的指定位置
    • 格式: 跳转到指定位置
    • 只需要在01-锚点链接.html页面添加一个id位置即可
  • 下载(极力不推荐使用)
    • 例如下载福利资源

---

---

列表标签

无序列表(unordered list)

• 作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
• 格式:
  • li 英文是 list item, 翻译为列表项

    <h4>选择居住城市(CN)h4>
    <ul>
        <li>北京li>
        <li>上海li>
        <li>广州li>
        <li>铁岭li>
    ul>

• ul应用场景:

  • 导航条
  • 商品列表等
  • 新闻列表
    
    
    

• 注意事项:

  • 这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)“北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行”, 那么就必须有严格的排名,北京必须写在前面
  • 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
    • 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
    • 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
  • ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

<ul>
        <li>
            好吃的
            <ul>
                <li>牛奶li>
                <li>面包li>
            ul>
        li>
        <li>
            日用的
            <ul>
                <li>毛巾li>
                <li>牙膏li>
            ul>
        li>
    ul>

---

有序列表(ordered list)

• 作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
• 格式:

    <h4>中国房价排行h4>
    <ol>
        <li>北京li>
        <li>上海li>
        <li>广州li>
        <li>铁岭li>
    ol>

• ol应用场景:

  • xxx排行榜
  • 其实ol应用场景并不多, 因为能用ol做的用ul都能做

• 注意事项:

  • ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
  • 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
  • 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

---

定义列表(definition list)

• 作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
• 格式:
  • dt英文definition title, 翻译为定义标题
  • dd英文definition description, 翻译为定义描述信息

    <dl>
        <dt>北京dt>
        <dd>国家的首都, 看升国旗的地方dd>
        <dt>上海dt>
        <dd>魔都, 遍地是黄金的地方dd>
    dl>

• dl应用场景:
  • 网站底部相关信息
  • 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

• 注意事项:
  - dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
  • 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
  • dd和dt和li标签一样是容器标签, 里面可以添加任意标签
  • 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
  • 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

---

---

表格标签

• 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
  • http://2004.sina.com.cn
• 作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
• 格式:
  • table定义表格
  • tr定义行
  • td定义单元格

<table>
    <tr>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>td>
        <td>td>
    tr>
table>

---

表格中的属性

• border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度

• width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度

• height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度

• cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙

• cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距

• align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

  • 给table设置align属性, 是让表格在浏览器中居左/居右/居中
  • 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
  • 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
  • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
  • 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

• valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

  • 给table设置valign属性, 无效
  • 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
  • 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
  • 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

• bgcolor:规定表格的背景颜色

  • 给table设置bgcolor属性, 是给整个表格设置背景颜色
  • 给tr设置bgcolor属性, 是给当前行设置背景颜色
  • 给td设置bgcolor属性, 是给当前单元格设置背景颜色
  • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
    

---

表格中的其它标签

• 表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th

• th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中

• caption标签:给整个表格设置标题

  • 一定要嵌套在talbe标签内部才有效

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜h2>
    caption>
    <tr bgcolor="#a9a9a9">
        <th>排名th>
        <th>关键词th>
        <th>趋势th>
        <th>今日搜索th>
        <th>最近七日th>
        <th>相关链接th>
    tr>
    <tr bgcolor="white" align="center">
        <td>1td>
        <td align="left">暴走大事件td>
        <td>
            ![](images/up.jpg)
        td>
        <td>623557td>
        <td>4088311td>
        <td>
            <a href="#">贴吧a>
            <a href="#">图片a>
            <a href="#">百科a>
        td>
    tr>
table>

---

表格的结构

• thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小

• tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上

• tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现

<table>
    <caption>表格的标题caption>
    <thead>
        <tr>
            <th>每一列的标题th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>数据td>
        tr>
    tbody>
    <tfoot>
        <tr>
            <td>数据td>
        tr>
    tfoot>
table>

• 表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
• 由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

---

---

表单标签

• 作用: 用于收集用户信息, 让用户填写、选择相关信息
• 格式:

<form>
    所有的表单内容，都要写在form标签里面
form>

• 注意事项:
  • 所有的表单内容，都要写在form标签里面
  • form标签中有两个比较重要的属性action和method, 但就现目前大家的知识储备而言暂时无法理解, 所以放到后面的课程中讲解

---

input标签

• 如果说td是表格最核心的标签, 那么input就是表单最核心的标签. nput标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

• 明文输入框

  • 作用: 用户可以在输入框内输入内容
  • 账号:

• 暗文输入框

  • 作用: 用户可以在输入框内输入内容
  • 密码:

• 给输入框设置默认值

  • 账号:
  • 密码:

• 规定输入字段中的字符的最大长度

  • 账号:
    

• 单选框(radio)

  • 作用: 用户只能从众多选项中选择其中一个
  • 单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖

• 多选框(checkbox)
  • 作用: 用户只能从众多选项中选择多个
  • 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球

• 给单选、多选设置默认值
  • 指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性

    <input type="radio" name="xingbie" checked="checked"/> 男
    <input type="radio" name="xingbie" /> 女
    <input type="radio" name="xingbie" /> 妖

<input type="checkbox" name="aihao" checked="checked"/> 篮球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球

• label标签
  • 作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
  • 注意事项:
    • 表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
    • 所有表单元素都可以通过label绑定

<label for="account">账号:label>
<input type="text" id="account" />


<input type="radio" name="sex" id="man" /> <label for="man">男label>


<input type="checkbox" id="basketball" />
<label for="basketball">篮球label> 

• 按钮

  • 作用: 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

• 图片按钮

  • 作用:定义图像形式的提交按钮

• 重置按钮

  • 作用: 定义重置按钮。重置按钮会清除表单中的所有数据
  • 注意事项:
    • 这个按钮不需要写value自动就有“重置”文字
    • reset只对form表单中表单项有效果

• 提交按钮

  • 作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
  • 注意事项:
    • 这个按钮不需要写value自动就有“提交”文字
    • 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
    • 默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)
      

• 隐藏域

  • 作用: 定义隐藏的输入字段
  • 暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用

• 取色器

  • HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
    

• 日期选择器

  • HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
    

---

数据列表

• 作用: 给输入框绑定待选项

• 格式:

datalist>
    <option>待选项内容option>
datalist>

• 如何给输入框绑定待选列表
  • 搞一个输入框
  • 搞一个datalist列表
  • 给datalist列表标签添加一个id
  • 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰option>
    <option>宝马option>
    <option>奥迪option>
    <option>路虎option>
    <option>宾利option>
datalist>

---

多行文本框(文本域)

• 作用: textarea标签用于在表单中定义多行的文本输入控件
  • cols属性表示columns“列”, 规定文本区内的可见宽度
  • rows属性表示rows“行”, 规定文本区内的可见行数
• 格式:

<textarea cols="30" rows="10">默认textarea>

• 注意点:
  • 可以通过cols和rows来指定输入框的宽度和高度
  • 默认情况下输入框是可以手动拉伸的

		
	<style type="text/css">
        textarea{
            resize: none;
        }
    style>

---

下拉列表

• 作用: select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项
• 格式:

选择籍贯:
<select>
    <option>北京option>
    <option>河北option>
    <option>河南option>
    <option>山东option>
    <option>山西option>
    <option>湖北option>
    <option>贵州option>
select>

• 给下拉列表设置默认值
  • 和radio、checkbox一样select也可以设置默认值, 通过selected属性设置

<select>
    <option>北京option>
    <option>河北option>
    <option>河南option>
    <option>山东option>
    <option>山西option>
    <option>湖北option>
    <option selected="selected">贵州option>
select>

• 给下拉列表添加分组

<select>
    <optgroup label="北京市">
        <option>海淀区option>
        <option>昌平区option>
        <option>朝阳区option>
    optgroup>
        <optgroup label="广州市">
        <option>天河区option>
        <option>白云区option>
    optgroup>
    <option selected="selected">贵州option>
select>

---

---

video标签

• 作用: 播放视频

• 格式1:

<video src="">
video>

• video标签的属性

  • src: 告诉video标签需要播放的视频地址
  • autoplay: 告诉video标签是否需要自动播放视频
  • controls: 告诉video标签是否需要显示控制条
  • poster: 告诉video标签视频没有播放之前显示的占位图片
  • loop: 告诉video标签循环播放视频. 一般用于做广告视频
  • preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
  • muted:告诉video标签视频静音
  • width/height: 和img标签中的一模一样
    

• 格式2

<video>
    <source src="" type="">source>
    <source src="" type="">source>
video>

• 第二种格式存在的意义

  • 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
  • ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

• 注意点:

  • 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
  • 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

---

audio标签

• 作用: 播放音频

• 格式:

<audio src="">
audio>

<audio>
    <source src="" type="">
audio>

• 注意点:
  • audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster

---

详情和概要标签

• 作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
  默认情况下是折叠展示, 想看见详情必须点击

• 格式:

<details>
    <summary>概要信息summary>
    详情信息
details>

---

marquee标签

• 作用: 跑马灯效果

格式:

<marquee>内容marquee>

• 属性:

  • direction: 设置滚动方向 left/right/up/down
  • scrollamount: 设置滚动速度, 值越大就越快
  • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
  • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

• 注意点:

  • marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

---

HTML中被废弃的标签

– 由于HTML现在只负责语义而不负责样式.但是HTML一开始有一部分标签连样式也包揽了, 所以这部分标签都被废弃了
- b、u、i、s
- 以上标签自己带有样式, 有浓厚的样式作用, 今后一般都只作为CSS钩子使用
- 原则: 不到万不得已,切记不要使用如上标签. 大家可以到BAT的网站查看源代码, 几乎看不到以上标签

• b(Bold)作用: 将文本字体加粗

  • 格式:将文本字体加粗

• u(Underlined)作用: 为文本添加下划线

  • 格式:为文本添加下划线

• i(Italic)作用: 显示斜体文本效果

  • 格式:显示斜体文本效果

• s(Strikethrough)作用: 为文本添加删除线

  • 格式:为文本添加删除线

• 为了弥补 b、u、i、s标签的不足, W3C又推出了一组新的标签, 这些标签在显示上看似和buis没什么区别, 但是在语义上却有重大区别

  • strong作用: 着重内容
    • 格式:着重内容
  • ins(Inserted)作用: 新插入的文本
    • 格式:新插入的文本
  • em(Emphasized)作用:强调内容
    • 格式:强调内容
  • del(Deleted)作用: 已删除的文本
    • 格式:已删除的文本
  • 其它更多详见维基百科
    

---

HTML实体

• 我们想在页面上输出

  这些字符，但是HTML认为这是一个标签, 所以如果需要输出一些特殊的字符需要通过字符实体来实现

• lt是英语less than 小于的意思, <可以在页面上输出一个小于符号

• gt是英语greater than 大于的意思, >可以在页面上输出一个大于符号

• html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。所以想要在html中输出空格必须使用来实现, 一个就代表一个空格

  • html对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
  • 是英语non-breaking spacing, 翻译为不打断空格的意思

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
©	版权	©
®	注册商标	®
™	商标	™
&	和号	&
"	引号	"
’	撇号	'
￠	分	¢
£	镑	£
¥	日圆	¥
€	欧元	€
§	小节	§
×	乘号	×
÷	除号	÷

---

meta其它类型

Keywords类型

• 作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你
• 格式:

Descriiption类型

• 作用: 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能够提高搜索命中率, 让别人更容易找到你
• 格式:

Author类型

• 作用: 告诉搜索引擎当前网页的作业, install B专用
• 格式:

Refresh类型

• 作用: 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用语一些需要定时刷新的聊天室等.
• 格式:

Robots类型

• 作用: 告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容

• 格式:

  • index: 告诉搜索引擎允许抓取当前页面
  • noindex:告诉搜索引擎不允许抓取当前页面
  • follow: 告诉搜索引擎可以从当前页面上找到链接，然后继续访问抓取下去
  • nofollow:告诉搜索引擎不允许从当前页面上找到链接, 拒绝其继续访问
  • all: 告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
  • none: 告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问

• 常见组合

  • ：可以抓取本页，而且可以顺着本页继续索引别的链接

    • 有可以写成

  • ：不许抓取本页，但是可以顺着本页抓取索引别的链接

  • ：可以抓取本页，但是不许顺着本页抓取索引别的链接

  • ：不许抓取本页，也不许顺着本页抓取索引别的链接。

  • 注意事项:

    • 不要把两个对立的反义词写到一起，例如
    • 例如

---

CSS起源

• web的衰落：
• 在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能

-  迫于压力，html开始出现， , 等标签。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难

• 大救星Css
• 当html中存斥着的表现标记问题，W3c并没有忽视。在1995年，w3c开始发布一种正在进行的计划（work-in-prrgress） 称之为css
• 与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。

---

体验CSS

• 用HTML完成
• 哪个标签有哪个属性难以记忆
• 需求变更影响较大(例如像修改成功法则以下的文字颜色需要修改4个地方)

<h1 align="center">
    <font face="微软雅黑" color="red">成功法则font>
h1>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">迟到毁一生font>
p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">早退穷三代font>
p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">按时上下班font>
p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">必成高富帅font>
p>

• 用HTML+CSS完成
• 不用记忆哪些属性属于哪个标签
• 当需求变更时我们不需要修改大量的代码就可以满足需求
• 在前端开发中CSS只有一个作用, 就是用来修改样式

    
成功法则
迟到毁一生
早退穷三代
按时上下班
必成高富帅

---

CSS格式

• 格式:

<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
            ...
        }
style>

• 注意点:

• style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)

• style标签中的type属性其实可以不用写, 默认就是type=“text/css”

• 设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)

• CSS怎么学?

• CSS的学习一共分为两大部分, 一个是CSS的属性, 另一个是CSS选择器. 也就是说着两部分学完CSS就没有别的东西了
      -

---

---

CSS常见属性

文字属性

font-style

• 作用: 规定文字样式
• 格式: font-style: italic;
• 取值:
• normal ： 正常的， 默认就是正常的
• italic :  倾斜的
• 快捷键:
• fs font-style: italic;
• fsn font-style: normal;

font-weight

• 作用: 规定文字粗细
• 格式: font-weight: bold;
• 取值:
• 单词取值:
• bold 加粗
• bolder  比加粗还要粗
• lighter 细线， 默认就是细线
• 数字取值：
• 100-900之间整百的数字
• 快捷键
• fw font-weight:;
• fwb font-weight: bold;
• fwbr  font-weight: bolder;

font-size

• 作用: 规定文字大小
• 格式: font-size: 30px;
• 取值: px(像素 pixel)
• 快捷键
• fz font-size:;
• fz30 font-size: 30px;

font-family

• 作用: 规定文字字体
• 格式: font-family:“楷体”;
• 取值: 各种字体名称
• 快捷键:
• ff font-family:;
• 注意点:
• 如果取值是中文， 需要用双引号或者单引号括起来
• 设置的字体必须是用户电脑里面已经安装的字体

字体属性补充

• 如果设置的字体不存在, 那么系统会使用默认的字体来显示

• 默认一般使用宋体

• 如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?

• 可以给字体设置备选方案

• 格式:font-family:“字体1”, “备选方案1”, …;

• 如果想给中文和英文分别单独设置字体, 怎么办?

• 但凡是中文字体, 里面都包含了英文

• 但凡是英文字体, 里面都没有包含中文

• 也就是说中文字体可以处理英文, 而英文字体不能处理中文

• 注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

• 补充在企业开发中最常见的字体有以下几个

• 中文: 宋体/黑体/微软雅黑

• 英文: “Times New Roman”/Arial

• 还需要知道一点, 就是并不是名称是英文就一定是英文字体,因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文

• 宋体 SimSun

• 黑体 SimHei

• 微软雅黑 Microsoft YaHei

文字属性缩写

• 缩写格式:

font: style weight size family;

• 例如:

font:italic bold 10px "楷体";

• 注意点:
• 在这种缩写格式中有的属性值可以省略
• sytle可以省略
• weight可以省略
• 在这种缩写格式中style和weight的位置可以交换
• 在这种缩写格式中有的属性值是不可以省略的
• size不能省略
• family不能省略
• size和family的位置是不能顺便乱放的, size一定要写在family的前面, 而且size和family必须写在所有属性的最后

---

文本属性

text-decoration

• 作用: 给文本添加装饰
• 格式: text-decoration: underline;
• 取值:
• underline 下划线
• line-through 删除线
• overline 上划线
• none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
• 快捷键:
• td  text-decoration: none;
• tdu text-decoration: underline;
• tdl text-decoration: line-through;
• tdo text-decoration: overline;

text-align

• 作用: 设置文本水平对齐方式
• 格式: text-align: center;
• 取值:
• left 左
• right 右
• center 中
• 快捷键:
• ta text-align: left;
• tar text-align: right;
• tac text-align: center;

text-indent

• 作用: 设置文本缩进
• 格式: text-indent: 2em;
• 取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
• 快捷键:
• ti text-indent:;
• ti2e text-indent: 2em;

---

颜色属性

• 在CSS中如何通过color属性来修改文字颜色

• 格式: color: 值;

• 取值:

• 英文单词

• 一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达

• rgb

• rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)

• 格式: rgb(0,0,0)

• 第一个数字就是用来设置三原色的光源元件红色显示的亮度

• 第二个数字就是用来设置三原色的光源元件绿色显示的亮度

• 第三个数字就是用来设置三原色的光源元件蓝色显示的亮度

• 这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮

红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色

-

• rgba
• rgba中的rgb和前面讲解的一样, 只不过多了一个a.
• a代表透明度, 取值是0-1, 取值越小就越透明
• 例如:

color: rgba(255,0,0,0.2);

-

• 十六进制

• 通过十六进制来表示颜色其实本质就是RGB

• 十六进制中是通过每两位表示一个颜色

• 例如: #FFEE00 FF表示R EE表示G 00表示B

• 什么是十六进制?

• 十六进制和十进制一样都是一种计数的方式

• 在十进制中取值范围0-9, 逢十进一

• 在十六进制中取值范围0-F, 逢十六进一

十进制   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
十六进制 0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f 

-

• 十六进制和十进制转换的公式
• 用十六进制的第一位*16 + 十六进制的第二位 = 十进制

15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0

-

• 1.5十六进制缩写
• 在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
• 例如: #FFEE00 == #FE0
• 注意点:
• 1.如果当前颜色对应的两位数字不一样, 那么就不能简写
• #123456;
• 2.如果两位相同的数字不是属于同一个颜色的, 也不能简写
• #122334

---

---

CSS选择器

标签选择器

• 什么是标签选择器?

• 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

• 格式:

标签名称{
    属性:值;
}

• 注意点:
• 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
• 标签选择器无论标签藏得多深都能选中

id选择器

• 什么是id选择器?

• 作用: 根据指定的id名称找到对应的标签, 然后设置属性

• 格式:

#id名称{
    属性:值;
}

• 注意点:
• 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
• 在同一个界面中id的名称是不可以重复的
• 在编写id选择器时一定要在id名称前面加上#
• id的名称是有一定的规范的
• id的名称只能由字母/数字/下划线(a-z 0-9 _)
• id名称不能以数字开头
• id名称不能是HTML标签的名称()不能是a h1 img input …)
• 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的

类选择器

• 什么是类选择器?

• 作用: 根据指定的类名称找到对应的标签, 然后设置属性

• 格式:

.类名{
    属性:值;
}

• 注意点:
• 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
• 在同一个界面中class的名称是可以重复的
• 在编写class选择器时一定要在class名称前面加上点
• 类名的命名规范和id名称的命名规范一样
• 类名就是专门用来给CSS设置样式的
• 在HTML中每个标签可以同时绑定多个类名

格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

id选择器和类选择器

• id和class的区别?

• 1.1
  id相当于人的身份证不可以重复
  class相当于人的名称可以重复

• 1.2
  一个HTML标签只能绑定一个id名称
  一个HTML标签可以绑定多个class名称

• id选择器和class选择器区别?

• id选择器是以#开头

• class选择器是以.开头

• 在企业开发中到底用id选择器还是用class选择器?

• id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

• 在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
  一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

• 什么是后代选择器?

• 作用: 找到指定标签的所有特定的后代标签, 设置属性

• 格式:

标签名称1 标签名称2{
    属性:值;
}

• 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

• 注意点:

• 后代选择器必须用空格隔开

• 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

• 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

• 后代选择器可以通过空格一直延续下去

子元素选择器

• 什么是子元素选择器?

• 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

• 格式:

标签名称1>标签名称2{
    属性:值;
}

• 先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

• 注意点:

• 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

• 子元素选择器之间需要用>符号连接, 并且不能有空格

• 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

• 子元素选择器可以通过>符号一直延续下去

后代选择器和子元素选择器

• 后代选择器和子元素选择器之间的区别?

• 1.1
  后代选择器使用空格作为连接符号
  子元素选择器使用>作为连接符号

• 1.2
  后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
  子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

• 后代选择器和子元素选择器之间的共同点

• 2.1
  后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器

• 2.2
  后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
  选择器1>选择器2>选择器3>选择器4{}

• 在企业开发中如何选择

• 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器

• 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器

• 什么是交集选择器?

• 作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

• 格式:

选择器1选择器2{
    属性: 值;
}

• 注意点:
• 选择器和选择器之间没有任何的连接符号
• 选择器可以使用标签名称/id名称/class名称
• 交集选择器仅仅作为了解, 企业开发中用的并不多

并集选择器

• 什么是并集选择器?

• 作用: 给所有选择器选中的标签设置属性

• 格式:

选择器1,选择器2{
    属性:值;
}

• 注意点:
• 并集选择器必须使用,来连接
• 选择器可以使用标签名称/id名称/class名称

兄弟选择器

相邻兄弟选择器

• 什么是相邻兄弟选择器 CSS2

• 作用: 给指定标签后面紧跟的那个标签设置属性

• 格式:

选择器1+选择器2{
    属性:值;
}

• 注意点:
• 相邻兄弟选择器必须通过+连接
• 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

通用兄弟

• 什么是通用兄弟选择器 CSS3

• 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

• 格式:

选择器1~选择器2{
    属性:值;
}

• 注意点:
• 通用兄弟选择器必须用~连接
• 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

• 序选择器是CSS3中新增的选择器最具代表性的就是序选择器

• 什么是序选择器?

• 作用: 选中指定的任意标签然后设置属性

• 格式:

• 1.同级别的第几个

• :first-child 选中同级别中的第一个标签

• :last-child 选中同级别中的最后一个标签

• :nth-child(n) 选中同级别中的第n个标签

• :nth-last-child(n) 选中同级别中的倒数第n个标签

• :only-child 选中父元素中唯一的标签

• 注意点: 不区分类型

• 2.同级同类型的第几个

• :first-of-type 选中同级别中同类型的第一个标签

• :last-of-type  选中同级别中同类型的最后一个标签

• :nth-of-type(n) 选中同级别中同类型的第n个标签

• :nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签

• :only-of-type 选中父元素中唯一类型的某个标签

• 3.其它用法

• :nth-child(odd) 选中同级别中的所有奇数

• :nth-child(even) 选中同级别中的所有偶数

• :nth-child(xn+y)

• x和y是用户自定义的, 而n是一个计数器, 从0开始递增

• :nth-of-type(odd) 选中同级别中同类型的所有奇数

• :nth-of-type(even) 选中同级别中同类型的所有偶数

• :nth-of-type(xn+y)

• x和y是用户自定义的, 而n是一个计数器, 从0开始递增

属性选择器

• 什么是属性选择器?

• 作用: 根据指定的属性名称找到对应的标签, 然后设置属性

• 格式:

• [attribute]
  -作用:根据指定的属性名称找到对应的标签, 然后设置属性

• [attribute=value]
  -作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
  -最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

• 属性的取值是以什么开头的

• [attribute|=value] CSS2

• [attribute^=value] CSS3

• 两者之间的区别:

• CSS2中的只能找到value开头,并且value是被-和其它内容隔开的

• CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

• 属性的取值是以什么结尾的

• [attribute$=value] CSS3

• 属性的取值是否包含某个特定的值得

• [attribute~=value] CSS2

• [attribute*=value] CSS3

• 两者之间的区别:

• CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的

• CSS3中的只要包含value就可以找到, 无论有没有被隔开

通配符选择器

• 什么是通配符选择器?

• 作用: 给当前界面上所有的标签设置属性

• 格式:

*{
    属性:值;
}

• 注意点:
• 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

---

---

CSS三大特性

继承性

• 什么是继承性?

• 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

• 示例代码:

 <style>
        div{
            color: red;
        }
style>
<div>
    <ul>
        <li>
            <p>我是段落p>
        li>
    ul>
div>

• 注意点:
• 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
• 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
• 继承性中的特殊性
  • a标签的文字颜色和下划线是不能继承的
  • h标签的文字大小是不能继承的

    我是超链接



    
我是大标题

• 应用场景:
• 一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

body{
   font-size: 30px;
      font-family: "微软雅黑"
      color: #666;
}

层叠性

• CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性

• 什么是层叠性?

• 作用: 层叠性就是CSS处理冲突的一种能力

• 示例代码

我是段落

• 注意点:
• 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

优先级

• 什么是优先级?

• 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

• 优先级判断的三种方式

• 间接选中就是指继承

• 如果是间接选中, 那么就是谁离目标标签比较近就听谁的

<style>
 li{
            color: blue;
      }
     ul{
            color: red;
      }
style>
<ul>
    <li>
        <p id="identity" class="para">我是段落p>
    li>
ul>

• 相同选择器(直接选中)
• 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

<style>
 p{
            color: blue;
      }
    p{
            color: red;
      }
style>
<ul>
    <li>
        <p id="identity" class="para">我是段落p>
    li>
ul>

• 不同选择器(直接选中)
• 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
• id>类>标签>通配符>继承>浏览器默认

<style>
  #identity{
            color: purple;
        }
        .para{
            color: pink;
        }
        p{
            color: green;
        }
        *{
            color: blue;
        }
        li{
            color: red;
        }
style>
<ul>
    <li>
        <p id="identity" class="para">我是段落p>
    li>
ul>

• 注意点:
• 通配符选择器也是直接选中

优先级权重

• 什么是优先级的权重?

• 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

• 权重的计算规则

• 首先先计算选择器中有多少个id, id多的选择器优先级最高

• 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

• 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

• 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

• 示例代码

    

        

            
我是段落
        
    

    

        

            
我是段落
        
    

    

        

            
我是段落
        
    

    

        

            
我是段落
        
    

• 注意点:
• 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

####!important

• 什么是!important
   - 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

• 示例代码

    

        
我是段落
    

• 注意点:
   - !important只能用于直接选中, 不能用于间接选中
   - 通配符选择器选中的标签也是直接选中的
   - !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
   - !important必须写在属性值得分号前面
   - !important前面的感叹号不能省略

---

---

Div和Span标签

• 什么是div?
• 作用: 一般用于配合css完成网页的基本布局

<style>
        .header{
            width: 980px;
            height: 100px;
            background: red;
            margin: auto;
            margin-bottom: 10px;
        }
        .content{
            width: 980px;
            height: 500px;
            background: green;
            margin: auto;
            margin-bottom: 10px;
        }
        .footer{
            width: 980px;
            height: 100px;
            background: blue;
            margin: auto;
        }
        .logo{
            width: 200px;
            height: 50px;
            background: pink;
            float: left;
            margin: 20px;
        }
        .nav{
            width: 600px;
            height: 50px;
            background: yellow;
            float: right;
            margin: 20px;
        }
        .aside{
            width: 250px;
            height: 460px;
            background: purple;
            float: left;
            margin: 20px;
        }
        .article{
            width: 650px;
            height: 460px;
            background: deepskyblue;
            float: right;
            margin: 20px;
        }
style>
<div class="header">
    <div class="logo">div>
    <div class="nav">div>
div>
<div class="content">
    <div class="aside">div>
    <div class="article">div>
div>
<div class="footer">div>

• 什么是span?
• 作用: 一般用于配合css修改网页中的一些局部信息

<style>
        span{
            color: red;
        }
style>
<p>努力到<span>无能为力span>, 拼搏到<span>感动自己span>p>

• div和span有什么区别?

• 1.div会单独的占领一行,而span不会单独占领一行

• 2.div是一个容器级的标签, 而span是一个文本级的标签

• 容器级的标签和文本级的标签的区别?

• 容器级的标签中可以嵌套其它所有的标签

• 常见容器级的标签: div h ul ol dl li dt dd …

• 文本级的标签中只能嵌套文字/图片/超链接

• 常见文本级的标签:span p buis strong em ins del …

• 注意点:
   - 不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

---

CSS元素显示模式

• 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

• 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)

• 什么是块级元素, 什么是行内元素?

• 块级元素会独占一行

• 行内元素不会独占一行

• 常见容器级的标签: div h ul ol dl li dt dd …

• 常见文本级的标签:span p buis stong em ins del …

• 常见块级元素: p div h ul ol dl li dt dd

• 常见行内元素: span buis strong em ins del

• 块级元素和行内元素的区别?

• 块级元素

• 独占一行

• 如果没有设置宽度, 那么默认和父元素一样宽

• 如果设置了宽高, 那么就按照设置的来显示

• 行内元素

• 不会独占一行

• 如果没有设置宽度, 那么默认和内容一样宽

• 行内元素是不可以设置宽度和高度的

• 行内块级元素

• 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

• 不独占一行, 并且可以设置宽高

CSS元素显示模式转换

• 如何转换CSS元素的显示模式?

• 设置元素的display属性

• display取值

• block 块级

• inline 行内

• inline-block 行内块级

• 快捷键

• di display: inline;

• db display: block;

• dib display: inline-block;

---

---

盒模型

边框属性

• 什么边框?

• 边框就是环绕在标签宽度和高度周围的线条

• 边框属性的格式

• 连写(同时设置四条边)

• border: 边框的宽度 边框的样式 边框的颜色;

• 示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
style>

-  快捷键:
-  bd+ border: 1px solid #000;

• 注意点:

• 连写格式中颜色属性可以省略, 省略之后默认就是黑色

• 连写格式中样式不能省略, 省略之后就看不到边框了

• 连写格式中宽度可以省略, 省略之后还是可以看到边框

• 按方向连写(分别设置四条边)

• border-top: 边框的宽度 边框的样式 边框的颜色;

• border-right: 边框的宽度 边框的样式 边框的颜色;

• border-bottom: 边框的宽度 边框的样式 边框的颜色;

• border-left: 边框的宽度 边框的样式 边框的颜色;

• 示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
style>

• 快捷键:

• bt+ border-top: 1px solid #000;

• br+ border-right: 1px solid #000;

• bb+ border-bottom: 1px solid #000;

• bl+ border-left: 1px solid #000;

• 按要素连写(分别设置四条边)

• border-width: 上 右 下 左;

• border-style: 上 右 下 左;

• border-color: 上 右 下 左;

• 示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
style>

• 注意点:

• 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

• 这三个属性的取值省略时的规律

• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

• 上 右 下 左 > 上 > 右下左边取值和上边一样

• 非连写(方向+要素)
  -  border-top-width: ;
  -  border-top-style:;
  -  border-top-color:;
  -  border-right-width:;
  -  border-right-style:;
  -  border-right-color:;
  -  border-bottom-width:;
  -  border-bottom-style: ;
  -  border-bottom-color:;
  -  border-left-width:;
  -  border-left-style:;
  -  border-left-color:;
    
    - 示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
style>

• 注意点:
    - 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}
```   
  
### 内边距属性
- 什么是内边距?
边框和内容之间的距离就是内边距

- 格式
- 单独设置四条边
 - padding-top: ;
 - padding-right: ;
 - padding-bottom: ;
 - padding-left: ;

- 示例代码

```html
<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
style>

• 同时设置四条边

• padding: 上 右 下 左;

• 示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
style>

• 注意点:
• 这三个属性的取值省略时的规律
• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
• 上 右 下 左 > 上 > 右下左边取值和上边一样
• 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
• 给标签设置内边距之后, 内边距也会有背景颜色

外边距属性

• 什么是外边距?

• 标签和标签之间的距离就是外边距

• 格式

• 单独设置四条边

• margin-top: ;

• margin-right: ;

• margin-bottom: ;

• margin-left: ;

• 示例代码

<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
style>

• 同时设置四条边

• margin: 上 右 下 左;

• 示例代码

<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
style>

• 注意点:
    - 这三个属性的取值省略时的规律

  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
  • 上 右 下 左 > 上 > 右下左边取值和上边一样

• 外边距的那一部分是没有背景颜色的

• 外边距合并现象

• 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

• 示例代码

    
    
    


我是span我是span
我是div
我是div

• margin-top问题

• 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

• 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

• 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

• 示例代码

<style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            /*不设置边框, big也会被small的顶部外边距顶下去*/
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top:150px;
            margin-left:150px;
        }
    style>

• text-align:center;和margin:0 auto;区别

• text-align: center; 是设置盒子中存储的文字/图片水平居中

• margin:0 auto;是让盒子自己水平居中

• 示例代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字图片会居中*/
            /*text-align: center;*/
            /*盒子自身会居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    style>
head>
<body>
<div class="father">
    我是文字<br/>
    ![](images/girl.jpg)
    <div class="son">div>
div>
body>
html>

盒模型

• 什么是CSS盒模型?
• CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
• CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
• 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

• 示例代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-CSS盒子模型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>我是spanspan>
<a href="#">我是超链接a>
<b>我是加粗b>
<strong>我是强调strong>

body>
html>

• 盒模型宽度和高度

• 内容的宽度和高度

• 就是通过width/height属性设置的宽度和高度

• 元素的宽度和高度

• 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

• 高度 同理可证

• 规律

• 增加了padding/border之后元素的宽高也会发生变化
          - 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

• 元素空间的宽度和高度

• 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

• 高度 同理可证

box-sizing属性

• CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

• box-sizing取值

• content-box

• 元素的宽高 = 边框 + 内边距 + 内容宽高

• border-box

• 元素的宽高 = width/height的宽高

• 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

• 示例代码

<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
style>


<style>
.box1{
 box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
style>

---

---

浮动

网页的布局方式

• 什么是网页的布局方式?

  • 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

• 标准流(文档流/普通流)排版方式

  • 其实浏览器默认的排版方式就是标准流的排版方式
  • 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
  • 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
    • 垂直排版, 如果元素是块级元素, 那么就会垂直排版
    • 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

• 浮动流排版方式

  • 浮动流是一种"半脱离标准流"的排版方式
  • 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

• 注意点:

  • 浮动流中没有居中对齐, 也就是没有center这个取值
  • 在浮动流中是不可以使用margin: 0 auto;

• 特点:

  • 在浮动流中是不区分块级元素/行内元素/行内块级元素的
  • 无论是块级元素/行内元素/行内块级元素都可以水平排版
  • 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
  • 综上所述, 浮动流中的元素和标准流中的行内块级元素很像

• 定位流排版方式

浮动元素的脱标

• 什么是浮动元素的脱标?
  • 脱标: 脱离标准流
  • 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
• 浮动元素脱标之后会有什么影响?
  • 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

浮动元素排序规则

• 浮动元素排序规则
• 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

<style>
		 .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
style>

• 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

<style>
		.box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: right;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
style>

• 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
style>

###浮动元素贴靠现象

• 什么是浮动元素贴靠现象?
  • 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
  • 
  • 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
-

浮动元素字围现象

• 什么是浮动元素字围现象?
  • 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

		div{
            float: left;
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            border: 1px solid #000;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }

• 应用场景
  • 图文混排

---

---

清除浮动

盒子高度问题

• 在标准流中内容的高度可以撑起盒子的高度

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
style>
    
<div>
    <p>p>
div>

• 在浮动流中浮动元素内容的高不可以撑起盒子的高

<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
style>
    
<div>
    <p>p>
div>

清除浮动方式一

• 给前面的父盒子添加高度

• 示例代码:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
style>

<div class="box1">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
div>
<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加高度前:

  • 

• 添加高度后

  • 

• 注意点:

  • 在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

• 利用clear:both;属性清除前面浮动元素对我的影响

• 示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*这里*/
            clear: both;
            /*margin无效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
style>

<div class="box1">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
div>
<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加clear: both;前:

  • 

• 添加clear: both;后

  • 

• 注意点:

  • 使用clear:both之后margin属性会失效, 所以不常用

清除浮动方式三

• 在两个有浮动子元素的盒子之间添加一个额外的块级元素

• 示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
        .h20{
		    /*利用额外块级元素实现margin*/
            height: 20px;
            background-color: deepskyblue;
        }
style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
div>


<div class="wall h20">div>

<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加额外块级元素前

  • 

• 添加额外块级元素后

  • 

• 注意点

  • 在外墙法中可以通过设置额外标签的高度来实现margin效果
  • 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

• 在前面一个盒子的最后添加一个额外的块级元素

• 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
    
    <div class="wall">div>
div>

<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加额外块级元素前

  • 

• 添加额外块级元素后

  • 

• 注意点:

  • 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
  • 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

• 什么是overflow:hidden?

  • overflow:hidden的作用是清除溢出盒子边框外的内容

• 示例代码

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}
        
<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字div>

• 添加overflow:hidden前

  • 

• 添加overflow:hidden后

  • 

---

• 如何利用overflow:hidden;清除浮动

  • 给前面一个盒子添加overflow:hidden属性

• 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
div>
<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加overflow:hidden;前

  • 

• 添加overflow:hidden;后

  • 

• 注意点:

  • 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
  • IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
    • 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
  • 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

• *zoom:1;和_zoom:1的区别

  • 这个是hack写法，用来识别不同版本的IE浏览器
  • _后面的属性只有IE6能识别
  • *后面的属性 IE6 IE7能识别

清除浮动方式六

• 给前面的盒子添加伪元素来清除浮动

• 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
div>
<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加伪元素前

  • 

• 添加伪元素后

  • 

• 注意点:

  • 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
  • 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
  • CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

• 给前面的盒子添加双伪元素来清除浮动

• 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
		/*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃li>
        <li>二娃li>
        <li>三娃li>
    ul>
div>
<div class="box2">
    <ul class="ul02">
        <li>李南江li>
        <li>极客江南li>
        <li>江哥li>
    ul>
div>

• 添加双伪元素前

  • 

• 添加双伪元素后

  • 

• 注意点:

  • 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
  • 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
  • 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
  • 不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。

---

---

定位

相对定位

• 什么是相对定位?

  • 对定位就是相对于自己以前在标准流中的位置来移动

• 格式:

  • position: relative;

• 示例程序

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .box3{
            background-color: blue;
        }
<style>
        
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>

• 相对定位注意点:

  • 在相对定位中同一个方向上的定位属性只能使用一个
    • top/bottom 只能用一个
    • left/right 只能用一个
  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
  • 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
  • 

• 相对定位应用场景:

  • 用于对元素进行微调

    input{
    width: 200px;
    height: 50px;
    }
    img{
    width: 100px;
    height: 50px;

      position: relative;
      top: 20px;
    

    }

    - ![](https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzY0Nzk4Mi1mYWYyYTRjMjk1NDg4ZWQ5LnBuZw?x-oss-process=image/format,png)
    - ![](https://imgconvert.csdnimg.cn/aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzY0Nzk4Mi1mOWZjMDBlMDgzZjAxY2I4LnBuZw?x-oss-process=image/format,png)
    
    

  • 配合后面学习的绝对定位来使用

绝对定位

• 什么是绝对定位?

  • 绝对定位就是相对于body或者某个定位流中的祖先元素来定位

• 格式:

  • position: absolute;

• 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box3{
            background-color: blue;
        }
style>
    
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>

• 绝对定位注意点:
  • 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
  • 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
  • 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
    • 相对于body定位会随着页面的滚动而滚动
  • 一个绝对定位的元素会忽略祖先元素的padding

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            border: 10px solid #000;
            padding: 30px;
            position: relative;
            box-sizing: border-box;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
style>

<div class="box1">
    <div class="box2">div>
div>

• 绝对定位参考点:
  • 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
  • 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
  • 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;
            bottom: 0;
          }
style>
    
<div class="box1">
    <div class="box2">
        <div class="box3">div>
    div>
div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;
            bottom: 0;
          }
style>
    
<div class="box1">
    <div class="box2">
        <div class="box3">div>
    div>
div>

• 绝对定位水平居中
  • 1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
  • 2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>74-绝对定位水平居中title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 50px;
            background-color: red;
            position: absolute;
            /*无效*/
            /*margin: 0 auto;*/
			/*有效*/
            left: 50%;
            margin-left:-200px;
        }
    style>
head>
<body>
<div>div>
body>
html>

• 绝对定位应用场景:
  • 用于对元素进行微调
  • 配合后面学习的绝对定位来使用

子绝父相

• 企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用

• 为什么要子绝父相?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>71-子绝父相title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 50px;
            background-color: red;
            list-style: none;
            margin: 0px auto;
            margin-top: 100px;
        }
        li{
            width: 100px;
            /*height: 50px;*/
            line-height: 50px;
            float: left;
            background-color: gray;
            text-align: center;
        }
        .li03{
            background-color: darkgray;
            position: relative;
        }
        ul li img{
            /*
            缺点以前的位置仍然被占用, 不能让文字居中对齐
            */
            
            /*position: relative;
            left: -35px;
            top: -15px;*/
            
            /* 浏览器调整之后位置会发生变化*/
            
           /* position: absolute;
            top: 95px;
            left: 535px;*/
            
            
            position: absolute;
            left: 37px;
            top: -5px;
            
        }
    style>
head>
<body>
<ul>
    <li>服装城li>
    <li>美妆馆li>
    <li>京东超市li>
    <li class="li03">全球购![](hot.png)li>
    <li>闪购li>
    <li>团购li>
    <li>拍卖li>
    <li>江哥li>
ul>
body>
html>

• 相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流

固定定位

• 什么是固定定位?

  • 固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

• 格式:

  • position: fixed;

• 示例代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>74-固定定位title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 100px;
        }
        a{

            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 25px;
            text-decoration: none;
            text-align: center;
            color: #000;

            position: fixed;
            right: 10px;
            bottom: 10px;
        }

    style>
head>
<body>
<p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字p>

<a href="#">^<br>顶部a>

body>
html>

• 固定定位注意点:

  • 固定定位的元素是脱离标准流的, 不会占用标准流中的位置
  • 由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
  • IE6不支持固定定位

• 固定定位应用场景:

  • 网页对联广告
  • 网页头部通栏(穿透效果)

静态定位

• 什么是静态定位?

  • 默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流

• 静态定位应用场景:

  • 一般用于配合JS清除定位属性

z-index属性

• 什么是z-index值?

  • 用于指定定位的元素的覆盖关系

• 定位元素的覆盖关系:

  • 默认情况下定位的元素一定会盖住没有定位的元素
  • 默认情况下写在后面的定位元素会盖住前面的定位元素
  • 默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
  • 定位元素的从父现象
    • 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
    • 父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

• z-index应用场景
  • 控制界面上的定位元素的覆盖关系, 例如网页中后面的定位元素不能覆盖前面的导航条通栏