导读
- 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]
- 伪类选择器
- :link 匹配未点击的超链接（超链接伪类）
- :hover 匹配悬浮状态的元素
- :active 匹配激活（鼠标按下）状态的元素
- :visited 匹配已访问（抬起鼠标）的超链接（超链接伪类）
- :nth-child 匹配第n个元素
- :first-child 匹配第一个元素
- :last-child 匹配最后一个元素
- :root 匹配根元素（根元素html和mxl）
- :focus 用于焦点元素（不是所有元素都拥有焦点只有表单元素和超链接拥有焦点）
- :not() 匹配不是某个元素的元素
- :checked 匹配选中的元素
- 伪元素选择器
- :: before
- :: after
- ::first-letter 只对第一个生效
- ::first-line 只对第一行的生效
- 组合选择器
- 分组选择器：使用 逗号 组合（匹配逗号分隔的每一项）
- 后代选择器：使用 空格 组合
- 子元素选择器：使用 > 组合
- 相邻兄弟选择器：使用 + 组合
