共计 4602 个字符，预计需要花费 12 分钟才能阅读完成。
HTML(Hyper Text Markup Language)，译为“超文本标签 语言 ”，主要通过 HTML 标签 对网页中的 文本、图片、声音等内容进行描述。
1. HTML 骨架格式
2.HTML 标签分类
（1）双标签（大部分）
“/”为关闭符号
例如：
内容
（2）单标签（个别）
例如：
3.HTML 标签的关系
标签的相互关系一般就两种：
(1) 嵌套（父子关系）
例如：在骨架格式中，与
(2) 并列（兄弟关系）
例如：在骨架格式中，
与
4. 使用 sublime
sublime 快速生成骨架的方式：
输入“html”，按 tab
* 字符集：
UTF-8 —>包括全世界所有国家需要的字符
gb2312 —>简单中文
BIG5 —>繁体中文
GBK —>包含所有中文字符
5.HTML 标签语义化
标签语义化，即标签的含义。
优点：方便阅读与后期维护。
遵循原则：先确定语义的 HTML，再选合适的 CSS。
6.HTML 标签
（1）排版标签
1. 标题标签（双标签）head
例如：
,
,
,
,
,
，六个等级，逐步递减。
,
,
,
，六个等级，逐步递减。
,
，六个等级，逐步递减。
2. 段落标签（双标签）paragraph
例如：
…
3. 水平线标签（单标签）horizontal
例如：
4. 换行标签（单标签）break
例如：
—->强制换行
5.div 与 span（双标签）division
两个皆无语义，是布局网页的标签，用来装内容的。
div —>分割，分区
span —>跨度，范围
其语法格式为：
...
... 特点：
1.
2.标签用来布局，一行可以放多个，类比成一个小盒子。
例如：
（2）文本格式化标签
* 以下均为双标签：
（1）粗体：、
（2）斜体：、
（3）加删除线：、
（4）加下划线：、
更推荐使用、、、，语义更加强烈，其它标签只是使用，并没有强调。
（3）标签属性
属性，即特性，特点。
让 HTML 标签提供更多信息 ——> 用 HTML 标签的属性来设置。
。。。标签名>
例如：
（4）图像标签（img）
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
例如：
* 注：上图像与该 html 文件在同一目录中
（5）链接标签
anchor，锚，铁锚。
href（Hypertext Reference，超文本引用）：用于指定链接目标的 url 地址
target：用于指定链接页面的打开方式，有 self（覆盖自身）和 blank（新开网页）两种，self 为默认值。
* 注：1. 外部链接 需要添加 http://
2. 内部链接 需要添加链接内部页面名称，例：首页
3. 若暂时没有确定的链接，则将 href 定义一个 ”#”，意思为链接暂时为一个空链接
例如：
1. 锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接有两个步骤：
1. 使用 “链接文本” 创建链接文本
2. 使用相应的 id 名标注跳转目标位置
例如：
2.base 标签（单标签）
base 可以设置整体链接的打开状态。
例如：
base 可以设置整体链接的打开状态。
若链接过多，则需要写多个 target，过于繁琐。
因此，直接在
里写一个 base 标签即可。
7. 路径
当一个页面需要用到图片 (文件)，首先就是要找到图片(文件)，找图片(文件) 就需要有一定的路径去找。路径一般分为：绝对路径 和相对路径。
（1）相对路径
- 图像文件与 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，例如：
- 图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，例如：
- 图像文件位于 HTML 文件的上一级文件夹：在文件名之前加一个 ”../”，如果是上两级，则需使用 ”../../”，以此类推，例如：
（2）绝对路径
1. 本地路径，一般不使用
2. 完整的网络地址，例如
“https://tupian.qqw21.com/article/UploadPic/2020-8/20208522181570993.jpg”。
8. 列表标签
容器里面装载着文字或图表的一种形式，叫列表。
列表的最大特点：整齐、整洁、有序。
（1）无序列表 ul
各个列表项之间 没有顺序级别 之分，是并列的。
基本语法格式为：
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
......
例如：
* 注：
- 标签只能放
- 标签，其他标签都不允许
（2）有序列表 ol
各个列表项之间 有顺序级别 之分，是有序的。
基本语法格式为：
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
......
例如：
（3）自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号。
其基本语法为：
- 名词 1
- 名词 1 解释 1
- 名词 1 解释 2
...
- 名词 2
- 名词 2 解释 1
- 名词 2 解释 2
...
例如：
9. 表格 table
表格：常见处理、显示表格式的数据。
（1）创建表格
创建表格的基本语法格式如下：
单元格内的文字
...
...
| 都是创建表格的基本标签，缺一不可。
*
例如： * 注：caption 标签必须紧跟 table 标签，对每个表格只能定义一个标题。通常这个标题会被居中在表格之上。 （6）合并单元格跨行合并：rowspan，用法为：rowspan=”num”（num 为合并的单元格数量）例如： 跨列合并：colspan，用法为：colspan=”num”（num 为合并的单元格数量）例如： 其思想：将多个内容合并的时候，就会有多余的东西，把它删掉。 公式：删除的个数 = 合并的个数 -1 合并的顺序：先上，先左 10. 表单标签在 HTML 中，一个完整的表单通常由表单控件、提示信息和表单域三个部分构成。 表单，例如说牛客平台的登陆页面。其目的是收集用户信息。 （1）input 控件为单标签，其常用属性如下：
例如： （2）label 标签label 标签为 input 元素定义标签。 label 标签的使用： 1. 直接用 label 包裹 input，即 2. 如果 label 里有多个表单，想定位到某个表单可以通过 for id 的格式来实现，即 （3）textarea 控件(文本域)若需要输入大量的信息，就需要用到 textarea 控件了(主要用于做留言框)。其基本语法格式如下： 例如： （4）下拉菜单其基本格式为：
* 注： （5）表单域表单域用 |
原文地址: HTML
