HTML
约 1976 字大约 7 分钟
2025-08-21
超文本标记语言 (HyperText Markup Language)、结构（Structure）
HTML - 文档
菜鸟教程 - HTML - 文档
w3cschool - HTML - 文档
在线工具 | 菜鸟工具
HTML 简介
基本介绍
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了 HTML 标签及文本内容
- HTML 文档也叫做 web 页面
HTML 基本结构
主要由以下四部分组成
- 声明文档类型
- html 文档
- head(头部)
- body(主体) 可见部分
代码 演示
<!DOCTYPE html>
<!-- document:文档 type:类型 也就是说:文档类型是html(超文本标记语言) -->
<!-- 类似于人的自我介绍, 也就是说先告诉浏览器这个是什么? 浏览器知道之后就可以按照对应的标准去解析了 -->
<html lang="en">
<!-- 声明当前的html的语言类型 en(英文) zh(中文) -->
<!-- 头部 -->
<head>
<meta charset="UTF-8" />
<!-- 初始 字符集 utf-8 假如没有这几句话,那么就在浏览器解析的时候容易出现乱码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 初始设置 在浏览器访问页面的时候解析浏览器如果是IE,那么按照edge的浏览器的规则解析 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 初始设置视口,只要是针对移动端的研发,对于PC端的浏览器无效 -->
<title>hello word</title>
<!-- 标题,网页的标题 -->
</head>
<!-- 主体 -->
<body>
网页的主体,网页中所有显示的内容都要写在这里 html注释符号:
<!-- -->
快捷方式: ctrl+/ 功能: 注释掉的文本内容, 浏览器不解析,这个是给开发人员看的
</body>
</html>HTML 语法
- 双标记(常规标记)
<标记></标记>
<标记 属性="属性值" 属性="属性值"></标记>
注意点: / 不能丢失
- 属性值: 可以是""，也可以是''，也可以不写。
- 标记和属性中间敲空格
- 属性和属性不分先后顺序的
- 单标记(空标记)
<标记>
<标记 属性="属性值"/>
注意点: / 可以写 也可以不写 (看自己的编码习惯)
HTML 常见标签
常见 标签
| 标签 | 描述 | 特点 |
|---|---|---|
<h1~6>标题</h1~6> | 标题 | 字号从大到小 加粗的 |
<div>布局</div> | 布局 | 默认没有任何样式 需要 CSS 配合 |
<span>文本节点</span> | 文本节点 | 默认没有任何样式 需要 CSS 配合 |
<p>h段落</p> | 段落 | |
<b>加粗</b> <strong>加粗</strong> | 加粗 | 区别: b 是单纯的加粗 strong 有强调和加粗的作用 |
<i>倾斜</i> <em>倾斜</em> | 倾斜 | 区别: i 是单纯的倾斜 em 有强调和倾斜的作用 |
<s>删除线</s> <del>删除线</edl> | 删除线 | |
<sup>上标</sup> <sub>下标</sub> | 上下标 | |
<u>下划线</u> | 下划线 | |
<br /> | 强制换行 | |
<hr /> | 水平线 | |
<ul><li></li></ul> | 无序列表 | ul 可添加 type="disc/circle/square/none" |
<ol><li></li></ol> | 有序列表 | ol 可添加 type="A/a/I/i" start="数字" |
<dl><dt></dt><dd></dd></dl> | 自定义列表 | dt 有 1 个,dd 可以是多个 |
<iframe src="URL"></iframe> | 内联框架 | |
  | 全角空格 | 特殊字符 |
| 半角空格 | 特殊字符 |
© | 版权 | 特殊字符 |
引入图片
<img src="书写引入的路径" alt="图片不显示之后给的提示信息" title="鼠标悬停上去之后给的提示信息" width="宽度" height="高度">
- src 引入路径
- 绝对路径 (指的是本地硬盘的具体地址)
- 相对路径
- 当前文件和目标文件在同一目录下 --- src="目标文件的名字.扩展名"
- 当前文件和目标文件夹在同一目录下 --- src="书写目标文件所在的文件夹/目标文件的名字.扩展名"
- 当前文件夹和目标文件夹在同一目录 --- src="../目标文件的名字.扩展名"
后退一步 ../
以此类推
超链接跳转
<a href="书写跳转的目的地" title="鼠标悬停上去之后给的提示信息" target="设置窗口的打开方式">书写要触发的对象</a>
target="_self" --- 本窗口打开
target="_blank" --- 新窗口打开
表单
用来收集用户信息的
<form method="方式/方法 get/post" action="设置最终提交的目的地"></form>
<input type="类型" placeholder="书写框内的提示信息" name="名字" value="值">
name 属性：必须要添加，如果没有那么数据提交不了服务器
type 类型
- 文本框 type="text"
- 密码框 type="password"
- 文本域 type="textarea"
- 提交按钮 type="submit" 也就是：
<button></button> - 单纯的按钮 type="button"
- 重置按钮 type="reset"
placeholder 属性
- 作用于：文本框、密码框、文本域
value 值
- 初始值/默认值 ===> 文本框、密码框、文本域
- 修改文本内容 ===> 按钮
HTML 5 简介
- HTML5 是最新的 HTML 标准。
- HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
- HTML5 拥有新的语义、图形以及多媒体元素。
- HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
- HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
HTML 新增标签
新的语义和结构元素
新增 标签
| 标签 | 描述 |
|---|---|
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框，比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释（中文注音或字符）。 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节（section、区段）。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
新的表单元素
新增 标签
| 标签 | 描述 |
|---|---|
<datalist> | 定义输入控件的预定义选项。 |
<keygen> | 定义键对生成器字段（用于表单）。 |
<output> | 定义计算结果。 |
新的输入类型/属性
新增 类型/属性
| 新的输入类型 | 新的输入属性 |
|---|---|
| color | autocomplete |
| date | autofocus |
| datetime | form |
| datetime-local | formaction |
| formenctype | |
| month | formmethod |
| number | formnovalidate |
| range | formtarget |
| search | height 和 width |
| tel | list |
| time | multiple |
| url | pattern (regexp) |
| week | placeholder |
| required | |
| step |
HTML5 图像
图像 标签
| 标签 | 描述 | 教程 |
|---|---|---|
<canvas> | 定义使用 JavaScript 的图像绘制。 | HTML5 Canvas |
<svg> | 定义使用 SVG 的图像绘制。 | HTML5 SVG |