HTML基础——body部分

本文最后更新于：8 个月前

本文主要介绍html文档中出现在body部分的一些重要标签

HTML基础——body部分

目录结构

上篇 head部分

  • 文档声明
  • 文档注释
  • HTML全局属性
  • head部分
    • meta标签
    • link标签
    • title标签，必须
    • script标签

下篇 body部分

  • body部分
    • 语义主体标签，header、main、footer等等
    • 常用文本标签
    • 链接标签
    • 表格
    • 列表标签
    • 表单标签
    • 多媒体标签
    • iframe
    • 实体字符

一、HTML语义化

语义化是什么？

使用语义元素，语义元素清楚地向浏览器和开发者描述其意义

好处：

能够清晰地呈现内容结构、便于维护，有利于SEO、帮助爬虫获取更多有效信息，方便其它设备解析（屏幕阅读器）

H5新增的语义元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header></header>
<footer></footer>
<nav></nav>

<main></main>
<aside></aside>
<article></article>
<section></section>

<figure></figure>
<figcaption></figcaption>

<time></time>
<mark></mark> 强调文本
<summary></summary> 包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息

部分演示：

mark

图片标题
img
summary 折叠内容

二、布局标签

  • header（h5），可以作为页面的header，也可以作为文章的header
  • nav（h5），定义导航链接的部分。只包含 全局属性
  • main（h5），规定文档的主要内容。一个文档至多有一个<main>标签
  • aside（h5），定义 article 以外的内容。aside 的内容应该与 article 的内容相关
  • footer（h5），定义文档或节的页脚，可以在一个文档中使用多个 <footer> 元素
  • div，块级元素，把文档分割为独立的、不同的部分，可定义文档中的分区或节
  • br，可插入一个简单的换行符，用来输入空行，而不是分割段落。它是空标签，这意味着它没有结束标签，正确的使用方式是<br/>

三、块级元素 & 行内元素

1、块级元素

指那些在浏览器显示中占据一行，并且排斥与其他元素统一行的元素。块级元素中可以设置 width、height、padding、margin 等属性

常见块级元素：“三大列表和表格，六大标题和表单，段落地址和分块”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div></div>
<h1></h1> ... <h6></h6>
<p></p>		
<blockquote></blockquote>

<form></form>	

<table></table>
<caption></caption>	表格的标题
<thead></thead>
<tbody></tbody>
<th></th>
<tr></tr>
<tfoot></tfoot>

<ul></ul>
<ol></ol>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<address></address>

<header></header>
<nav></nav>
<footer></footer>

2、行内元素

指那些只占据内容包含的空间，width和height不起作用的元素。行内元素的水平边距起作用，垂直边距撑开盒子，但是不推开其它元素

常见的行内元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a></a>
<img>

<span></span>
<sub></sub>
<sup></sup>
<code></code>
<abbr></abbr> 缩写
<cite></cite> 引用

<button></button>
<input>
<textarea></textarea>
<select></select>
<label></label>

3、区别

block inline inline-block
默认宽度 （内联方向上）占据父容器的所有宽度 由内容决定 由内容决定
高度 由内容决定 由内容决定 由内容决定
width 生效 不起作用 生效
height 生效 不起作用 生效
布局流 垂直向下 水平向右 水平向右
水平边距 起作用、推开其它元素 起作用，推开其它元素 起作用、推开其它元素
垂直边距 起作用、推开其它元素 会被应用，但是不推开其它元素 起作用、推开其它元素

4、转换方式

  • dispaly:inline，转换为行内元素
  • dispaly:block，转换为块状元素
  • dispaly:inline-block，转换为行内块元素

四、链接标签

1
2
<a href="/html5/att_a_href.asp" title="HTML5 <a> href 属性">href</a>
<a href="http://www.w3school.com.cn" hreflang="zh">w3school</a>

<a> 标签定义超链接，用于从一个页面链接到另一个页面

注：title是html元素的全局属性

属性：

属性 值 描述
href URL 链接的目标 URL
target _self，在同一框架中打开
_blank，新标签页
_top，在整个窗口中打开
_parent，在父框架中打开		 在何处打开目标 URL。仅在 href 属性存在时使用。
_top和_parent较少使用，简单测试情况下，表现与_self一致
rel external
next
search等等		 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用，较少使用
media media query 规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
type mime_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用

五、表格

How I chose to spend my money
Purchase Location Date Cost
Haircut Hairdresser 12/09 30
Shoes Shoeshop 13/09 65
SUM 95

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table border="3">
    <caption>How I chose to spend my money</caption> <!--表格标题-->
    <thead>		<!--表格页眉-->
        <tr>	<!--行-->
            <th>Purchase</th>	<!--标题单元格，表头-->
            <th>Location</th>
            <th>Date</th>
            <th>Cost</th>
    	</tr>
    </thead>
    <tbody>		<!--表格主体栏-->
        <tr>
            <td>Haircut</td>	<!--正文单元格-->
            <td>Hairdresser</td>
            <td>12/09</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>65</td>
        </tr>
    </tbody>
    <tfoot>		<!--表格页脚-->
        <tr>
            <td colspan="3">SUM</td>
            <td>95</td>
        </tr>
    </tfoot>
