一篇HTML的基础知识点汇总超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种
HTML简介
1. 什么是HTML？
- 超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。
- 是一种标记语言，不是编程语言。
- 标记语言是一套标记标签。
2.Web标准
- Web标准不是某一个标准，而是由W3C（万维网联盟，国际最著名的标准化组织）和其他标准化组织制定的一系列的集合。主要包括结构（Structure）、表现（Presentation）、行为（Behave）三个方面。
3. 为什么需要Web标准?
- 浏览器不同，他们显示的页面或者排版就有差异，需要web标准来限制
- 开发人员按照 Web 标准制作网页，他们可以很容易了解彼此的编码。
- 遵守标准的Web页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码（如JavaScript和DOM）
4. Web标准的三大组成部分
- 结构用于对网页元素的整理和分类，主要包括xml和html两部分。（比如一只没毛的鸟）结构最重要。
- 表现用于设置网页元素的板式、颜色、大小等外观样式，主要指CSS。（比如一只有毛的鸟）
- 行为是指网页模型的定义及交互的编写 js。（比如一只会飞的鸟）
HTML语法规范
HTML标签通常成对出现，称为双标签。有极少个是单标签。 标签的关系可以分为包含关系和并列关系
- 包含：
<head>
<title></title>
</head>
- 并列
<head></head>
<body></body>
HTML基本结构标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
网页开发工具
<!DOCTYPE html>
表示浏览器采取html5的版本显示网页，必须写到文档最前面的位置，是文档类型的声明标签，不是html标签。
<html lang="en">
定义当前文档显示的语言。 en 定义语言为英文，zh-CN定义语言为中文。（提倡使用） 定义en就是英文网页，定义zh-CN就是中文网页。 对于文档显示来说，定义en也可以显示中文文档，同理定义zh-CN也可以显示英文文档。
<meta charset="UTF-8"/>
在标签内，使用标签的charset属性规定该html文档应该使用哪种字符编码。 UTF-8 是万国码，包含了全世界所有国家需要用到的字符。 一定要写，否则乱码。
常用标签
标题标签
通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
段落标签
把文字有条理的分段显示，该标签用于定义段落
<p>我是一个段落标签</p>
特点：
- 打空格没用，打多少都显示一个空格
- 文本在一个段落中会根据浏览器的大小自动换行
- 段落和段落之间有空隙
水平线标签
<hr />是单标签
换行标签
强制文本换行
abc <br/> efg
显示为： abc efg
特点：
- 是个单标签
- 只是简单开始新的一行。行之间没有太大的空隙。
文本格式化标签
- 突出重要性，比普通文字更重要
在网页中，有时需要把文字设置为粗体、斜体或者下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊方式显示
| 标签 | 语义 | 描述 |
|---|---|---|
| < strong>< /strong> 、 < b>< /b> | 加粗 | 优先考虑strong，语义更加强烈 |
| < em>< /em>、< i>< /i> | 倾斜 | 优先em，语义更加强烈 |
| < del>< /del>、< s>< /s> | 删除线 | 优先del，语义更强烈 |
| < ins>< /ins>、< u>< /u> | 下划线 | 优先ins，语义更强烈 |
- div和span标签 没有语义，他们是一个盒子，用来装内容、布局网页。
特点：
- div用来布局，但是一行只能放一个div，大盒子。后面不能放东西，否则转到下一行显示。
- span标签用来布局，一行上可以多个span，小盒子。
图像标签
用于定义html页面中的图像，是个单标签
<img src="图像URL" alt="图片说明" title="提示文本" width="图片宽度" height="图片高度" border="1"/>
src是img标签的必须属性，用于指定图像文件的路径和文件名。 图像的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示时才能看到的替换文字 |
| title | 文本 | 提示文本，鼠标放到图片上显示的文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图片高度 |
| border | 数字 | 设置图像的边框粗细 |
宽度和高度设置一个就行，另外的会等比例缩放，避免失真属性不分先后顺序，均以空格分开
路径
- 相对路径：以引用文件所在的位置为基础建立出的目录路径（文件相对于html页面的位置）
- 绝对路径：从盘符开始的路径（或者完整的网络地址），注意盘符路径的斜杠 如" D:\web\img\logo.gif "
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同级路径 | 文件和所需文件同一级 | |
| 同级路径 | ./ | 当前目录下的某目录或某文件 |
| 下一级路径 | / | 某文件目录的下一级 |
| 上一级路径 | ../ | 所需文件位于当前目录的上一级 |
超链接标签
用于定义链接，作用是从一个页面跳转到另一个页面 anchor：锚
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
- href:指定链接地址的url属性（必须属性），当标签 引用href属性时，它就具有了超链接的功能
- target:用于指定链接页面的打开方式，其中_self为默认值，在当前窗口打开页面；_blank为在新窗口中打开页面
HTML中的注释和特殊字符
<!--注释-->(键盘使用ctrl+/ 快捷加注释)
常用特殊字符：
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | >； |
表格标签
显示、展示数据，不是用来布置页面
<table>
<tr>
<td>单元格内容</td>
...
</tr>
...
</table>
- table 适用于定义表格的标签
- tr 用于定义表格中的行，必须嵌套早 table 标签中使用
- td 用于定义表格中的单元格，必须嵌套在 tr 中
表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格中的文本内容加粗居中显示th标签 表示html表格的表头部分（table head的缩写）
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
表格属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对于周围元素的对齐方式 |
| border | 1或 " " | 规定单元格是否拥有边框，默认为 " "或 0 ,表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其单元格中内容之间的空白（距离），默认1像素 |
| cellspacing | 像素值 | 规定单元格与单元格之间的空白（距离），默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
| height | 像素值或百分比 | 规定表格的高度 |
这些属性要写到table里去，但是实际开发并不常用，后面会通过css来设置
表格结构标签
可能表格很长，为了更好的表示表格标签的语义，可以将表格分割成表格头部和表格主体两大部分。
thead标签 表格的头部区域（所有组成的区域）,内部必须拥有标签。一般位于第一行。
tbody标签 表格的主体区域。主要用于放数据本体
<table>
<thead>
<tr>
<th>姓名</th>
...
</tr>
</thead>
<tbody>
...
</tbody>
</table>
合并单元格
合并单元格的方式：
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数 "
目标单元格：（写合并代码）
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码 合并单元格三步曲：
- 先确定是跨行合并还是跨列合并
- 找到目标单元格。写上合并方式=合并的单元格数量。 如
<td colspan="2"></td>
- 删除多余的单元格。
列表标签
用来布局特点: 整齐、整洁、有序
- 列表可以分为三大类：无序列表、有序列表、自定义列表
无序列表
ul标签 表示html页面中的无序列表，一般以项目符号呈现列表项，而列表项使用 li 定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
结果为:
·列表项1
·列表项2
...
注意：
- 无需列表的各个列表项之间没有顺序级别之分，是并列的。
- ul 中只能嵌套 li ，在 ul 中输入其他标签或者文字是不被允许的
- < li>< /li>之间相当于一个容器，可以容纳所有元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用css来设置
有序列表
ol标签 用于定义有序列表，列表排序以数字来显示，并且使用 li标签 来定义列表项
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>
结果为:
1.列表项1
2.列表项2
...
注意：
- ol标签 中只能嵌套li，直接在 ol标签 中输入其他标签或文字的做法是不被允许的
- < li>< /li>之间相当于一个容器，可以容纳所有元素
- 有序列表或带有自己的样式属性，但在实际使用时会使用css来设置。
自定义列表
- 通常在网页底部使用。
用于对术语或者名词进行解释和描述，自定义列表的列表项前没有任何项目符号
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
...
</dl>
注意：
- dl 标签 里面只能包含dt和dd，dt、dd里面可以放任何标签
- dt 和 dd 个数没有限制，经常是一个 dt 对应多个 dd
- dt 和 dd 是并列关系。
表单标签
使用表单是为了 收集用户信息
在网页中我们也要跟用户进行交互，收集用户资料，此时就需要表单
- 表单的组成（常见于注册页面） 一个完整的表单通常由 表单域、表单控件（也称为表单元素）和提示信息 3个部分构成
表单域
包含表单元素的区域 在html标签中，form标签 用于定义表单域，以实现用户信息的收集和传递。 form标签 会把它范围内的表单元素提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
- action：属性值：url地址。 用于指定接收并处理表单数据的服务器程序的url地址。
- method：属性值：get/post。用于设置表单数据的提交方式，其取值为get或者post。
- name：属性值：名称。用于指定表单的名称，以区分同一个页面中的多个表单域。
注意：
- 写表单元素之前，应该有个表单把他们进行包含
- 表单域是 form标签
表单控件（表单元素）
在表单域中定义的表单元素就是 允许用户在表单中输入或选择的内容控件
- input 输入表单元素
- select 下拉表单元素
- textarea文本域元素
input表单元素
包含一个type属性，根据不同的type属性值，输入的字段有很多种形式
<input type="属性值"/>
type属性的属性值如下：
| 属性值 | 描述 |
|---|---|
| text | 定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| checkbox | 定义复选框 |
| image | 定义图像形式的提交按钮 |
| radio | 定义单选按钮。 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器。 |
| reset | 定义重置按钮，重置按钮会清除表单中所有数据。 |
| button | 定义可点击的按钮（通常用于通过JavaScript启动脚本） |
| file | （文件域）定义输入字段和"浏览"按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
<input type="text" > text 文本框 用户可以在里面输入任何文字
<input type="paassword"> password 密码框 用户看不见输入的密码
<input type="radio">男 radio按钮，可以实现多选一
<input type="checkbox">睡觉 checkbox 复选框，可以实现多选。
除type属性外，input标签还有很多其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxiength | 正整数 | 规定输入字段中的字符的最大长度(较少使用，多使用正则表达式) |
- radio 实现多选一 ：有相同name即可。（因为name的属性相同，所以只有一个能被选中）
- checkbox：必须有相同name。（一般将name设置为name[],如果被选中，则在数组name中添加一个元素）
- 单选和多选框可以设置checked。在打开的时候就默认选中这个按钮
label标签
label标签为input元素定义标注（标签） label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或选择对应的表单元素上，来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
label标签的 for属性 应当与相关元素的 id属性相同。
select下拉表单元素
页面中如果有多个选项让用户选择，并且想要节约空间时使用。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<select>中至少包含一对<option>
<select>中定义select="selected"时，当前项即为默认选中项
textarea文本域标签
用户输入内容较多时使用，常见于留言板、评论。 textarea标签是用于定义多行文本输入的控件。
<textarea rows="3" cols="20">
文本内容
</textarea>
通过<textarea>标签可以轻松创建多行文本输入框
cols="每行中的字符数"，rows="显示的行数**"，**在开发中不会使用，都是用CSS开改变大小。
转载自:https://juejin.cn/post/7133081535334318117