元素是什么？

在HTML,元素由三部分构成：

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

标签是什么？

<p>开始标签
<dr>单标签
</ul>结束标签

元素/标签是用途是什么？

用途：标签用于描述网页内容。通过标签告诉浏览器：

• 我是一个标签
• 我是一个段落
• 我是一个列表
• 我是一个表格
• 我是第一张图片
• 我是一个超链接
• 我是一个导航
• 我是一个页头
• 我是一个页尾

设置HTML标签的人叫什么

蒂姆·伯纳斯·李（万维网之父）

元素类型

lnline：把元素显示为行内元素，
block：把元素显示块元素
inline-block：把显示为行内块元素
None：把元素显示为无
List-item：列表元素
Table：表格元素
Flex：弹性元素
Grids：网格元素

行内元素和块元素的区别

共三点
1.块元素独占一行，可以设置宽高，自上而下排列
2.行内元素不会独占一行，不能设置宽高，自左而右

选择器

1.选择器是什么？

• 选择器就是选择元素的方式。
• 选择元素的方式多样化造成选择器的多样化

选择器的分类

1.全局选择器

• 全局选择器就是通配符，通配符用于选择器所有元素
• 通配符星号

2.基础选择器

• 1.元素选择器：选择全部标签
• 2.id选择器：选择一个标签
• 3.class选择器：选择一组标签

3.属性选择器

• 1.属性选择器：通过标签的属性匹配元素
• 2.所有的属性选择器都以方括号开头的

<style>
        /* 属性选择器 */
        [title]{
            color: aqua;
        }
        /* 属性值选择器 */
        [title="一级标题"]{
            color: blue;
        }
        /* 属性值开头选择器 */
        [href^="http"]::after{
        content: '666'; 
        }
        /* 属性值结尾选择器 */
        [href$=".net"]::after{
        content: '77'; 
        }
</style>

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

2.[属性=属性值]

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

3.[属性^=属性值]

a[href^="https"]{ /*选择其 href 属性值以"https" 。*/
样式
}

4.[属性$=属性值]

a[[href$=net]::after]{ /*选择带有 [href$=net]::after 属性的所有元素。*/
样式
}

[attribute]     [target]    选择带有 target 属性的所有元素。
[attribute=value]   [target=_blank]     选择带有 target="_blank" 属性的所有元素。
[attribute~=value]  [title~=flower]     选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value]  [lang|=en]  选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]  a[href^="https"]    选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]  a[href$=".pdf"]     选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]  a[href*="w3school"]     选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

4.伪类选择器

• 伪类选择器的标志就是单冒号
• 1. :link ：link 匹配未点击常态的超链接
• 2. :hover ：hover 匹配悬浮状态的元素
• 3. :active ：匹配激活状态（鼠标按下）的元素
• 4. :visited ：visited 匹配已访问状态（抬起鼠标）的超链接
• 5. :last-chlid() ：匹配第N个子元素
• 6. :nth-child() ：匹配第一个子元素
• 7. :first-child() ：匹配最后一个子元素
• 8. :root ：匹配根元素 （根元素：html 或 xml）
• 9. :focus ：匹配焦点元素 （部分元素拥有焦点元素：表单标签，超链接）
• 10. :not() ：匹配不是某个元素里的某一个元素
• 11. :checked ：匹配选中的元素

5.伪元素选择器

• 1. ::before
• 2. ::after
• 3. ::first-letter ：选中段落第一段第一个首字母
• 4. ::flrst-line ：选中第一行
• 5. ::s

6.组合选择器

组合选择器就是把上面这五类组合在一起使用。

• 1.分组选择器：使用 逗号 组合 (匹配逗号分隔的每一项) 分组选择器，有逗号隔开应用相同的样式
• 2.后代选择器：使用 空格 组合 (匹配当前元素的所有后代元素)
• 3.子元素选择器： 使用 > 组合 (匹配当前元素的所有兄弟子元素)
• 4.相邻兄弟选择器：使用 + 组合 (匹配当前选择相邻的兄弟元素)