</table>

1、表格标签

上面示例代码中出现的表格标签有：<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>，另外还有2个标签

<col> 定义用于表格列的属性
<colgroup> 定义表格列的组

经过实测，发现上述2个标签似乎并不起作用

2、跨行、跨列

  • rowspan，跨行
  • colspan，跨列
  • 注意：以上两个属性都是定义在<td>或<th>元素（即单元格）里面的
A B
C D 
1
2
3
4
5
6
7
8
9
10
<table>
    <tr>
        <td rowspan="2">A</td>
        <td colspan="2">B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

3、整行/列应用属性

通过<col>和<colgroup>标签设置样式似乎并不起作用了，原因疑似很多属性已经被弃用了，详见： col | MDN

通过CSS选择器来选中整行/列设置样式

image-20221101110624830

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        table tr td:first-child{
            text-align: center;
        }
        table tr td:first-child+td{
            text-align: right;
        }
        table tr td:last-child{
            text-align: center;
        }
        
        table tbody tr:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <table width="100%" border="1">
        <caption>示例：整列设置样式</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>3班</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>1班</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

五、列表

列表支持嵌套，列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

1、无序列表

  • 牛奶
  • 面包
1
2
3
4
<ul>
    <li>牛奶</li>
    <li>面包</li>
</ul>

2、有序列表

  1. 摩卡
  2. 奥迪
1
2
3
4
<ol>
    <li>摩卡</li>
    <li>奥迪</li>
</ol>

列表项的序号可以更换，通过type属性设置

1
2
3
4
<ol type="A/a/I/i"> 
    <li>摩卡</li>
    <li>奥迪</li>
</ol>

image-20221101111742546

3、定义列表

项目<dt>及其注释<dd>的组合

摩卡
长城旗下的一款新能源汽车
奥迪
老牌德系汽车
1
2
3
4
5
6
<dl>
    <dt>摩卡</dt>
    <dd>长城旗下的一款新能源汽车</dd>
    <dt>奥迪</dt>
    <dd>老牌德系汽车</dd>
</dl>

六、iframe

一个简单的<iframe>

1
2
3
4
5
6
<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

嵌入的<iframe>具有独立的DOM实例，有自己的上下文

1、优缺点

  • 优点一： 模块分离，如果有多个网页引用iframe，那么只需要修改一处即可；重载页面时不需要重载整个页面（只重载iframe部分）
  • 优点二：iframe页面和父页面分离，不受parent的CSS或全局JavaScript影响
  • 缺点一：增加额外性能开销（请求开销、内存开销）
  • 缺点二：产生多个页面，不易管理
  • 缺点三：小型设备无法显示全框架，设备兼容性差等等

可以看到，iframe的缺点其实是多于优点，如果不是有特别的需要，一般很少使用

2、适用场景

  • 典型应用，所见即所得的网页编辑器
  • 加载第三方广告页面
  • 创建一个隔离的“沙箱”实验环境，iframe可以通过sandbox等属性限制JavaScript对它的DOM对象的操作权限

属性

属性 描述
src 被嵌套的页面的 URL 地址
title 全局属性，鼠标悬浮在标签上时显示的提示文本
name 用于定位嵌入的浏览上下文的名称。这个属性可以用作<a>标签、<form>标签的target属性值
也可以用作<input>、<button>标签的formtarget属性值
width/height 指定标签的宽高，默认值是宽300，高150
importance 表示 <iframe> 的 src 属性指定的资源的加载优先级，取值范围包括：
auto（默认值），浏览器根据自身情况决定
high，资源的加载优先级较高
low，资源的加载优先级较低
sandbox 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件
allow 用于为<iframe>指定其特征策略.
allowfullscreen 添加该字段后，允许通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式
referrerpolicy 表示在获取 iframe 资源时如何发送 referrer 首部

参考链接：

浅谈iframe的优缺点及应用场景_CSDN博客_iframe使用场景

iframe - HTML | MDN

七、字符实体

在 HTML 中，某些字符是预留的。比如<，如果直接使用<，浏览器会误认为它是标签

如果需要正确地显示「预留字符」，必须在 HTML 中使用字符实体

字符实体格式为：

1
&entity_name;	或者	&#entity_number;
显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
© 版权（copyright） &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;

更多字符实体请参考：HTML ISO-8859-1 参考手册 (w3school.com.cn)

八、map+area图片热区域

1、实例

使用场景：创建带有可点击区域的图像映射

通常结合<img>标签的usemap属性使用，在<img>标签中创建可以点击跳转到区域，

比如下图，点击矩形框和圆形框对应的位置，可以相应地跳转到指定的新链接页面（可用来展示详细的信息）

image-20221105193619468

