HTML 学习笔记

本文根据 https://www.bilibili.com/video/BV1MvaVzUEuz 课程内容整理得到。

简介

HTML：超文本标记语言（HyperText Markup Language），用于控制浏览器网页的结构，由标签组成。

绝大多数标签都是双标签，除非特殊说明，否则以下涉及到的标签都是双标签。

MDN 文档

链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML 。

骨架结构

在 .html 文件中输入一个英文感叹号 ! 然后按回车，即可快速生成 HTML 骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

行数	作用
1	声明这是一个 HTML 文档
2,11	设置语言为英文
3,7	文档的头部部分，包含元数据和文档信息，用户屏幕不可见
4	定义字符编码为 UTF-8
5	保证文档在移动端也能正常显示
6	显示在浏览器标签页上的标题，你可以将 Document 换成自己设置的标题名字
8,10	文档的主体部分
9	网页可见内容写在这里

注释标签

<!-- 这里是注释 -->

用  包裹起来的内容会被注释掉，可以用快捷键 ctrl+/ 生成，支持多行注释。

语义标签

效果	语义化标签	纯表现标签
加粗	`<strong>`	`<b>`
倾斜	`<em>`	`<i>`
下划线	`<ins>`	`<u>`
删除线	`<del>`	`<s>`

语义化标签和纯表现标签在样式上没有任何区别，但前者会被屏幕阅读器识别（如 <strong> 标签中的内容会被着重强调），而且对搜索引擎优化（SEO）友好。

标题标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

标题总共有六级，单个页面一级标题最好只出现一次。

段落标签

<p>这是段落文本</p>

图片标签

<img src="" alt="">

属性	描述	备注
src	链接地址
alt	备选文本	地址不存在时显示的内容
width	宽度
height	高度
title	标题	鼠标悬停时显示的内容

注：

<img> 标签是单标签。

不建议设置宽度和高度参数，后续我们可以通过 css 来修改样式。

如果非要设置的话，宽度和高度设置一个即可，另一个自动等比例缩放。

src 属性必选，其余参数可选可不选。实际开发中为了用户体验，一般会加上 alt 属性。

图像格式

格式	压缩类型	透明度	动画	文件大小	兼容性	使用场景
jpg/jpeg	有损	不支持	不支持	基准	好	照片
png	无损	支持	不支持	大	好	网站 Logo
gif	无损	支持	支持	很大	好	简易动图、表情包
webp	有损 & 无损	支持	支持	很小	较差	几乎所有图片
avif	有损 & 无损	支持	支持	很小	更差	几乎所有图片

有损压缩：永久性丢弃人眼不敏感的信息，无法还原成原图。
无损压缩：每个像素颜色和原图一模一样，适合保存大面积纯色图片，否则占用空间较大。
gif 格式颜色数量极少（仅有 256 种），且单个像素透明度仅有 0 和 1 两种选择，因此只适合做简易动画。
webp 格式在现代浏览器都已支持， avif 格式代表未来趋势，现阶段更推荐使用 webp 格式保存图片。

路径格式

绝对路径：从根目录开始的地址。

比如在 Windows 系统中，文件地址一般为 C:\Users\[YourName]\... 。

你可以右键选中文件，找到 "复制文件地址" 一栏（或使用 Ctrl+Shift+C 快捷键），再粘贴出来，即可查看文件绝对路径。
相对路径：从当前工作目录开始的地址。
- 子级目录：/ 。
- 同级目录：./ 。如果以 ./ 开头，则第一个 ./ 可省略，具体参考后面的例子。
- 父级目录：../ 。
例：
- 如果你的 HTML 文件和图片在同一目录下，则相对路径为 ./[img_name].png ，也可写成 [img_name].png 。
- 如果你的 HTML 文件和 img 文件夹在同一目录下，图片全部存放在 img 文件夹下，则相对路径为 /img/[img_name].png 。
网页路径：不解释。

注：

编程语言中一般用的是正斜杠 / ，有时也会用双反斜杠 \\ ，这里第一个 \ 表示转义，第二个 \ 表示子级目录。

Windows 系统中复制的路径是单反斜杠，可以复制到文件资源管理器中并打开对应文件，但编程环境下会报错！

视频标签

常规写法

<video src="" width="" controls></video>

src 和 width 属性同图片标签，不解释。

controls 属性表示给视频添加控件（暂停、静音、全屏、倍数按钮）。它的完整写法是 controls="controls" ，但是HTML5中属性和值相同时可以将值省略，因此只写 controls 即可。

<video> 标签还有以下属性，用法和 controls 属性相同：

属性	描述
autoplay	自动播放
loop	循环播放
muted	静音
poster	封面图片

