HTML

作者:青见春山

发表于:2026-07-27

字数统计:2804 字

预计阅读10分钟

网页基础知识、最常用的标签、表单、HTML5新特性等。

1. 网页

html格式文件，包括图片，声音等元素。

html标签描述元素，浏览器解析标签；元素构成网页，网页组成网站。

HTML，超文本标记语言，一套标记标签。

超文本：超越文本限制，超级链接文本（文件跳转）。

web标准（最佳：s，c，j 相分离）

由W3C制定
structure（HTML），presentation(CSS)，behavior(Javascript)

2. HTML基本知识

2.1 基本语法

标签是由<>包围的关键词
双标签：成对出现<html></html>；单标签：<br/>
标签关系：包含（<head>和<title>，并列<head>和<body>）

2.2 基本结构（骨架）标签

html

<html>
  （根标签）
  <head>
    <title>第一个页面</title>
    （文档标题）
  </head>
  <body>
    （主体）
  </body>
</html>

title必须要设置

2.3 网页开发工具

VSCode：生成页面骨架结构！+Tab
自动生成三个必需代码

3. 路径

将文件夹直接拉入vscode可打开编辑在vscode里新建文件会自动保存到目录文件夹里

3.1 相对路径

图片相对于HTML页面的位置

3.2 绝对路径

（不常用）

从盘开始，如"D:\web\img\logo.gif"（注意反斜杠的方向）
完整网络地址，"http://www.itcast.cn/images/logo.gif"

4. 注释

html

<!-- 注释语句 -->

快捷键：ctrl+/（取消注释也是这个）

特殊字符:

空格： 

小于：<（less than）

大于：>（greater than）

5. HTML常用标签

标签语义：标签的作用，使结构清晰

5.1 标题标签

<h1></h1>，1-6逐级递减，文字加粗，独占一行

5.2 段落标签

<p></p>，将文档分成段落，文本会根据浏览器窗口自动换行

每段都要用p标签分段

5.3 换行标签

<br />（/前记得打空格！）

5.4 文本格式化标签

加粗：<strong></strong>
倾斜：<em></em>
删除线：<del></del>
下划线：<ins></ins>

<div>(division):大盒子，一行一个

<span>：小盒子，一行多个

5.5 图像标签

html

<img src="图像URL（文件名）" />

src用于指定图像文件的路径和文件名，是必须的
图片和网页文件要放在一个文件夹

图像标签要写到body里面

属性写在标签名后面，多个以空格隔开
属性用键值对格式，key="value"，属性="属性值"
src是必须出现的
alt 替换文本，图像显示不出来时有用
title 提示文本，鼠标放到图像上就显示

5.6 超链接标签（重点）

从一个页面链接到另一个页面

html

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

a即（anchor）
href是必须的
窗口弹出方式：_self取而代之，_blank另起炉灶

5.7 表格标签

显示，展示数据

html

<table>
  （定义表格）
  <tr>
    （行）
    <th>姓名</th>
    （表头，文本加粗居中）
    <td>单元格里的文字</td>
    （单元格）（table data，可以放任何元素）
  </tr>
</table>

(行嵌套于表格，单元格嵌套于行) 属性设置不常用，一般用CSS

5.7.1 表格结构标签

html

<thead>
  ……
</thead>
头部
<!-- 内部必须有tr -->
<tbody>
  ……
</tbody>
主体

5.7.2 合并单元格

跨行合并 rowspan="合并单元格的个数" 找准目标单元格，写到第一个 <td> 里面
html
```
<td rowspan="2"></td>
```
跨列合并 colspan="合并单元格的个数"
最后删除多余的单元格

5.8 列表标签

用来布局

5.8.1 无序列表（重点）

html

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

(列表项并列，ul里只能写li，用css设置样式)

去掉li前面的项目符号(小圆点)

css

list-style: none;

5.8.2 有序列表

html

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

(列表项按序排列，ol里只能写li，用css设置样式)

5.8.3 自定义列表

解释描述说明一些术语或专有名词

html

<dl>
  <dt>名词1</dt>
  <dd>名词解释1</dd>
  <dd>名词解释2</dd>
</dl>

dl里只能有dt和dd

5.9 表单标签

收集用户信息

由表单域、表单控件（表单元素）、提示信息构成

5.9.1 表单控件

可输入内容的小方块小按钮

5.9.2 表单域

html

<form action="url地址" method="提交方式" name="表单域名称">
  <!-- 各种表单元素控件 -->
</form>

action：信息送去的目的地
这里与后台合作

5.9.3 input标签

input输入，用于收集用户的信息

html

<input type="属性值" />

name 表示单元素名字，用来区分不同的表单，单选按钮radio和复选框checkbox要有相同的 name 值
checked 主要针对于单选按钮和复选框，表现为一打开页面光标即默认定位一个表单元素

设置value值，可以实现打开页面即默认显示几个文字

5.9.4 label标签

绑定一个表单元素，当点击其label中的文本，光标会自动转到对应表单元素

html

<label for="sex">男</label> <input type="radio" name="sex" id="sex" />

for 属性要与相关元素的 id 属性相同

5.9.5 select标签

定义下拉列表（有多个选项让用户选择，需要节约页面空间）

html

<select>
  <option>选项1</option>
  （至少一对）
  <option>选项2</option>
  <option>选项3</option>
</select>

在 <option> 写 selected="selected" 当前项即为默认选中项

5.9.6 textarea标签

用户输入文本内容过多，定义多行文本

html

<textarea row="3" cols="20">
    文本内容
</textarea>

写到 form 里面

5.10 input标签常用属性

<input> 标签有一些常用的属性，包括 maxlength 和 autocomplete。

maxlength 属性：规定 <input> 元素中允许的最大字符数。例如，如果您希望用户在输入框中最多只能输入 20 个字符，可以将 maxlength 属性设置为 20。

