导读

• HTML
• 元素
• 标签
• 元素/标签是用来干什么的？
• 行内元素和块级元素的区别
• 选择器

HTML是什么？

• HTML是超文本标记语言，是用来描述web文档的一种标记语言
• HTML是蒂姆伯纳斯李（绰号：万维网之父）发明的超文本标记语言

元素

元素是由三部分构成

• 开始标签
• 内容
• 结束标签

标签

• 标签就是带有尖括号的关键词

常用的元素类型

元素的显示类型得使用display开启

• inline 行内元素
• block 块元素
• inline-block 行内块元素
• none 无元素
• flex 弹性元素
• table 表格元素
• list-item 列表元素
• grids 网格元素

行内元素和块元素之间的区别

• 行内元素：不会独占一行，不能设置宽/高，行内元素同一水平线自左向右
• 块级元素：会独占一行，能设置宽/高，块元素自上而下

选择器

选择器是什么？

• 选择器是一个选择元素的方式
• 选择元素方式的多样
  选择器分为6大类

• 全局选择器
  1.通配选择器
• 基础选择器
  1.元素选择器：选择全部标签
  2.id选择器：选择一个标签
  3.class选择器：选择一组标签
• 属性选择器
  属性选择器：1. 通过标签的属性匹配元素。2.所有的属性选择器都以⽅括号开头
  [属性]{}
  [属性：属性值]{}

[target]{/*选择带有 target 属性的所有元素。*/
 样式
}

[属性^=属性值] {}

[target=_blank] 选择带有 target="_blank" 属性的所有元素。

[属性$=属性值]

a[href$=".pdf"] 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。

[attribute~=value] [title~=flower] 选择带有包含 "flower" ⼀词的 title 属性的所有元素。 [attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。 [attribute*=value]

• 伪类选择器

1. :link 匹配未点击的超链接（超链接伪类）
2. :hover 匹配悬浮状态的元素
3. :active 匹配激活（鼠标按下）状态的元素
4. :visited 匹配已访问（抬起鼠标）的超链接（超链接伪类）
5. :nth-child 匹配第n个元素
6. :first-child 匹配第一个元素
7. :last-child 匹配最后一个元素
8. :root 匹配根元素（根元素html和mxl）
9. :focus 用于焦点元素（不是所有元素都拥有焦点只有表单元素和超链接拥有焦点）
10. :not() 匹配不是某个元素的元素
11. :checked 匹配选中的元素

• 伪元素选择器

1. :: before
2. :: after
3. ::first-letter 只对第一个生效
4. ::first-line 只对第一行的生效

• 组合选择器

1. 分组选择器：使用 逗号 组合（匹配逗号分隔的每一项）
2. 后代选择器：使用 空格 组合
3. 子元素选择器：使用 > 组合
4. 相邻兄弟选择器：使用 + 组合