注： autoplay 属性仅在 muted 属性存在时生效。浏览器这样做是为了保证用户体验，防止突然发出的声音造成惊吓。

兼容性写法

<video width="" controls>
    <source src="[video_name].mp4" type="video/mp4">
    <source src="[video_name].ogg" type="video/ogg">
    <source src="[video_name].webm" type="video/webm">
    <p>您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p>
</video>

市面上常见的视频格式有三种：mp4 、ogg 和 webm 。现代浏览器都支持 mp4 格式，因此实际开发中后面两种可以不用管（删掉上述代码中的第 3,4 行）。

<source> 标签是单标签， src 属性指向各自的资源， type 属性不能省略！

浏览器会从上到下寻找第一个支持的格式并渲染，比如上述代码中，如果浏览器支持 mp4 格式，则渲染 mp4 视频并忽略后面所有内容；否则继续判断是否支持 ogg 格式，依次类推。如果所有格式均不支持，则渲染 <p> 标签中的内容。

但是如果不加 type 属性，浏览器会优先尝试渲染 mp4 视频，如果渲染失败才会继续尝试下一个，在低版本浏览器上会浪费大量资源（在尝试渲染上）。

音频标签

<audio src="" controls></audio>
<audio controls>
    <source src="[video_name].mp3" type="video/mp3">
    <p>您的浏览器不支持 HTML 5 Audio 标签，请升级浏览器。</p>
</audio>

音频文件有 mp3 、wav 和 ogg 格式。

音频标签可以添加 autoplay 属性，但浏览器不支持自动播放，后续可以通过 JavaScript 强制实现自动播放。其余属性和视频标签完全相同。

超链接标签

<!-- 内部链接,即同一网站下的不同网页 -->
<a href="[相对路径]">[显示文字]</a>
<!-- 外部链接 -->
<a href="[网页路径]">[显示文字]</a>
<!-- 空链接,点击后不跳转 -->
<a href="#">[显示文字]</a>
<!-- 下载链接,以 .zip 或 .exe 结尾 -->
<a href="./download.zip">[显示文字]</a>
<!-- 邮件链接 -->
<a href="mailto:[邮箱地址]">[显示文字]</a>

属性	描述
title	鼠标悬停时的文字
target	_self 表示当前窗口打开（默认） _blank 表示新窗口打开

如果我们需要在页内跳转（实现目录导航功能），就要用到锚点链接。

Step 1：定义锚点目标。

给要跳转到的标签添加 id 属性，注意同一页面中 id 属性具有唯一性，即不同标签的 id 属性不能相同。
```
<h2 id="1">这是二级标题</h2>
```
Step 2：创建跳转链接。

用 # 加上跳转到的 id 属性，即为锚点链接。
```
<a href="#1">跳转到第一部分</a>
```

结构标签

标签	描述
`<header>`	页眉
`<main>`	网页内容
`<nav>`	导航栏
`<article>`	文章
`<section>`	分块
`<aside>`	侧边栏
`<footer>`	页脚

块级、行内标签

<div>这是块级标签</div>
<span>这是行内标签</span>

块级标签默认独占一行，前后自动换行。

行内元素从左往右铺满后才会换行。

<div> 和 <span> 标签是最基础（无语义）的块级和行内标签。

列表标签

无序列表

<ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
</ul>

有序列表

<ol>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
</ol>

描述列表

<dl>
    <dt>被描述的内容</dt>
    <dd>选项1</dd>
    <dd>选项2</dd>
    <dd>选项3</dd>
</dl>

表格标签

<table>
    <tr>
        <td>(1,1)</td>
        <td>(1,2)</td>
        <td>(1,3)</td>
    </tr>
    <tr>
        <td>(2,1)</td>
        <td>(2,2)</td>
        <td>(2,3)</td>
    </tr>
    <tr>
        <td>(3,1)</td>
        <td>(3,2)</td>
        <td>(3,3)</td>
    </tr>
</table>

标签	描述
`<table>`	表格容器标签
`<tr>`	行标签
`<th>`	表头标签（默认居中加粗效果）
`<td>`	单元格标签

结构划分

用 <thead>,<tbody>,<tfoot> 包裹表格的头部、主体和底部，可以增强表格语义。

单元格合并

colspan ：水平合并，保留左边，删除右边。
rowspan ：垂直合并，保留上边，删除下边。

<table border="1px">
    <tr>
        <td colspan="2">1,2</td>
        <td>3</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">4,5,7,8</td>
        <td rowspan="2">6,9</td>
    </tr>
</table>

表单标签

表单容器

<form action="url" method="get|post">
    <!-- 这里放表单控件 -->
</form>

<form> 标签定义了一个表单容器。

