【HTML】一些标签

在这里记录几种html标签，方便记忆与以后查找。
随着学习以后可能会有补充。

#html骨架

一个html文档的标准格式如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>...</title>
</head>
<body>
    ...
</body>
</html>
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 是 HTML 页面的根元素
  • <head> 包含了文档的元数据，如 <meta charset=”utf-8”> 定义网页编码格式为 utf-8（大部分浏览器中直接输出中文会变乱码，所以要在头部将字符声明为UTF-8）
  • <title> 描述了文档的标题
  • <body> 包含了可见的页面内容

#html标签

段落与文字标签

标题 (Heading)

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落 (Paragraph)

1
2
<p>一段</p>
<p>又一段</p>

换行 (Bater rabbet)

1
一段文字<br>换到下一行

水平线 (Horizontal Rule)

1
2
3
<h1>标题<h2>
<hr>
<p>文章内容

文本格式化标签

粗体 (strong)

1
<strong>加粗字体</strong>

斜体 (emphasized)

1
<em>斜体</em>

下划线 (insert)

1
<ins>加粗字体</ins>

删除线 (delete)

1
<del>加粗字体</del>

上标 (superscripted)

1
<sup>上标内容</sup>

下标 (subscripted)

1
<sub>下标内容</sub>

居中 (center)

1
<center>居中文字</center>

多媒体标签——图片、音频、视频标签

图片

使用标签 <img> 来插入图片， src 后填写图片路径， alt 后填写图片未加载时要显示的替换文本

1
<img src="图片路径" alt="图片未加载时显示的替换文本">

img中的属性：

  • title ：鼠标悬停在图片上时显示文本
  • width ：设定图片的像素宽度
  • height ：设定图片的像素高度
    （宽度高度只设置其一另一项会等比例缩放）

音频

1
<audio src="音频路径"></audio>

属性：

  • control ：现实播放的控件
  • autoplay ：自动播放（仅部分浏览器支持）
  • loop ：循环播放

视频

1
<video src="视频路径"></video>

属性

  • control ：现实播放的控件
  • autoplay ：自动播放（仅部分浏览器支持）
  • loop ：循环播放
  • muted ： 视频默认静音
  • weight ：播放器的像素宽度
  • height ：播放器的像素高度
  • poster ：设定播放器封面，后面填写封面图片的URL

超链接标签

1
<a href="跳转地址" target="_blank/_self">链接处显示的文本</a>
  • _black ：创建一个新窗口跳转
  • _self ：在当前窗口跳转

列表标签

无序列表

<ul> 标签表示列表的整体，包裹整个列表
<li> 代表列表的每一项，可无限添加

1
2
3
4
5
<ul>
    <li>小明</li>
    <li>小王</li>
    <li>小美</li>
</ul>

有序列表

<ol> 为表示整体的标签
会在每一项前添加编号

1
2
3
4
5
<ol>
    <li>小明</li>
    <li>小王</li>
    <li>小美</li>
</ol>

自定义列表

<dl> 标签表示列表的整体，包裹整个列表
<dt> 表示列表标题
<dd> 表示列表每一项。 

1
2
3
4
5
6
<dl>
    <dt>学生名单</dt>
    <dd>小明</dd>
    <dd>小王</dd>
    <dd>小美</dd>
</dl>

表格标签

标准表格

<table> 表格整体，包裹表格整体
<tr> 表格每行
<td> <tr>包裹的该行的单元格

1
2
3
4
5
6
7
8
9
10
11
<table>
    <tr>
        <td>小明</td> <td>70</td> <td>C</td>
    </tr>
    <tr>
        <td>小王</td> <td>100</td> <td>A</td>
    </tr>
    <tr>
        <td>小美</td> <td>80</td> <td>B</td>
    </tr>
</table>

属性：

  • border ：表格边框的宽度，不填写默认无边框
  • width ：表格宽度
  • height ：表格高度

合并单元格：

  • rowspan ：跨行（垂直）合并，只保留最上的，合并其他，属性值代表合并格数
  • clospan ：跨列（水平）合并，方式同理
    合并单元格只能在同一 结构（见下） 中进行，不同结构间不能合并
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <table>
        <tr>
            <td>小明</td> <td rowspan="3">70</td> <td>C</td>
        </tr>
        <tr>
            <td>小王</td> <td>100</td> <td>A</td>
        </tr>
        <tr>
            <td>小美</td> <td>80</td> <td>B</td>
        </tr>
    </table>

