html选择器与文档流基本介绍

html选择器与文档流

【任务一】什么是html，它有哪些部分组成，每个部分之间的关系是什么？

【任务二】选择器有哪些？选择的权重？

【任务三】文档流：块元素与行内元素

HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页， HTML 文档也被称为网页

​ HTML中由> 和标签组成头和身体

学习技巧：

在网页中 html 是专门用来负责网页结构的，所以在学习html使用的时候，
应该关注标签的语义，而不是样式

中的meta标签：

​ meta标签主要用于设置网页中一些元数据，这些元数据是用来给网页解析时使用的。

css选择器

1. 元素选择器

2. id选择器

3. 类选择器

4. 通配选择器

5. 复合选择器

6. 并集选择器

7. 关系选择器

8. 伪类选择器

   ​ —伪类是用来描述一个元素的转态，如：第一个元素，被点击的元素…

选择器的权重

​ 内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承样式

文档流

1. 网页是一个多层的结构

2. 通过css可以分别为每一层来设置样式

3. 作为用户来说，他只能看到最上面的那一层

4. 在这些层中，最底下的称为文档流，文档流逝网页的基础，我们创建 的元素，默认都是在文档流中进行排序的

5. 元素有两个状态：

   ​ ①在文档流中

   ​ 块元素

   ​ ①块元素在网页中独占一行（自上向下，垂直排列）

   ​ ②默认宽度是父元素的全部

   ​ ③默认高度是被内容撑开

   ​ 行内元素

   ​ ①行内元素不会独占一行，只会占据自身大小

   ​ ②行内元素在页面中自作向右排列

   ​ ③行内元素默认宽度和高度都是被内容撑开

   ​ ②脱离文档流

   ​ 块元素

   ​ ①块元素在网页中不再独占一行

   ​ ②默认高度和宽度是被内容撑开

   ​ 行内元素

   ​ 杭磊元素脱离文档流会与块元素脱离文档流一样

6. 脱离文档流之后，不需要再区分块元素和行内元素