HTML标签记录 - 前端 - 其他 - windows

不保证内容 100% 准确无误！！！如有错误欢迎留言

# HTML 骨架

HTML 的基本骨架是网页模板

HTML骨架

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

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

使用  来注释内容

VSCode 中快速生成 HTML 基本骨架：

在 HTML (.html) 文件中，使用英文！配合 Enter/Tab 键

# 标题标签

标题标签

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

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

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

# 段落标签

p标签

1
2
3

<p>
    我是正文
</p>

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

# 换行

br标签

<br>

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

# 水平线

hr标签

<hr>

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

# 文本格式化标签

b标签

<b>
    加粗文字
</b>

<strong>
    加粗文字
</strong>

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

i标签

<i>
    斜体文字
</i>

<em>
    斜体文字
</em>

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

u标签

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

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

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

s标签

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

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

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

# 图像

img标签

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

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

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

# 路径

# 相对路径

当前文件夹：./

上一级文件夹内：…/

# 绝对路径

以 **/** 开头的为绝对路径

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

# 超链接

a标签

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

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

# 音频

audio标签

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

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

# 视频

video标签

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

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

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

# 列表

# 无序列表

ul标签

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

ul 无序列表
li 列表项目

ul 标签内只能包含 li 标签，而 li 标签内可以包含大部分内容

# 有序列表

ol标签

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

ol 无序列表
li 列表项目

ol 标签内只能包含 li 标签，而 li 标签内可以包含大部分内容

# 定义列表

dl/dt/dd标签

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

dl 列表的标题
dd 列表描述 / 详情。默认自动向后缩进

dl 标签内只能包含 dt 和 dd 标签，而 dt 和 dd 标签内可以包含大部分内容

# 表格

tabel/tr/th/td标签

<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>

不能跨结构标签合并

# 表单

from标签

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

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

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

# 表单标签 - input

input标签

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

desc 属性值。有 **text (文本框，用于输入单行文本) 和 password (密码框)** 两种可选
msg 给用户的提示信息

<input> 标签为单标签，且不会独占一行

# 单选框 - radio

radio属性

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

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

# 多选框 - checkbox

checkbox属性

1	<input type = "checkbox" checked>

# 上传文件 - file

file属性

1	<input type = "file" multiple>

multiple (可选) 多选文件

# 下拉菜单

select标签

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

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

# 文本域

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

textarea标签

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

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

# label

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

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

# 写法 1

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

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

label标签

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

# 写法 2

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