表格标题标签和表头标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
    <caption>成绩单</caption>
    <tr>
        <th>姓名</th> <th>成绩</th> <th>评分</th>
    </tr>
    <tr>
        <td>小明</td> <td>70</td> <td>C</td>
    </tr>
    <tr>
        <td>小王</td> <td>100</td> <td>A</td>
    </tr>
    <tr>
        <td>小美</td> <td>80</td> <td>B</td>
    </tr>
</table>
  • <caption> 表格的大标题，写在<table>包裹内，表格所有内容上方，默认在表格顶部居中显示
  • <th> 表头单元格

表格结构标签

结构标签可以标记表格的各个部分，使用时由标签包裹对应的内容。
表格的结构通常由三个部分组成：

  • <thead> ：表格头部
  • <tbody> ：表格主体
  • <tfoot> ：表格结尾
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <table>
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th> <th>成绩</th> <th>评分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td> <td>70</td> <td>C</td>
            </tr>
            <tr>
                <td>小王</td> <td>100</td> <td>A</td>
            </tr>
            <tr>
                <td>小美</td> <td>80</td> <td>B</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均分</td> <td>83</td> <td>B</td>
            </tr>   
        </tfoot>
    </table>

表单

input 标签

1
<input type="...">

<input> 标签通过 type 属性的取值不同具有以下功能：

  • text ：文本框，用于输入单行文本
  • password ：密码框，填入的文本显示星号
    1
    2
    文本框：<input type="text" placeholder="请输入文本">
    密码框： <input type="password" placeholder="请输入密码">
    • placeholder ：文本占位符，提示用户输入内容
  • radio ：单选框，用于多选一
  • checkbox ：多选框，用于多选多
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    性别：男<input type="radio" name="gender"> 
        女<input type="radio" name="gender">
    城市：北京<input type="radio" name="city"> 
        上海<input type="radio" name="city"> 
        广州<input type="radio" name="city">

    爱好：唱<input type="checkbox" name="hobby" checked> 
        跳<input type="checkbox" name="hobby"> 
        rap <input type="checkbox" name="hobby">
        篮球<input type="checkbox" name="hobby">
    • name ：选项所属的组名，单选框组成的小组在成员中选择其一
    • checked ：默认选项
  • file ：打开文件目录选择文件
    1
    <input type="file" multiple>
    • multipie ：选择多个文件提交，不写时默认选择单个
  • submit ：提交按钮
  • reset ：重置按钮，重置填写的内容
  • button ：普通按钮，默认无功能，用于配合js添加功能
    1
    2
    3
    4
    文本框：<input type="text" placeholder="请输入文本">
    密码框： <input type="password" placeholder="请输入密码">
    <input type="submit">
    <input type="reset">
    要实现以上按钮功能需配合 <from> 标签使用

select 下拉菜单标签

<select> 包裹整体，<option> 代表每一选项

1
2
3
4
5
6
7
选择城市：
<select>
    <option >北京</option>
    <option selected>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>
  • selected ：默认选项

textarea 文本域标签

提供一个可输入多行文本的表单控件

1
<textarea cols="30" rows="10"></textarea>
  • cols ：文本域内可见宽度
  • rows ：文本域内可见行数

label 标签

用于绑定网页内容与表单选项的关系，例如点击文本可直接选定对应绑定的选项
两种使用方法：

  • 为表单选项填写一个 id 属性，使用 <lable> 标签包裹绑定文本，并在for属性后填写相同的 id 属性
    1
    2
    3
    4
    5
    选择地区：
    北方人<input type="radio" name="city" id="bj">
    南方人<input type="radio" name="city" id="gd">
    <label for="bj">我是北京人</label>
    <label for="gd">我是广东人</label>
  • 直接使用<lable> 标签包裹要绑定的文本和表单选项
    1
    2
    3
    性别：
    <label>男<input type="radio" name="gender"></label>
    <label>女<input type="radio" name="gender"></label>

#学习笔记 #前端 #HTML
【HTML】一些标签
http://example.com/2023/05/11/html标签/
作者
oyxb_HT
发布于
2023年5月11日
更新于
2023年6月10日
许可协议