超文本标记语言（英语：HyperText Markup Language，简称：HTML）
HTML基础知识
- 1.标题标签
- 2.段落标签
- 3.换行、水平线标签
- 4.文本格式化标签
- 5.div 和 span标签
- 6.图像标签
- 7.超链接标签
- 8.表格标签
- 9.列表标签
- 无序列表
- 有序列表(了解，很少用有序列表)
- 自定义列表
- 10.表单标签
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
- 11.其他
- HTML骨架
- 注释标签
- 特殊字符（最常用的三种）
1.标题标签
head（头部、标题）
- 标题标签：
<h1> </h1> - 说明：h1字体最大，h6字体最小，独占一行。
- 代码写法：
<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
2.段落标签
paragraph （段落）
- 段落标签：
<p> </p> - 说明：两个段落之间有间隙。
- 代码写法：
<p>这是一段文字。</p>
3.换行、水平线标签
break（换行）、horizontal rule（水平尺）
- 换行标签：
<br/> - 说明：br为单标签，换行没有间隙。
- 水平线标签：
<hr> - 说明：hr为单标签。
4.文本格式化标签
strong（强壮的）、emphasized（强调）、deleted（删除）、inserted（插入）
bold（粗体）、italic（斜体）、strikethrough（删除线）、underlined（下划线）
| 标签语义 | （推荐，语义更强烈） | （不推荐） |
|---|---|---|
| 加粗🔺 | <strong> | <b> |
| 倾斜🔺 | <em> | <i> |
| 删除线 | <del> | <s> |
| 下划线 | <ins> | <u> |
5.div 和 span标签
division（分割、分区）、span（跨度、跨距）
- 说明：没有语义，可以理解为一个盒子，用来装内容、布局网页。
| 标签 | 显示模式 | 说明 |
|---|---|---|
| div | 块级元素 | 一行只能放一个div，div独占一行 |
| span | 行内元素 | 一行可以放很多span |
6.图像标签
image（图像）、source（来源、出处）、alter（替用)
- 图像标签：
<img> - 说明：img为单标签。
- 代码写法：
<img src="/images/logo.png" alt="图片丢失了" title="这是图片" width="258" height="39" />
| 属性 | 内容 | 说明 |
|---|---|---|
| src🔺 | 图片路径 | 必需属性 |
| alt🔺 | 替换文本 | 当图像不能显示时，用该文字替换 |
| title🔺 | 提示文本 | 当鼠标停留在图像上时，提示该文字 |
| width | 设置宽度 | 宽高修改一个，另外一个会等比例修改 |
| height | 设置高度 | 宽高修改一个，另外一个会等比例修改 |
| border | 设置边框粗细 | 一般通过css设置 |
图片路径中关于相对路径和绝对路径的知识点另一篇文章有讲解。
7.超链接标签
anchor（超链接）、hypertext reference（超文本引用）
- 超链接标签：
<a> - 说明：a链接浏览器默认指定了一个蓝色、有下划线的样式。
- 代码写法：
<a href="https://www.baidu.com">这是一个链接</a>
| 属性 | 属性值 | 说明 |
|---|---|---|
| href🔺 | 超链接路径 | 要跳转的超链接路径 |
| target | _self或_blank | 在当前窗口打开(默认)、或在新窗口打开 |
6种链接分类：
| 链接种类 | 说明 |
|---|---|
| 外部链接 | 外部网站例如：http://www.qq.com |
| 内部链接 | 网站内部页面之间的相互链接：index.html |
| 空链接 | 空链接属性值为：# |
| 下载链接 | 属性值是文件.exe或zip等压缩包格式：img.zip |
| 网页元素链接 | 在网页中的各种网页元素，如文本、图像、表格、音频、视频都可以添加超链接 |
| 锚点链接🔺 | 点击链接，快速定位到页面中的某个位置 |
锚点链接：
1.在链接文本的href属性中，设置属性值为" #名字 "的形式，如<a href="#two">第1章标题<a/>。
2.找到目标位置标签，里面添加一个属性" id = 刚才的名字 "，如<h3 id="two">第1章内容</h3>。
8.表格标签
table row（表示表格的一行）
table header（表示表格的表头单元格）（会加粗居中显示）
table data （表示表格的数据单元格）
- 表格标签 table：用来展示数据的。
<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>18</td></tr><tr><td>李四</td><td>19</td></tr></table>
- 结构标签：
<thead>和<tbody>能使结构更加清晰。
<table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>18</td></tr><tr><td>李四</td><td>19</td></tr></tbody></table>
- 表格属性（了解，实际开发用css设置表格属性）
| 属性 | 属性值 | 说明 |
|---|---|---|
| align | left、center、right | 对齐方式 |
| border | 1、" " | 是否有边框，默认为" "，无边框 |
| cellpadding | 像素值 | 单元格与内容的内边距，默认为1像素 |
| cellspacing | 像素值 | 单元格与单元格之间的距离，默认为2像素 |
| width | 像素值或百分比 | 表格宽度 |
| height | 像素值 | 表格高度 |
- 合并单元格：给 td 加属性
跨行合并：例如rowspan="2"，行等于2，即竖着占两行。
跨列合并：例如colspan="2"，列等于2，即横着占两列。
再删除多余的单元格。
9.列表标签
unordered list（无序列表）、ordered list（有序列表）、list item（列表项目）
definition list（定义列表）、definition term（定义术语）、definition description（定义描述）
列表标签：用来布局页面的。
ul、ol里面只能放li标签，dl里面只能放dt、dd标签；
li、dt、dd里面相当于一个容器，任何标签都可以放。
无序列表
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
有序列表(了解，很少用有序列表)
<ol><li>1</li><li>2</li><li>3</li><li>4</li></ol>
自定义列表
<dl><dt>数字</dt><dd>1</dd><dd>2</dd><dd>3</dd></dl>
10.表单标签
表单标签 form：用来收集用户信息，包括表单域、表单控件和提示信息。
表单域：<form>会把它范围内的表单元素信息提交给服务器。（属性暂时不需要深入学习）
| 属性 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 表单数据提交方式：get或post |
| name | 名称 | 指定表单的名称，以区分同一个页面中的多个表单域 |
表单控件/表单元素：
input输入表单元素
<input>表单元素，是单标签。
input标签的type属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| type | text🔺 | 文本 |
| password🔺 | 密码 | |
| radio🔺 | 单选框 | |
| checkbox🔺 | 复选框 | |
| button🔺 | 一般搭配js使用，启动脚本 | |
| submit | 将表单域内容的值提交给后台服务器 | |
| reset | 重置表单内容，将表单内容全部清空 | |
| file | 上传文件 |
input的其他常用属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| name🔺 | 由用户自定义 | 定义input元素的名称 |
| value🔺 | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定首次加载时被选中 |
| maxlength | 正整数 | 规定最大长度 |
| placeholder | 提示信息 | 提示信息 |
注意点：
1.name 和 value是每个表单元素经常有的属性值，主要给后台人员使用。
2.name要求单选框和复选框都要有相同的name值。
3.🔺label标签：当点击标签内的文本时，浏览器自动将焦点转到对应的表单元素上，用来增加用户体验，for 和 id一起搭配使用。
<label for="sex">男</label><input type="radio" name="sex" id="sex">
select下拉表单元素
<select><option>选项1</option><option>选项2</option><option>选项3</option></select>
option的 selected = "selected"，表示为默认选中项。
textarea文本域元素
- 可以用cols和rows属性改变显示的大小，但是实际开发一般用css完成该功能。
11.其他
HTML骨架
- 快捷键：输入 “ ! ” 再按tab键快速生成骨架。
- 代码写法：
<!DOCTYPE html><head><title>标题</title></head><body>内容</body>
</html>
注释标签
-
注释标签：
<!-- --> -
快捷键：
ctrl + /
特殊字符（最常用的三种）
| 特殊字符 | 说明 | 代码 |
|---|---|---|
| 空格 | | |
| < | 小于号 | ⁢ |
| > | 大于号 | > |