示例代码如下：（可以直接复制运行查看实际效果）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        .container {
            position: relative;
        }
        .box {
            border: 2px solid red;
            position: absolute;
            /* z-index: -1; */ 设置为-1时，映射区域可点击；注释掉时，映射区域被div标签覆盖，用来观察区域所处位置
        }
        #box1 {
            left: 750px;
            top: 200px;
            width: 100px;
            height: 100px;
            border-radius: 100%;
        }
        #box2 {
            left: 450px;
            top: 120px;
            width: 180px;
            height: 90px;
        }
    </style>
</head>

<body>
    <main>
        <h2>广东省地图</h2>
        <div class="container">
            <img src="https://qiuzcc-typora-images.oss-cn-shenzhen.aliyuncs.com/images/2022/202211051434476.jpeg"
                alt="Workplace" usemap="#workmap" width="1000" height="800">
            <div class="box" id="box1"></div>
            <div class="box" id="box2"></div>
        </div>

        <map name="workmap">
            <area shape="circle" coords="750,200,100" alt="梅州" href="https://baike.baidu.com/item/%E6%A2%85%E5%B7%9E/2554831" target="_blank">
            <area shape="rect" coords="450,120,630,210" alt="韶关" href="https://baike.baidu.com/item/%E9%9F%B6%E5%85%B3/868404" target="_blank">
        </map>
    </main>
</body>
</html>
 <!-- 通过实践发现，area元素在文档流中实际不存在，它的坐标为(0,0)
        但是它的作用范围是实际存在的（鼠标悬浮在区域上面时，光标会发生变化）。
        而且这个区域的坐标计算是相对于img标签的起点来开始计算的，而不是相对于文档流或窗口，这具有很大的实际意义，大大简化了坐标的计算
    
        area所定义出来的区域是不可见的，为了能够显示“看见”这些区域，使用了div元素+border属性来显现出这些区域
        div元素需要放置在和img标签同个容器内（而且要保证，容器内只有这两种元素）
        然后需要设置div的position属性为absolute，让它脱离文档流，这样才能覆盖到真正的区域上面
        但是，这样带来的坏处就是，div标签遮蔽了area区域，无法点击。
    -->

解析：

  1. <area>标签在文档中是找不到的，显示坐标为(0,0)。但是它所表示的映射区域是实际存在的，只是不可见

    image-20221105200426251

  2. 为了能够”看见“映射区域，需要通过 「div盒子+border」的方式去显示映射区域

    首先，用一个容器包裹<img>标签和<div>盒子

    然后，给该容器设置一个相对布局，给<div>盒子设置成绝对布局，让<div>盒子脱离文档流，悬浮于<img>之上

    接着，给<div>盒子设置border属性，显示出可见边框

    最后根据映射区域的实际位置给<div>盒子计算出坐标和宽高。这样就可以通过<div>盒子的边框观察到映射区域了

  3. <area>标签的coords属性中的坐标值，最好通过上述所说的 「div盒子+border」 的方式去获取。先把边框移动到期望的位置，然后再根据<div>盒子的坐标去设置<area>的坐标

    （本人就因为一开始没有使用这种方式，而是使用微信屏幕截图自带的标尺去计算坐标，然而实际上，计算出的坐标与实际坐标并不相同，所以实际偏离到了图片外，于是没有出现预期的点击效果。很久都没有发现这个bug，浪费了大量时间）

  4. 注意：<area>的坐标系是基于使用它的那个<img>标签的，以<img>标签的左上角起始点(0,0)

2、map标签

用来包裹<area>标签，有一个唯一的name属性，用作被查询字段（比如用来和<img>标签的usemap属性配对），不同<map>标签的name属性不能相同。

如果要添加id属性，必须与name属性相同

3、area标签

用来在图片上定义一个特点区域，可以关联一个超链接，仅能出现在<map>标签内部

属性 值 描述
shape rect，矩形
circle，圆形
poly，多边形		 特点区域的形状
coords[1] (x1,y1,x2,y2)
(x,y,r)
(x1,y1,x2,y2,x3,y3)		 给热点区域设定具体的坐标值
href 链接URL
alt 在href属性时才需要，显示替代文本串
target _blank
_self（默认）
_parent
_top		 加载链接的方式
download 这个属性如果存在的话，表明作者想把超链接用于下载一个资源
rel 对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系
type MIME 指定链接目标的 MIME 类型
media 指明链接资源的媒体类型

[1] coords属性

  • 当shape="circle"时，该属性格式为：(x,y,r)，分别表示原点的横、纵坐标、半径
  • 当shape="rect"时，该属性格式为：(x1,y1,x2,y2)，分别表示矩形左上角、右下角的横、纵坐标
  • 当shape="poly"时，该属性格式为：(x1,y1,x2,y2,...,xn,yn)，分别表示多边形每个点的横、纵坐标

注意：只用数值，不用加单位，单位默认为px

1
2
3
4
<map name="workmap">
    <area shape="circle" coords="750,200,100" alt="梅州" href="" target="_blank">
    <area shape="rect" coords="450,120,630,210" alt="韶关" href="" target="_blank">
</map>
HTML > HTML基础
HTML基础——body部分
http://timegogo.top/2022/10/26/HTML/HTML基础——body部分/
作者
丘智聪
发布于
2022年10月26日
更新于
2023年7月16日
许可协议