html

<input type="text" maxlength="20" />

autocomplete 属性：指示浏览器是否应该启用表单自动完成功能。这是一个布尔值属性，可以设置为 "on" 或 "off"。如果设置为 "on"，浏览器会根据用户的输入历史和预设值来提供自动完成建议。如果设置为 "off"，则禁用自动完成功能。

html

<input type="text" autocomplete="off" />

这两个属性都可以帮助您控制用户在输入框中的输入行为。maxlength 属性可以限制用户输入的字符数，而 autocomplete 属性可以管理浏览器是否提供自动完成建议。

5.11 button元素

在HTML中，<button> 元素不一定要放在 <form> 标签内部才能提交表单。<button> 元素可以通过几种方式与表单关联：

放在 <form> 标签内：当 <button> 元素位于 <form> 标签内时，点击该按钮会触发表单的提交事件。
html
```
<form action="/submit-endpoint" method="post">
  ...
  <button type="submit">提交</button>
</form>
```

使用 form 属性：<button> 元素可以使用 form 属性来指定它所属的表单，即使它不在 <form> 标签内部。

html

<form id="myForm" action="/submit-endpoint" method="post">...</form>
<button type="submit" form="myForm">提交</button>

JavaScript 事件处理器：你可以给 <button> 元素添加一个点击事件监听器，并在事件处理器中手动触发表单提交。

html

<form id="myForm" action="/submit-endpoint" method="post">...</form>
<button id="submitButton" type="button">提交</button>

<script>
  document.getElementById("submitButton").addEventListener("click", function () {
    document.getElementById("myForm").submit();
  });
</script>

6. HTML5新特性

6.1 语义化标签（★★）

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

html

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签：

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签

6.2 多媒体标签

多媒体标签分为 音频 audio 和 视频 video 两个标签。使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

因为多媒体标签的属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。

6.2.1 视频标签- video（★★★）

基本使用

当前 <video> 元素支持三种视频格式：尽量使用 mp4格式

使用语法：

html

<video src="media/mi.mp4"></video>

属性很多，有一些属性需要大家重点掌握：

autoplay 自动播放
- 注意：在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted 属性
width 宽度
height 高度
loop 循环播放
src 播放源
muted 静音播放

示例代码：

html

<video
  src="media/mi.mp4"
  autoplay="autoplay"
  muted="muted"
  loop="loop"
  poster="media/mi9.jpg"
></video>

6.2.2 音频标签- audio

基本使用

当前 <audio> 元素支持三种视频格式：尽量使用 mp3格式

使用语法：

html

<audio src="media/music.mp3"></audio>

html

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

6.2.3 新增的表单元素（★★）

常见输入类型

html

text password radio checkbox button file hidden submit reset image

新的输入类型

email
url
date
time
month
week
number
tel
search
color
range
datetime-local

类型很多，我们现阶段重点记忆三个：number tel search

6.2.4 新增的表单属性

属性	说明
`placeholder`	占位符
`autofocus`	自动获取焦点
`multiple`	多选文件上传
`autocomplete`	自动完成（基于历史输入）
`required`	必填项
`accesskey`	指定快捷键激活元素

这些新增的表单属性在现代Web开发中非常实用，能够大幅提升用户体验。

Hot100

codeTop

HTML ​

1. 网页 ​

2. HTML基本知识 ​

2.1 基本语法 ​

2.2 基本结构（骨架）标签 ​

2.3 网页开发工具 ​

3. 路径 ​

3.1 相对路径 ​

3.2 绝对路径 ​

4. 注释 ​

5. HTML常用标签 ​

5.1 标题标签 ​

5.2 段落标签 ​

5.3 换行标签 ​

5.4 文本格式化标签 ​

5.5 图像标签 ​

5.6 超链接标签（重点） ​

5.7 表格标签 ​

5.7.1 表格结构标签 ​

5.7.2 合并单元格 ​

5.8 列表标签 ​

5.8.1 无序列表（重点） ​

5.8.2 有序列表 ​

5.8.3 自定义列表 ​

5.9 表单标签 ​

5.9.1 表单控件 ​

5.9.2 表单域 ​

5.9.3 input标签 ​

5.9.4 label标签 ​

5.9.5 select标签 ​

5.9.6 textarea标签 ​

5.10 input标签常用属性 ​

5.11 button元素 ​

6. HTML5新特性 ​

6.1 语义化标签（★★） ​

6.2 多媒体标签 ​

6.2.1 视频标签- video（★★★） ​

6.2.2 音频标签- audio ​

6.2.3 新增的表单元素（★★） ​

6.2.4 新增的表单属性 ​

HTML

1. 网页

2. HTML基本知识

2.1 基本语法

2.2 基本结构（骨架）标签

2.3 网页开发工具

3. 路径

3.1 相对路径

3.2 绝对路径

4. 注释

5. HTML常用标签

5.1 标题标签

5.2 段落标签

5.3 换行标签

5.4 文本格式化标签

5.5 图像标签

5.6 超链接标签（重点）

5.7 表格标签

5.7.1 表格结构标签

5.7.2 合并单元格

5.8 列表标签

5.8.1 无序列表（重点）

5.8.2 有序列表

5.8.3 自定义列表

5.9 表单标签

5.9.1 表单控件

5.9.2 表单域

5.9.3 input标签

5.9.4 label标签

5.9.5 select标签

5.9.6 textarea标签

5.10 input标签常用属性

5.11 button元素

6. HTML5新特性

6.1 语义化标签（★★）

6.2 多媒体标签

6.2.1 视频标签- video（★★★）

6.2.2 音频标签- audio

6.2.3 新增的表单元素（★★）

6.2.4 新增的表单属性