文章目录
HTML是什么
这是百度的解答：HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言（markup language），用于描述网页的结构和内容。HTML 使用“标签”（tags）来定义网页中的元素，如段落、标题、链接、图片、列表等。这些标签告诉浏览器如何显示网页内容。
说到前端，人们就会想到 HTML、CSS、JavaScript这三剑客，HTML 定义了网页的结构和内容；CSS 负责网页的样式和布局；JavaScript 实现了网页的动态功能和交互性。
本篇文章将为大家介绍关于 HTML 的知识。注：因为本人主攻后端，所以文章中写到的知识都是最基本的知识，没有特别的深入。
HTML结构
认识HTML标签
HTML 代码是由“标签”构成的，例如：<body>hello</body>：
- 标签名会放在 <> 之间
- 大部分标签成对存在，<body>为开始标签，</body>为结束标签
- 少数标签只有开始标签，称为“单标签”
- 开始标签和结束标签之间，写的是标签的内容
- 开始标签中可能会带有“属性”，用来控制标签中的格式和行为
HTML文件基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
hello
</hello>
</html>
- html 标签是整个 html 文件的根标签（最顶层标签）
- head 标签中写页面的属性
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题
标签层次结构
HTML 的标签之间存在两种关系：父子关系和兄弟关系。上面的代码中 head 标签和 body 标签是 html 标签的子标签，也就是 html 标签是 head 标签和 body 标签的父标签；title 标签是 head 标签的子标签；而 head 标签和 body 标签则是兄弟关系。
标签之间的结构关系，构成了一个 DOM（Document Object Mode ） 树：
在很多集成编译环境中，往往可以使用 ! + … 来快速生成一个 HTML 主体框架，在 VScode 中使用 ! + enter，在 idea 中使用 ! + Tab。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html> 称为 DTD（文档类型定义），描述当前的文件是一个 HTML5 的文件
- <html lang=“en”> 其中 lang 属性表示当前页面是一个“英语页面”。这里暂时不用管，有些浏览器会根据此处的声明提示是否进行自动翻译
- <meta charset=“UTF-8”> 描述页面的编码方式，没有这一行可能会导致中文乱码
- <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
-
- name="viewport"指的是设备的屏幕上能用来显示我们的网页的那一块区域
-
- content=“width=device-width”,init-scale=1.0 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放（这个属性对于移动端开发更重要一些）
HTML常见标签
注释标签
在学任何一个新的语言的时候，首先想到的肯定就是注释了，在 HTML 中使用 <!-- 注释 --> 来达到注释的目的。可以使用 CTRL + / 来达到快速注释的目的。
标题标签
标题标签有六个，从 h1 到 h6，数字越大，字体越小：
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
段落标签
当我们给一段非常长的文字的时候，如果直接使用文本形式的话，那么这些文字可能就会称为一整段，这样看着就会不好看，在 HTML 中 <p> 标签可以将文本形成段落。
例如这下面这些文字：
如果不使用 <p> 标签分段的话，就会成为一段：
然后使用 <p> 标签就是下面的结果：
- p 标签之间会存在一行空隙
- p 标签的段落不会有缩进，但是后面结合css可以实现缩进
- 自动根据浏览器宽度决定排版
- html 内容首尾处的换行，空格均无效
- 在 html 的文字之间输入多个空格只相当于一个空格
- html 中直接输入换行不会真的换行，而是相当于一个空格
换行标签
换行表标签 br 是 break 的缩写，是换行的意思/
- br 是一个单标签（不需要结束标签）
- br 标签不像 p 标签那样带有一个很大的空隙
- <br/> 是规范写法，不建议写成 <br>
格式化标签
- 加粗：strong 标签和 b 标签
- 倾斜：em 标签和 i 标签
- 删除线：del 标签和 s 标签
- 下划线：ins 标签和 u 标签
<strong>string 加粗<br/></strong>
<b>b 加粗<br/></b>
<em>em 倾斜<br/></em>
<i>i 倾斜<br/></i>
<del>del 删除线<br/></del>
<s>s 删除线<br/></s>
<ins>ins 下划线<br/></ins>
<u>u 下划线<br/></u>
图片标签
当我们想要在前端显示图片的时候，往往需要借助 img 标签来实现。img 标签必须带有 src 属性，来指定图片路径。
我将图片放在 html 文件的同一级目录下：
<img src="bear.jpg">
如果图片不在当前 html 文件的同一级目录下的话，可以使用 .. 表示当前 html 文件的上一级目录，.表示当前目录，也可以使用图片的绝对路径来表示，图片的网络地址也是可以的：
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.6a00de959b5801108793b344ef2988ad?rik=OlQAB0P4J80yTA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50070%2f5999.jpg_wh860.jpg&ehk=nUrNDlAkDzUbcZyyRIpSCFDeeTPjyJnuR14jdQ%2fbE2w%3d&risl=&pid=ImgRaw&r=0">
img 标签的其他属性：
- alt：替换文本。当文本不能正常显示的时候，会显示一个替换的文字
- title：提示文本。鼠标放到图片上面的提示词
- width/height：控制宽度和高度。高度和宽度一般改一个就行了，另外一个会等比例缩放，否则图片就会失衡
- border：边框，参数是宽度的像素，但是一般用 CSS 来设定
<img src="bear666.jpg" alt="图片不存在，请检查后重试">
当前不存在 bear666.png，所以当我们访问这个 html 的时候就会显示后面的替换文字：
<img src="bear.jpg" title="这是一只北极熊哦">
<img src="bear.jpg" width="2000px">
<img src="bear.jpg" height="600px">
<img src="bear.jpg" border="5px">
如果一个标签中存在多个属性的话，这些属性没有先后顺序。
超链接标签
超链接标签 <a> 就是当我们点击的时候会跳转到指定的位置。
<a href="http://www.baidu.com">这是一个超链接</a>
- href：必须具备，表示点击之后会跳转到哪个页面
- target：打开方式，默认是 _self，如果是 _blank 则用新的标签打开
这里的 href 可以是其他网站的链接，也可以是我们项目内部页面的链接：
<a href="test.html">这是一个超链接</a>
点击链接之后跳转：
href 中的值还可以是 #，表示空链接，不进行跳转，用于在 href 中占位，也可以是一个下载链接。
这个超链接可以是文本格式，也可以是任何形式的元素：
<a href="http://www.baidu.com">
<img src="bear.jpg">
</a>
点击图片之后跳转到指定页面：
a 标签也可以作为锚点链接，可以快速定位到页面中的某个位置：
<a href="#one">跳转到第一段<br/></a>
<a href="#two">跳转到第二段<br/></a>
<a href="#three">跳转到第三段<br/></a>
<a href="#three">跳转到第四段<br/></a>
<p id="one">
这是第一段<br/>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
19<br/>
20<br/>
</p>
<p id="two">
这是第二段<br/>
21<br/>
22<br/>
23<br/>
24<br/>
25<br/>
26<br/>
27<br/>
28<br/>
29<br/>
30<br/>
</p>
<p id="three">
这是第三段<br/>
31<br/>
32<br/>
33<br/>
34<br/>
35<br/>
36<br/>
37<br/>
38<br/>
39<br/>
40<br/>
</p>
<p id="four">
这是第四段<br/>
41<br/>
42<br/>
43<br/>
44<br/>
45<br/>
46<br/>
47<br/>
48<br/>
49<br/>
50<br/>
</p>
点击跳转到第四段之后：
在 a 标签中也可以禁止跳转：<a href="javascript:void(0);"> 或者 <a href="javascript:;">
表格标签
- table标签：表示整个表格
- tr：表示表格的一行
- td：表示一个单元格
- th：表示表头单元格，会居中加粗
- thead：表格的头部区域（和 th 相比，thead的范围比th要大）
- tbody：表格的主体区域
table 包含 tr，tr 包含 td、th。
<table>
<tr>
<td>
姓名1
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名2
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名3
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
</table>
这样构造的 HTML 页面虽然可以大概看出来是一个表格，但是又是不那么像，这就需要我们添加一些表格的元素使之更像一个表格。
- align：表格相对于周围元素的对齐方式，align=“center” 不是内部元素的对齐方式，通过这个属性只能达到水平居中的效果，要想达到水平方向和垂直方向都居中的话需要依赖于CSS属性
- border：表示边框，1 表示有边框（数字越大边框线越粗），""表示无边框
- cellpadding：内容距离边框的距离，默认1像素
- cellspacing：单元格之间的距离，默认为2像素
- width/height：设置表格的尺寸
<table align="center" border="1" cellpadding="50" cellspacing="3" width="500px" height="300px">
<tr>
<td>
姓名1
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名2
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名3
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
</table>
th 加粗单元格：
<tr>
<th>
姓名1
</th>
<th>
性别
</th>
<th>
年龄
</th>
</tr>
合并单元格
- 跨行合并：rowspan=“n”
- 跨列合并：colspan=“n”
合并单元格的步骤一般分为下面几步：
- 先确定跨行还是跨列合并
- 找好目标单元格（跨列合并，左侧是单元格，也就是从左侧向右侧合并；跨列合并，上侧是目标单元格，也就是从上往下合并）
- 删除多余的单元格，虽然单元格进行了合并，但也只是相当于将多个单元格中的内容合并到一个单元格中了，这些被合并的单元格还会存在
这里我没有删除被合并的单元格：
<table align="center" border="1" cellpadding="50" cellspacing="0" width="500px" height="300px">
<tr>
<td colspan="2">
姓名1
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名2
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名3
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
</table>
删除多余的单元格之后：
合并行：
<table align="center" border="1" cellpadding="50" cellspacing="0" width="500px" height="300px">
<tr>
<td rowspan="2">
姓名1
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<!-- <td>
姓名2
</td> -->
<td>
性别
</td>
<td>
年龄
</td>
</tr>
<tr>
<td>
姓名3
</td>
<td>
性别
</td>
<td>
年龄
</td>
</tr>
</table>
列表标签
- 无序列表[重要] ul、li
- 有序列表[用的不多] ol、li
- 自定义列表[重要] dl（总标签）dt（小标签）dd（围绕标题来说明）上面有几个小标题，下面有几个围绕着标题来展开的
注意：
- 列表元素之家需要是并列关系
- ul/ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd
- 列表带有自己的样式，可以使用 CSS 来修饰
<h3>有序列表</h3>
<ol>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ul>
<h3>自定义列表</h3>
<dl>
<dt>前端三剑客</dt>
<dd>
HTML
</dd>
<dd>
CSS
</dd>
<dd>
JavaScript
</dd>
</dl>
无序列表可以通过 style 属性来改变列表项标记的样式：
- style="list-style-type: disc; 默认实心圆
- style="list-style-type: square; 实心方块
- style="list-style-type: square; 空心圆
有序列表中可以使用 type 属性来规定序号的形式：
- a 表示小写英文字母编号
- A 表示大写英文字母编号
- i 表示小写罗马数字编号
- I 表示大写罗马数字编号
- 1 表示数字编号（默认）
也可以通过 start 属性来指定开始序号是多少：
<ol type="a" start="3">
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ol>
表单标签
表单标签分为两个部分：
- 表单域：包含表单元素的区域，重点是 form 标签
- 表单控件：输入框，提交按钮等，重点是 input 标签
form 标签
form 标签描述了要把数据按照什么方式，提交到哪个页面中：
<form action="test.html">
form内容
</form>
input 标签
各种输入控件，单行文本框，按钮，单选框，复选框等。
- type(必须有)：取值种类很多，包括 button、checkbox、text、file、image、password、radio等
- name：给 input 起了个名字，尤其是对于单选按钮，具有相同的name才能多选一
- value：input 中的默认值
- checkbox：默认被选中（用于单选按钮和多选按钮）
- maxlength：设定最大长度
<form action="text.html">
<h3>文本框</h3>
<input type="text">
<h3>密码框</h3>
<input type="password">
<h3>单选框</h3>
<input type="radio">男
<input type="radio">女
<h3>复选框</h3>
<input type="checkbox"> HTML <input type="checkbox"> CSS <input type="checkbox">JavaScript
</form>
密码框会自动对输入的内容进行加密；这里的单选框其实是有问题的，因为既然是单选框，肯定只能选择一个的，但是这里其实可以选入多个：
要想真正达到单选框的效果，就需要加入前面说的 name 属性：
<h3>单选框</h3>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
在单选框中添加 checked 属性可以设置默认选中的元素：
<h3>单选框</h3>
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<h3>普通按钮</h3>
<input type="button" value="这是一个按钮">
当前按钮点击了之后没有反应，到了后面之后会为大家介绍如何具体的使用 button 按钮，这里我们可以先结合一下 JavaScript 来看看这个按钮点击了之后会干什么：
<h3>普通按钮</h3>
<input type="button" value="这是一个按钮" onclick="alert('你好')">
<form action="http://www.baidu.com">
<h3>提交按钮</h3>
<input type="text" name="username">
<input type="submit" value="提交">
</form>
当我输入张三，点击提交之后，就会以 action 中的值，也就是 http://www.baidu.com + ?form表单中国input标签的name属性的值和输入框输入的值的结构访问指定位置：
<form action="http://www.baidu.com">
<h3>清空按钮</h3>
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
点击清空按钮之后，input 标签中的内容就会被清除：
<form action="http://www.baidu.com">
<h3>提交文件</h3>
<input type="file">
</form>
label标签
label 标签搭配 input 标签使用，让我们点击对应的 label 标签也能选中对应的单选/复选框，提升用户体验：
<form action="http://www.baidu.com">
<input type="radio" id="male" name="sex"><label for="male">男</label>
<input type="radio" id="female" name="sex"><label for="female">女</label>
</form>
这样就算我点击字的话也是能够选中对应的单选框的。
select标签
下拉菜单：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected="selected">武汉</option>
</select>
option 标签中的 selected=“selected” 表示默认选中。
<select>
<option selected="selected">--请选择城市--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option> </select>
textarea标签
文本输入框：
<textarea rows="5" cols="50">
</textarea>
这个文本框的大小是可以拖动的：
要想文本框的大小不可以拖动，则需要添加 style=resize:none 属性：
<textarea rows="5" cols="50" style="resize: none;">
</textarea>
无语义标签
无语义标签有两种：div 和 span，div 标签是 division 的缩写，含义是分割，span 的含义则是跨度。
这两个标签可以看作是两个盒子，用于网络布局：
- div 是独占一行的，是一个大盒子
- span 不独占一行，是一个小盒子
<div>
<span>HTML</span>
<span>HTML</span>
<span>HTML</span>
</div>
<div>
<span>CSS</span>
<span>CSS</span>
<span>CSS</span>
</div>
<div>
<span>JavaScript</span>
<span>JavaScript</span>
<span>JavaScript</span>
</div>
HTML特殊字符
有些特殊字符在 html 文件中是不能直接表示的，例如：
- 空格：
- 小于号：<
- 大于号：>
- 按位与：&
在 html 文件中如果不适用特殊符号的话，连续输入多个空格，最终显示在页面上的就是一个空格：
<p>HTML CSS JavaScript</p>
要想显示出多个连续的空格则需要依靠于特殊符号：
<p>HTML CSS JavaScript</p>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
