HTML标签大汇合！

HTML 骨架

HTML 的基本骨架是网页模板

1
2
3
4
5
6
7
8
9


<html>
    <head>
        <title>网页标题</title>
    </head>
    
    <body>
        网页主体
    </body>
</html>

html 整个网页
head 网页头部，用于存放给浏览器看的代码，例如 CSS
body 网页主体，用于存放给用户看的代码。比如图片，文字等信息
title 网站的标题，显示在标签页
使用  来注释内容

VSCode 中快速生成 HTML 基本骨架：
在 HTML (.html) 文件中，使用英文!配合 Enter/Tab 键

标题标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<h1>
    大标题
</h1>
<h2>
    
</h2>
...
<h6>
    
</h6>

<h1> ~ <h6> 标题标签，大小从 h1 -> h6 最小。均为独占一行

一般 <h1> 标签在一个网页中只使用一次，用来存放新闻标题或网页 logo

段落标签

1
2
3


<p>
    我是正文
</p>

独占一行，且段落之间存在间隙

换行

1

<br>

<br> 换行标签，单标签。要使用 br 标签来进行换行，浏览器不识别代码中的 Enter 换行符

水平线

1

<hr>

<hr> 水平线标签，单标签。可以将两部分内容隔开一条线

文本格式化标签

1
2
3
4
5
6
7


<b>
    加粗文字
</b>

<strong>
    加粗文字
</strong>

<b>…</b > 或 <strong>…</strong> 加粗

1
2
3
4
5
6
7


<i>
    斜体文字
</i>

<em>
    斜体文字
</em>

<i>…</i> 或 <em>…<em> 斜体

1
2
3
4
5
6
7


<u>
    下划线文字
</u>

<ins>
    下划线文字
</ins>

<u>…</u> 或 <ins>…</ins> 下划线

1
2
3
4
5
6
7


<s>
    删除线标签
</s>

<del>
    删除线标签
</del>

<s>…</s> 或 <del>…</del> 删除线

图像

1

<img src = "path" alt = "msg" title = "tips" width = "width" height = "height">

图像标签为单标签，不换行

src (必须) 要显示的图像路径
alt 为图片无法显示时在界面上所显示的文字
title 为鼠标悬停在图片上时所显示的文字
width 图片宽度，值为数字，不需要写单位 (单位应该是 px)
height 图片高度，值为数字，不需要写单位 (单位应该是 px)

路径

相对路径

当前文件夹：./

上一级文件夹内：…/

绝对路径

以 / 开头的为绝对路径

Windows 系统中，默认是 \ 其他系统为 / 建议统一使用 /

超链接

1

<a href = "link" target = "_blank">提示文字</a>

link (必须) 跳转到的目标地址，可以是网址，也可以是一个文件 (若内容为 #即为空链接)
target = “_blank” 在新标签页中打开

音频

1

<audio src = "link" controls loop autoplay></audio>

src (必须) 音频的 URL。支持 mp3 ogg wav
controls (可选) 显示音频控制面板
loop (可选) 循环播放
autoplay (可选) 自动播放 (为了用户体验，一般浏览器会禁用自动播放功能)

视频

1

<video src = "link" controls loop muted autoplay></video>

src (必须) 视频的 URL。支持 mp4 webm ogg
controls (可选) 显示视频控制面板
loop (可选) 循环播放
muted (可选) 静音播放
autoplay (可选) 自动播放 (仅支持在静音状态下自动播放)

~~毕竟你也不想别人一打开你的网页就被声音吓到吧~~

列表

无序列表

1
2
3
4
5


<ul>
    <li>第一项</li>
    <li>第二项</li>
    ...
</ul>

<ul> 无序列表
<li> 列表项目
<ul> 标签内只能包含 <li> 标签，而 <li> 标签内可以包含大部分内容

有序列表

1
2
3
4
5


<ol>
    <li>第一项</li>
    <li>第二项</li>
    ...
</ol>

<ol> 无序列表
<li> 列表项目
<ol> 标签内只能包含 <li> 标签，而 <li>标签内可以包含大部分内容

定义列表

1
2
3
4
5
6


<dl> 
    <dt>列表标题</dt>
    <dd>列表描述/详情</dd>
    <dd>列表描述/详情</dd>
        ...
</dl>

<dl> 列表的标题
<dd> 列表描述 / 详情。默认自动向后缩进
<dl> 标签内只能包含 dt 和 dd 标签，而 dt 和 dd 标签内可以包含大部分内容

表格

1
2
3
4
5
6


<table border = "count">
    <tr>
        <th>表头</th>
           <td>内容</td>
    </tr>
</table>

border 为表格添加边框线，默认无边框
count 边框线粗细数值
table 表格标签
tr 每一行
th 表头单元格 (默认字体加粗)
td 内容单元格

合并单元格 - 跨行合并

有时，需要将多个单元格合并成一个单元格

首先，要保留最靠左边并且最靠上边的单元格，再添加属性（取值是数字，表示需要合并的单元格数量）

保留最上单元格，添加属性 rowspan

1

<td rowspan = "2" > 我是内容咩 </td>

合并单元格 - 跨列合并

保留最左单元格，添加属性 colspan

1

<td colspan = "2" > 我是内容咩 </td>

不能跨结构标签合并

表单

1

<form action = "发送数据的地址">表单标签代码</form>

一般会将所有表单标签包括在 form 中，这样后端就可以接收到信息

手机用户信息使用表单标签。比如登录、注册、搜索等

表单标签 - input

1

<input type = "desc" placeholder = "msg">

desc 属性值。有 text (文本框，用于输入单行文本) 和 password (密码框) 两种可选
msg 给用户的提示信息
<input> 标签为单标签，且不会独占一行

单选框 - radio

1

<input type = "radio" name = "控件分组" checked>

name 控件名称，可以为控件分组 (同组只能选中一个)
checked (可选) 默认勾选

多选框 - checkbox

1

<input type = "checkbox" checked>

上传文件 - file

1

<input type = "file" multiple>

multiple (可选) 多选文件

下拉菜单

1
2
3
4
5


<select>
    <option>选项1</option>
    <option selected>选项2</option>
    ...
</select>

select 下拉菜单整体
option 下拉菜单中的每一项
selected 默认选中 (若不写该属性默认选中选项 1)

文本域

实现多行文本输入的表单控件

1

<textarea>默认提示文字</textarea>

默认对该输入框右下角有拖拽功能

label

给表单标签前面添加说明文本

支持 <label> 标签增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域

写法 1

<label> 标签只包裹内容，不包裹表单控件

设置 <label> 标签的 for 属性值和表单控件的 id 属性值相同

1
2


<input type = "radio" id = "abc">
<label for = "abc">msg</label>

写法 2

使用 <label> 标签直接包裹文字和表单控件，不需要属性

1

<label><input type = "radio">msg</label>

按钮

1
2
3


<button type = "desc">
    按钮显示名称
</button>

desc 为属性值，有以下三种情况

submit (默认) 提交按钮，点击后将数据提交到后台
reset 重置按钮，将表单恢复默认值
button 普通按钮，默认无功能。通常配合 JS 使用

无语义布局

1
2
3


<div>
    <span>我是span</span>
</div>

布局网页，划分网页区域以摆放内容

<div> 俗称 “大盒子”，独占一行
<span> 俗称 “小盒子”，不会换行

字符实体

在网页中显示预留字符。如果要显示多个空格或者 < , > 等符号就需要字符实体

&nbsp 空格
&lt 小于号
&gt 大于号