记录html常见的标签和注意事项

标签集

HTML 基础 | 菜鸟教程

布局标签

粗体(<b>[bold])or斜体(<i>[italic])

通常标签<strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。 然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

空元素(br)

没有内容的元素，用于换行

1
2
3
<br></br>
or
<br />

div布局(div)

和css一起使用，可用于对大的内容块设置样式属性

用于文档布局，取代了使用表格定义布局的老式方法

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
<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>div布局实例</title> 
</head>

<body>
    <!-- 创建一个id为container的div容器，宽度为500px -->
    <div id="container" style="width:500px">
        <!-- 创建三个div，分别为header、menu、content、footer -->
        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">主要的网页标题</h1>
        </div>
        <!-- 创建一个id为menu的div，宽度为100px，高度为200px，背景颜色为#FFD700，并设置float为left -->
        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>
        <!-- 创建一个id为content的div，宽度为400px，高度为200px，背景颜色为#EEEEEE，并设置float为left -->
        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
            内容在这里</div>

        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            aaabbb</div>

    </div>

</body>

</html>

image-20241102194428701

table表格标签(table)

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（**<th>**）用于定义列的标题。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table布局实例</title>
</head>

<body>

    <table width="500" border="0">
        <tr>
            <!-- 在HTML中，colspan 是一个属性，主要用于 <td>（表格单元格）和 <th>（表格标题单元格）标签。它的作用是指定单元格跨越的列数。 -->
            <td colspan="2" style="background-color:#FFA500;">
                <h1>主要的网页标题</h1>
            </td>
        </tr>

        <tr>
            <td style="background-color:#FFD700;width:100px;">
                <b>菜单</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color:#eeeeee;height:200px;width:400px;">
                内容在这里</td>
        </tr>

        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align:center;">
                aaaaaaaa</td>
        </tr>
    </table>

</body>

</html>

image-20241102195251042

标题

网页标题(title)

常用于head元素中

1
<title>网页标题</title>

段落标题(h)

常用于body结构体中，表示段落标题

1
2
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>

水平线(hr)

HTML 标题 | 菜鸟教程

hr tag is used to separate the heading and the content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

<head>
    <title>Heading Level 2</title>
</head>

<body>
    <!-- hr tag is used to separate the heading and the content -->
    <hr>
    <h2>This is a heading level 2</h2>
    <hr>
    <p>This is a paragraph.</p>
</body>

</html>

image-20241102172152683

春晓

春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。

注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

链接

网页链接(a)

表征一个链接，链接到特定网页

1
<a href="https://www.baidu.com">百度一下<\a>
  • 常用属性
    href：href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。值为一个网页链接

表示html文档加载依赖的素材资源，浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。

1
<link href="reset.css" rel=”stylesheet“/>

物理元素

图像(img)

引用某张图片

1
<img src="/images/logo.png" width="258" height="39" />
  • 常用属性
    src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

脚本

script

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

HTML<noscript> 标签

1
2
3
4
5
6
7
8
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>