1.HTML与CSS的概述：
HTML
根据W3C定义，HTML全称HyperText Markup Language，用于定义文档内容结构
CSS
根据W3C定义，CSS全称Cascading Style Sheets，用于定义HTML文档的样式（外观）
HTML：
- head：meta、title。
- 2. body：其他元素。
html元素又叫做根标记、根元素，它是所有其他元素的祖先元素，文档中所有其他元素，都必须放置在它的元素内容中。
<html lang="en"></html>该文档中的文字使用英语书写
<html lang="zh-cmn-Hans></html>该文档中的文字使用简体中文书写
head元素：
- 又叫做文档头，它是html元素的第一个子元素。
- 文档头中可以包含一些其他元素，用于描述页面的附加信息
注意！head元素中的内容不会显示在页面上
head元素通常包括以下元素:
body元素：
- body元素又叫做文档体，网页中所有的可见内容都放置在该元素内
- body元素中可以包含大量其他元素，定义文档的内容结构
css术语：
- 元素选择器（标记名{/*}）
- 类选择器（.类名{}）
- ID选择器（#id值{}）
2.html中的各种元素
超链接<a>元素 点击链接后跳转到另外一个页面
<a>元素的书写格式：<a href="目标">内容<a>
绝对路径和相对路径
<a target="页面打开位置" href="页面路径">内容<a> <link rel="stylesheet" href="CSS文件路径">
绝对路径： 当网站部署到服务器后，网站中的所有资源都可以通过一个地址(路径)访问
该地址(路径)的书写格式为：协议://域名/目录
示例：http://meyerweb.com/eric/tools/css/reset/reset.css
- 协议：http
- 域名：meyerweb.com
- 目录：根目录/eric/tools/css/reset/reset.css
相对路径： 相对路径是相对于当前资源的位置，只能用于访问站内资源
相对路径的书写格式为：./路径
./：表示当前资源所在的目录，必须作为相对路径的开始，可省略
../：表示返回上一级目录
文本元素：
h1~h6：1级标题~6级标题 p:段落
blockquote：整段的引用 cite:对参考文献的引用
q：小段文本的引用 abbr：对缩写词的引用
strong:重要的文本 em：强调的文本
b：应突出显示的文字 i：应区别对待的文本
结构元素：
div:它是一个非常常见的元素
它没有任何的语义
它仅仅表示一个容器，用于包含其他元素
在网站布局时，它通常用于表示页面的区域
语义化结构元素:
<header> 用于表示页面或某个区域的头部
<nav>用于表示导航栏
<aside>用于表示跟周围主题相关的附加信息
<article>用于表示文章或其他 可独立页面存在的内容
<section>用于表示一个整体的一部分主题
<footer>用于表示页面或某个区域的脚注
无语义元素:
<div>无语义，表示页面中的一块区域
<span>无语义，仅用于给一小段文本添加样式
<br>无语义，空元素，用于在页面中换行
<hr>无语义，空元素，用于在页面中制造一个分割线
<pre>无语义，预格式化元素(保留文字在源代码中的格式)
实体字符:
在HTML中，有些字符会被浏览器特殊处理
如：<、>会被浏览器认为是标记符号，不会显示到页面
空白字符会被浏览器折叠为一个空格
实体字符的书写格式为&实体名称;或&#实体编号;
空格：实体名称 ； 实体编号 ；
<（小于符号）实体名称<； 实体编号<；
>(大于符号)实体名称>； 实体编码>；
&（并且符号）实体名称&； 实体编码&；
©（版权符号）实体名称©； 实体编码©；其他元素:
ins：加下划线
del：加中间线
ol(li):有序列表
ul(li):无序列表
dl:dt表示标题，dd表示正文
块级元素，行内元素与行内块级元素:
块级元素 行内元素与行内块级元素 分类等（相互之间可以转换）
**块级元素 **
1.宽高可以自行设置，与内容 无绝对 关系
2.默认独占一行，与其他元素不能共存一行
3.对应的css属性是 display：block
4.常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer
**行内元素 **
1.宽高不可以设置，设置无效，由内容决定宽高
2.默认能与其他元素共存一行
3.对应的css属性是display:inline
4.常见的行内元素有：a、 span 、 strong、 I、 b 、td
**行内块级元素 **
1. 宽高可以设置，与内容无绝对关系
2. 默认不独占一行，可与其它元素共存一行
3. 对应的CSS属性是：display:inline-block
4. 常见的元素： img 、 td 、 table 、video 、audio 、 表单 、 。。。
3.选择器和层叠：
常见CSS属性：
h1{color:red; text-align:center;}
CSS选择器：
CSS选择器，决定了将规则应用到哪些元素上
三种基本选择器：元素选择器、类选择器、ID选择器
除此之外，CSS还提供了大量的选择器
通配符选择器
属性选择器
伪类选择器
伪元素选择器
层叠概述：
什么是层叠: 层叠是一种机制，用于解决CSS声明冲突
声明冲突:多个相同的CSS声明(属性)，应用到同一个元素上
层叠的整个过程，是浏览器根据规则自动完成的
学习层叠，就是学习层叠过程中的规则
学习层叠的目的，是为了在开发时更好的掌控元素的样式
层叠的过程:
- 比较优先级:优先级低的声明会被淘汰，优先级高的声明胜出
- 比较特殊性:特殊性低的声明会被淘汰，特殊性高的声明胜出
- 比较源次序:源次序靠前的声明会被淘汰，靠后的声明胜出
经过这三个步骤，仅会有一个声明最终胜出，其他的全部被淘汰
比较优先级:
每一个声明都有一个优先级
当发生冲突时，优先级高的会保留，优先级低的会被淘汰
一个声明的优先级，与它的来源和重要性有关
来源：
- 作者样式表
- 浏览器默认样式表
- 用户样式表
重要性：
若属性值后跟上!important ，则表示一条重要声明，否则，表示普通声明
示例：color:red; 普通声明
color:red !important; 重要声明
优先级从低到高：
- 浏览器默认样式表中的声明
- 用户样式表中的普通声明
- 作者样式表中的普通声明
- 作者样式表中的重要声明
- 用户样式表中的重要声明
比较特殊性 ：
特殊性从高到低：
行内样式
ID选择器
类选择器
元素选择器
通配符选择器
比较特殊性-总体规则：
每一个声明都有一个特殊性(Specificity)
当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰
一个声明的特殊性，取决于规则适用范围的大小
规则适用范围越大，特殊性越低，适用范围越小，特殊性越高
特殊性从高到低：行内样式> ID选择器 > 类选择器 > 元素选择器 > 通配符选择器
比较源次序：最后出现的声明胜出，其他的全部淘汰。
该规则的实际应用：
- CSS Reset代码前置
- a元素的伪类书写顺序
a元素的伪类书写顺序
:link 链接未被访问过的样式
:visited 链接已被访问过的样式
:hover 鼠标悬停到元素上的样式，适用于其他元素
:active 链接被激活时的样式
继承：
什么是继承：继承(inherit)，是指子元素会自动拥有父元素的某些CSS属性
继承是自动发生的，开发者不需要书写任何额外的代码
并不不是所有CSS属性都可以被子元素继承
可被继承的属性：color font-size font-weight text-align
不可被继承的属性：background-color
有些属性在页面的某个区域中具有通用性
若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿
继承发生的场景
一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素：
- 该属性是可继承的属性
- 该属性在样式表中没有声明
强制继承：强制继承，也叫做显式继承，是指将CSS属性值设置为inherit
这样做，通常有两个原因：
- 为了继承有些不可继承的属性
- 为了继承已被声明过的属性
属性值计算过程简介
属性值计算过程简介：
1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
4.使用默认值：对仍然没有值的属性，使用默认值
元素的渲染顺序：先算出父元素的所有CSS属性值，
再计算子元素，依次类推