蓝桥杯Web应用开发-块级标签知识点
蓝桥杯Web应用开发-块级标签知识点
专栏持续更新中
div标签
div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。
div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。
这个特性有点像之前介绍的 span 标签，它们的区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘。
div 标签的使用格式如下所示：
<div>div>
例子：
新建一个 index.html 文件。在 body 中添加一个 div 标签，写入文字内容 “蓝桥软件学院”，并为该 div 标签设置背景颜色。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div style="background-color: cornflowerblue;">示例内容div>
body>
html>
有大小的div元素：
新建一个 index1.html 文件，在 body 中添加两个 div 标签，分别给这两个 div 标签加上不同的颜色和文字，并设置其宽度为 100 个像素值。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div style="background-color:darkslateblue; width:100px;">1div>
<div style="background-color: chocolate; width:100px;">2div>
body>
html>
p标签
对段落进行分段
对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。它有三个可取值，每个可取值的含义如表所示：
left 段落左对齐
right 段落右对齐
center 段落居中对齐
注意：虽然大部分浏览器支持 align 属性，但 HTML 4.0 不推荐使用该属性，并且 HTML 5 也不支持该属性了,了解即可。
标题标签
标题标签只有 h1~h6，这六种，h7、h8 标签中的内容显示在一行，其字体大小是默认的文本字体大小。
示例：
新建 index3.html 文件，我们从 h1 写到 h8。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h1>一级标题h1>
<h2>二级标题h1>
<h3>三级标题h1>
<h4>四级标题h1>
<h5>五级标题h1>
<h6>六级标题h1>
<h7>七级标题h7>
<h8>八级标题h8>
<p>段落标签p>
body>
html>
有序列表
有序列表的默认是从 1 开始的数字排序。我们可以使用 type 属性来改变排序符号，取值如下所示：
A 用大写字母作为排序符号
a 用小写字母作为排序符号
I 用大写罗马字符作为排序符号
i 用小写罗马字符作为排序符号
1 用数字作为排序符号
默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。
基本用法：
<ol>
<li>项目一li>
<li>项目二li>
<li>项目三li>
ol>
无序列表
无序列表，是指以实心圆 ●（默认disc）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。
type 属性可以修改列表开头的符号，其取值如下：
disc 实心圆 ●
circle 空心圆 ○
square 实心方块 ■
基本用法：
<ul>
<li>项目一li>
<li>项目二li>
<li>项目三li>
ul>
自定义列表
自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。
基本用法为：
<dl>
<dt>列表项一dt>
<dd>列表项一的描述dd>
<dt>列表项二dt>
<dd>列表项二的描述dd>
dl>
总结：
div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。
p 标签用于对文本内容分段，因为我们不能像在 word 里编辑文本那样使用回车来换行。
~ ，在浏览器解析标题标签时，会将标题内容设为一个段落，字号大小会根据 n 值的大小来确定。
列表标签，分别是无序列表（ul）、有序列表（ol）、自定义列表（dl）。