02_HTML03

学于黑马和传智播客联合做的教学项目 感谢
黑马官网
传智播客官网
微信搜索"艺术行者"，关注并回复关键词"软件测试"获取视频和教程资料！
b站在线视频

HTML03

1.1 元素展示类型

在 HTML 当中本身定义了很多的元素，这些元素默认在网页上展示的时候会存在自已默认的状态，例如有些元素默认情况下宽高属性不起作用，有些元素默认情况下都独占一行显示。这种现象我们就称之为元素展示类型，为了记忆我们人为的将元素展示类型分为三种： 块元素、行内元素、行内块元素。

1. 块元素：当同时存在多个块元素的时候，每个块元素都会独占一行显示，且默认情况下它的宽高属性可以起作用。
2. 行内元素：当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放不下自动折行。默认情况下它的宽高属性不起作用
3. 行内块元素：当同时存多个行内块元素的时候，这些元素会显示在一行，默认情况下它的宽高属性起作用。
4. 注：不需要去死记哪些元素是行内，哪些是块，哪些是行内块。

1.2 布局标签补充

1. div 标签，它是 HTML 当中定义好的一个双标签( DIV+CSS )。我们人为的认为它是一个体积最大的标签。

2. span 标签，它也是一个双标签，主要用来放文字，我们人为的认为这体积很小。

3. 段落标签里不能包裹标题，因为浏览器不能正常解析。

1.3 元素展示类型转换

在我们进行网页布局过程中往往会遇到一些"特殊的模块"，对于这种模块来说我们之前的一些常见标签在使用的时候就会显示 "语义" 有些不对应，所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成 设计稿 上的样子。在 CSS 当中有一个 display 属性，可以设置不同的值来完成元素类型的转换。

1. 转成块元素： display:block;

2. 转成行内块：display:inline-block

3. 转成行内元素：display:inline; none

1.4 简单选择器权重

权重：我们就可以理解为是不同类型的 CSS 选择器在对同一个元素进行样式设置的时候，出现的控制能力不同的现象。

对于简单选择器来说 ： id 选择器 》 类名选择器 》 标签名选择器

1.5 CSS 特性

1. 在权重相同的情况下，同一个元素后写的 CSS 样式会覆盖先写的 CSS 样式。【覆盖性】

2. CSS 的定义存在继承的特点，子元素会继承父元素的一些样式【继承性】

(1) 不是所有的 CSS 属性都可以被继承。

(2) 不是所有类型的元素都会去继承祖先元素的样式( 继承一般发生在块元素的身上)

(3) 继承指的就是子元素可以使用祖先元素的一些样式

3. 不同选择器对同一个元素的 CSS 控制能力存在着强弱。【优先级】

1.6 复合选择器

一、为什么需要复合选择器

在实际的网而制做过程中往往会出现很多结构层级嵌套很深的现象， 而这种结构模块又很多，大家使用的标签名称又一样。所以此时我们就可以通过复合选择器，将这些简单选择器进行组合。从而让我们选择元素变得简单。

二、常见的复合选择器：

1．后代选择器：这种选择器就是以某一个元素为起点，将它做为祖先然后不停的向下进行穿透查找，去选择它下面的后代元素。

起点元素 后代元素 .....{ 设置样式 }

注：

01 后代选择器当中的每个部分都可以采用任意的简单选择器代替。

02 不同的部分之间要用空格隔开。

03 ...... 就表示可以不停的向下层查找。

2．并列选择器：就是将多个选择器使用 逗号 进行连接，表示同时选中这些元素，然后设置相同的样式。其中每个部分的选择器都可以由任意类型的选择器构成。

1.7 选择器权重总结

1 简单选择器: id 名 》 class 名 》 element 名

2 复合选择器: 需要在大家明白的就是复合选择器由多个其它类型选择器组合而成，为了方便比较，我们人为的给每个简单选择器都定义了一个数值，分别是： Id(100) class(10)

ele(1),这三个数值我们也称之为权重值，有了它们之后只需要将当前选择器中出现的权重值进行相加求，最终的结果就是该选择器的权重。数值越大的权重越大

3 切记权重比的就是不同选择器对同一个元素的控制力比较（ 区别继承的影响 ）

1.8 CSS 文件存放位置

CSS 代码可以被我们放在很多的地方，习惯性的有三种写法：内嵌 CSS 、外链 CSS、行内 CSS 。

1. 内嵌 CSS 指的就是将 CSS 代码写在 html 网页中。

2. 外链 CSS 指的就是就将 CSS 代码写在外部的独立 CSS 文件中。

3. 行内 CSS 指的就是将 CSS 代码写在具体的 HTML 标签身上 。

注：

01 依据浏览器渲染页面原理，我们选将 CSS 代码写在 HTML 文件靠前的位置。

02 使用外链 CSS 写法的时候，外部独立的 CSS 文件当中不需要写 style 标签，同时还

需通过 link 标签将某个 CSS 文件引入到具体的 HTML 文件当中。 rel 属性对不要省略

<link href="目录 CSS 文件路径" type="text/css" rel="stylesheet" /> 

03 对于上述的三种 CSS 文件存放位置来说，行内 CSS 的权重是最高，但是外链与内嵌并不存在谁一定大于谁的现象( 权重 )，它的控制能力完全取决于各自所使用的选择器权重。

04 如果想要直接将某一个样式的权提至最高，我们只需要在该句 CSS 代码的最后设置 !important .

P{ color:pink!important; }

1.9 音频标签

<audio autoplay controls loop>  
<source src="格式 1 路径" /> 
....... 
</audio>  

注：

01 audio 是一个双标签，用来定义一个声音资源模块。

02 autoplay 用来设置自动播放。

03 controls 调用当前设备的播放控制。

04 loop 设置当前音频循环播放。

05 默认 audio 里的文字不显示，只有在当前浏览器不支持这个标签的时候会显示文字。

1.10 常见的文字样式

1. 行高： line-height, 当我们将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直方向居中显示的效果。

2. 水平对齐方式：text-align: left | center | right ，分别表示设置文字在当前盒子当中水平的对齐。

3. 字体大小： font-size ,单位是 px ，一般情况下浏览器都会有一个最小的显示字体。

4. 字体粗细： font-weight,可以设置关键字，或者数值( 100-900 ). 关键字有 normal 表示正常，还有 bold 表示加粗。

5. 字体名称： font-family ，一般常用的就是 "微软雅黑""黑体"

6. 字体颜色： color ，可以设置颜色单词，还可以是十六进制的数字。

1.11 文字阴影

一、字体样缩写

Font: 文字粗细 大小/行高 字体名称;

Font: bold 20px/200px '微软雅黑';

二、CSS3 中的文字阴影

Text-shadow: x y r color;

Text-shadow: 0px 0px 0px red;

注：

01 x 表示阴影在水平方向的偏移量，可以设置负值，正负不表示大小，只表示方向。

水平向右为正，向左为负，单位是 px

02 y 表示阴影在垂直方向的偏移量，垂直向上为负，向下为正

03 r 表示阴影的模糊程度，数值越大阴影越模糊 ，单位 px

04 color 表示阴影的颜色

05 C3 允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开

1.12 过渡属性

过渡属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程。在 C3 中新增了一个属性叫 transition

Transition: all 1s linear 0s;

注：

01 第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用 all 表示所有的属性都过渡。

02 第二个参数的作用设置过渡需要时长，单位是 s 不要省略

03 第三个参数的作用设置过渡的动画形式，linear 表示匀速

04 第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为 0 ，单位也不能省。

05 :hover 选择某个元素被鼠标移上时的状态。

06 transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会再有过渡变化。