正文

[Web 前端] 001 html 常用块级标签

IP云
IP云V管理员/3 阅读
09/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目录
  • 1. html “总体框架”
  • 2. 常用的 HTML 块级标签(块元素)
    • 2.1 知识点
    • 2.2 以下 code 均写在 body 体中
      • 2.2.1 标题标签，只有 h1-h6 这 6 级
      • 2.2.2 段落标签
      • 2.2.3 列表
        • 2.2.3.1 无序列表 ul + li
        • 2.2.3.2 有序列表 ol + li
        • 2.2.3.3 自定义列表 dl + dt + dd
      • 2.2.4 表格标签
      • 2.2.5 换行
      • 2.2.6 水平分割线
      • 2.2.7 区块元素

1. html “总体框架”

  • 注释写法

<!-- -->
↑
箭头指向处写注释

  • “框架”写法

<!DOCTYPE html><!-- 声明文档，告诉浏览器解析 html 代码的版本 --><html><!-- html 是网页当中最大的标签，与闭合标签配对 --> <head><!-- head 头，一般是对网页进行设置 -->
<meta charset="utf-8"><!-- 设置网页的编码格式 -->
<title>网页的标题</title>
</head> <body><!-- body 体，主要用于写显示在页面中的内容 -->
hello html
</body></html>

  • 效果

网页的标题

hello html

2. 常用的 HTML 块级标签(块元素)

2.1 知识点

<!DOCTYPE html><!-- html 可以大写，但一般都小写 -->
<html lang="en"><!-- 将此页面定义为英文网页；lang = "zh": 中文页面 -->
<head>
<meta charset="UTF-8"><!-- utf-8 大小写均可 -->
<title>常用的 HTML 块级标签</title>
</head>
<body>
<!-- 常用的、有语义的块级元素有默认样式 独占一行 -->
</body>
<html>

2.2 以下 code 均写在 body 体中

2.2.1 标题标签，只有 h1-h6 这 6 级

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

  • 效果

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2.2.2 段落标签

<p>和风熏柳，花香醉人，正是南国春光漫烂季节。</p>

  • 效果

和风熏柳，花香醉人，正是南国春光漫烂季节。

2.2.3 列表

2.2.3.1 无序列表 ul + li

<!-- 注意：ul 标签中只能写 li 标签 -->
<ul>
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
</ul>

  • 效果
  • 无序列表一
  • 无序列表二
  • 无序列表三

2.2.3.2 有序列表 ol + li

<!-- 有序列表中有 type 属性和 start 属性
type: 设置有列表的标记类型
start: 设置列表项标记的起始位置 -->
<ol type="i" start="5">
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
</ol>

  • 效果
  1. 有序列表一
  2. 有序列表二
  3. 有序列表三

2.2.3.3 自定义列表 dl + dt + dd

<dl>
<dt>dt 自定义列表一</dt>
<dd>dd 自定义列表一的内容</dd>
<dd>dd 自定义列表一的内容</dd>
<dt>dt 自定义列表二</dt>
<dd>dd 自定义列表二的内容</dd>
</dl>

  • 效果（不明显）
dt 自定义列表一
dd 自定义列表一的内容
dd 自定义列表一的内容
dt 自定义列表二
dd 自定义列表二的内容
  • 效果图

2.2.4 表格标签

<!-- 4.
table 声明一个表格
th 表头（默认水平居中，有加粗效果）
tr 行
td 列 --><!-- 4.1 table 的属性：
width: 设置单元格的总体宽度
height: 设置单元格的总体高度
border: 设置边框显示与否
cellpadding: 设置表格中的内容与边框的间距
cellspacing: 设置表格与表格的间距 --><!-- 4.2 单元格合并：
colspan: 设置水平方向一个单元格占据的宽度
rowspan: 设置垂直方向一个单元格占据的高度 --><!-- 4.3 单元格内容的对齐方式：
水平对齐方式
align: （默认靠左显示）
center: 居中
right: 靠右
垂直对齐方式
valign: （默认垂直居中）
top: 靠上
bottom: 靠下 --><!-- 注意：
如果给 tr 设置，会影响整行
如果给 td 设置，只影响当前的单元格 --><table border="1" cellpadding="10px" cellspacing="0" width="500px" height="280px">
<tr>
<th colspan="4">表头</th>
</tr> <!-- 第二行 -->
<tr align="center">
<td rowspan="2">(2, 1) + (3, 1)</td>
<td>(2, 2)</td>
<td>(2, 3)</td>
<td>(2, 4)</td>
</tr> <!-- 第三行 -->
<tr>
<td>(3, 2)</td>
<td>(3, 3)</td>
<td>(3, 4)</td>
</tr> <!-- 第四行 -->
<tr>
<td valign="top">(4, 1)</td>
<td align="right" valign="bottom">(4, 2)</td>
<td valign="bottom">(4, 3)</td>
<td align="right" valign="top">(4, 4)</td>
</tr>
</table>

  • 效果
表头
(2, 1) + (3, 1)(2, 2)(2, 3)(2, 4)
(3, 2)(3, 3)(3, 4)
(4, 1)(4, 2)(4, 3)(4, 4)

2.2.5 换行

不加 br；不加 br；不加 br
<br>加 br；
<br>加 br；
<br>加 br

  • 效果

不加 br；不加 br；不加 br


加 br；


加 br；


加 br

2.2.6 水平分割线

<!-- hr 的这几个参数在 HTML 4.01 之前还能生效，但不推荐使用
width=50 长度为 50
width=50% 一半长度
align=left 出现在左边
size=1 线加粗-->
<hr><br>
<hr width="50"><br>
<hr width="50%" align="right" size="1">

  • 效果

2.2.7 区块元素

<!-- 没有默认样式(没有默认的语义)
div: 独占一行，一般用来划定一块区域，配合 css 在布局中使用 -->
<div>这是一个div</div>

  • 效果
这是一个 div