QD1-P4 HTML常用标签之标题和水平线

news/2024/10/8 20:38:10 标签: 前端基础

本节视频

www.bilibili.com/video/BV1n64y1U7oj?p=4

‍

本节学习：

title标签（页面标题）
h标签（文章标题）
hr标签（横线）
body标签的属性（网页背景色，字体颜色）

Clip_2024-10-08_15-55-35

一、title标签-页面标题

title标签的作用：设置网页的标题

Clip_2024-10-08_15-57-50

页面标题就是浏览器顶部选项卡中的标题

当然这个选项卡中除了文字标题外，还有图标，后面也会学习。

二、body标签

2.1 bgcolor属性-页面背景色

body标签用于放置网页的可见内容。

body标签的bgcolor属性可以修改网页的背景色

示例1 绿色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P4-常用标签</title>
	</head>
	<body bgcolor="green">
		学习HTML
	</body>
</html>

Clip_2024-10-08_16-02-44

示例2 粉色

...省略...
<body bgcolor="pink">
...省略...

Clip_2024-10-08_16-07-55

示例3 黄色

...省略...
<body bgcolor="yellow">
...省略...

Clip_2024-10-08_16-09-21

2.2 text属性-字体颜色

通过body标签的text属性设置字体颜色

<body bgcolor="pink" text="blue">

效果

Clip_2024-10-08_16-20-18

三、h标签-标题

HTML的标题与Markdown类似：6个六层级，最大为1级，最小为6级。不同之处在于Markdown使用井号#的数量表示不同层级的标题，而HTML使用<h1>、<h2>...用数字区分不同层级的标题。

Clip_2024-10-08_16-32-20

一个页面最多使用一个<h1>标签，因为搜索引擎会将<h1>标签的标题作为关键字，使用多个<h1>标签可能会被搜索引擎拉黑。
同样推荐在Markdown写作时，以二级标题为最高层级。

四、hr标签-横线

<hr>标签产生一条横线

Clip_2024-10-08_16-50-17

横线的长度

width属性指定宽度，可以是像素px，也可以百分比%。同时最好使用<hr/>指明标签的范围（关闭）。

Clip_2024-10-08_16-54-35

横线的位置（左右）

align属性：对齐方式

Clip_2024-10-08_17-00-28

横线的粗细

Clip_2024-10-08_17-03-12

‍

以下是拓展内容：

五、拓展内容-颜色表示

在前端开发中，表示颜色的方式有多种，以下是一些常用的方法：

1. 十六进制颜色代码

十六进制颜色代码以 # 开头，后面跟着六个十六进制数字（0-9 和 A-F），表示红绿蓝（RGB）的值。例如：

#FF0000 表示红色
#00FF00 表示绿色
#0000FF 表示蓝色
#FFFFFF 表示白色
#000000 表示黑色

2. RGB 颜色值

RGB 颜色值使用 rgb() 函数表示，其中包含三个参数（红色、绿色、蓝色），每个参数的值范围是 0 到 255 或者百分比。例如：

rgb(255, 0, 0) 表示红色
rgb(0, 255, 0) 表示绿色
rgb(0, 0, 255) 表示蓝色
rgb(255, 255, 255) 表示白色
rgb(0, 0, 0) 表示黑色
rgb(100%, 0%, 0%) 也可以使用百分比

3. RGBA 颜色值

RGBA 颜色值与 RGB 相似，但多了一个 alpha 通道，用于表示透明度，其值范围是 0（完全透明）到 1（完全不透明）。例如：

rgba(255, 0, 0, 0.5) 表示半透明的红色

4. HSL 颜色值

HSL 颜色值使用 hsl() 函数表示，其中包含三个参数（色调、饱和度、亮度），色调的值范围是 0 到 360，饱和度和亮度的值范围是百分比。例如：

hsl(0, 100%, 50%) 表示红色
hsl(120, 100%, 50%) 表示绿色
hsl(240, 100%, 50%) 表示蓝色

5. HSLA 颜色值

HSLA 颜色值与 HSL 相似，但同样多了一个 alpha 通道。例如：

hsla(0, 100%, 50%, 0.5) 表示半透明的红色

6. 颜色名称

HTML 和 CSS 定义了一系列颜色名称，可以直接使用这些名称来表示颜色，例如：

red
green
blue
white
black
yellow
purple
orange

示例

以下是一些使用不同方式表示颜色的 CSS 示例：

/* 十六进制 */
.color1 { background-color: #FF0000; }
/* RGB */
.color2 { background-color: rgb(0, 255, 0); }
/* RGBA */
.color3 { background-color: rgba(0, 0, 255, 0.5); }
/* HSL */
.color4 { background-color: hsl(0, 100%, 50%); }
/* HSLA */
.color5 { background-color: hsla(240, 100%, 50%, 0.5); }
/* 颜色名称 */
.color6 { background-color: purple; }