action 属性的值为用户输入信息发送到的地方，记得将上述代码中的 url 替换为服务器的地址。

method 属性的值常用的只有 get 和 post 两种：

get 方法会将表单数据以明文形式显示在 URL 中。
post 方法会将表单整体打包发给服务器。

例：

<form action="url" method="get|post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="提交">
</form>

如果采用 get 方法，会跳转到 http://url?username=&password= 。
如果采用 post 方法，会跳转到 http://url 。

表单控件

最常用的是 <input> 标签，这是一个单标签。

<input type="">

type 属性表示提交的数据类型，常用的有以下几种：

type 属性的值	数据类型
text	单行文本，明文显示
password	单行文本，会被遮盖
button	按钮
radio	单选框
checkbox	复选框
file	文件
submit	提交表单

除 type 属性外， <input> 标签还有很多有用的属性，可以按需添加：

属性	描述
placeholder	输入框为空时显示的内容
value	默认输入的内容
name	标识符
id	标识符，具有唯一性
required	要求该控件非空
maxlength	用户输入的最大长度
autocomplete	是否记录历史记录并自动填充

如果输入框为空，则 placeholder 属性的值会以灰色显示出来（不会被提交出去），提示用户此控件应该输入什么内容。

用户输入内容后，表单控件会显示用户输入的内容（从而将 placeholder 的值覆盖掉）。

讲解表单容器时的登录系统就是实际开发场景的一个典型例子。
value 属性的值在打开网页时就会显示在控件中（如果用户点击 "提交" 按钮就会被提交出去）。

可以看到 value 属性和 placeholder 属性八字不合，实际开发场景中保留一个即可。
autocomplete 属性的值有 on 和 off 两种，一般用户名控件会选择 on ，密码控件会选择 off ，以保证安全性。

单复选框

给一组 type="radio" 的表单控件添加相同 name 属性，即可实现单选。

可以通过 value 属性记录选择该控件后传给服务器的值， checked="checked" （也可以简写为 checked）表示默认选中该控件。

例：

<form action="url" method="get">
    性别:
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="0">女
    <input type="submit" value="提交">
</form>

<form action="url" method="get">
    是否同意上述用户协议？
    <input type="radio" name="agree" value="yes" checked>同意
    <input type="radio" name="agree" value="no">不同意
    <input type="submit" value="提交">
</form>

复选框除了将 type 属性的值改为 checkbox 以外，其余和单选框全部相同。

上传文件

将 type 属性的值设为 file ， multiple 属性可以允许一次上传多个文件， accept 属性可以指定文件类型，用英文逗号分隔。

例：

<form action="url" method="get">
    上传附件：
    <input type="file" name="accessories" multiple accept=".jpg,.png,.gif">
</form>

文本域

如何输入多行文本？那就需要用到一个新标签—— <textarea> 标签。

常见属性	描述
name	不解释
placeholder	不解释
rows	最大显示行数，超出后出现上下滚动条，默认为 2
cols	（滚动条存在时）单行显示字符数量，默认为 20

例：

<form action="url" method="get">
    <textarea name="comment" cols="30" rows="10" placeholder="请输入你的评论"></textarea>
    <input type="submit" value="提交">
</form>

下拉表单

用 <select> 标签定义菜单， <option> 标签定义每个选项。

<form action="url" method="get">
    <select name="" id="">
        <option value="北京" selected>北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
</form>

button 按钮

<form action="www.baidu.com" method="get">
    <input type="text" name="wd" placeholder="请输入搜索关键词...">
    <button type="submit">百度搜索</button>
</form>

除此之外， button 按钮可以通过 disabled 属性禁用掉：

<form action="url" method="get|post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <button type="submit" disabled>登录</button>
    <!-- 后续通过 Javascript 实现用户名和密码输入框均非空时才取消禁用 -->
</form>

辅助标签

由于单选和复选框一般都比较小，可以用辅助标签 <label> 扩大选中区域。

<label> 标签有两种语法：

for + id 关联。

这是在讲解单选框时的代码切片：
```
<form action="url" method="get">
    <input type="radio" name="sex" value="1">男
</form>
```
如果想要实现点击 "男" 同样可以选中该选项，给单选控件添加 id 属性，再用 <label> 标签将 "男" 包裹起来，并通过 for 属性指向该 id 名称。
```
<form action="url" method="get">
    <input type="radio" name="sex" value="1" id="nan">
    <label for="nan">男</label>
</form>
```

整体用 <label> 标签包裹。

<form action="url" method="get">
    <label><input type="radio" name="sex" value="1">男</label>
</form>

posted on 2025-09-11 20:56 peiwenjun 阅读(1) 评论(0) 收藏举报

刷新页面返回顶部