目录
一、HTML基础
1、HTML是什么？
2、认识 HTML 标签
3、HTML文件的基本结构
二、HTML快速开发
三、HTML常见标签
1、标题标签：h1~h6
2、段落标签：p
3、换行标签：br
4、图片标签：img
5、超链接：a
四、表格标签
五、表单标签
1、form 标签
2、input 标签
1）文本框
2）密码框
3）单选框
4）多选框
5）普通按钮
6）提交按钮
3、select 标签
4、textarea 标签
六、无语义标签：div&span
七、综合练习：用户注册
一、HTML基础
1、HTML是什么？
HTML是超文本标记语言。文本就是用记事本，显示我们可以看懂的内容；而超文本更nb一点，不仅仅有文本，显示文本能显示的内容，里面还可以放视频、图片、链接等等；标记语言：由标签构成的语言。
HTML类似world文档，里面可以放文本、视频、图片、链接等等，如图：
现在，我们创建一个.txt文件，里面的放下面这样的内容：
<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>
然后再把后缀改成 .html，如图：
打开后，如图：
但是，上面的代码不是html的标准规范，是经过浏览器的解析后得到的结果，浏览器有很强的鲁棒性，会经可能的把正确的内容显示出来。
2、认识 HTML 标签
1）HTML标签大多数成对出现的，也会有一些单标签。
2）这里 <h1> 是开始标签，</h2>是结束标签。
3）标签名是放在 < > 里面的，如h1、h2。
4）开始标签和结束标签中，放的是标签的内容。
5）开始标签中，可能会带有 “属性”，如下图的 id 属性，相当于给这个标签设置了一个唯一的标识符（例如身份证号码）。
3、HTML文件的基本结构
基本结构如下图：
html 标签是整个 html 文件的根标签（最顶层标签）。
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容。
title 标签中写的是页面的标题。
4、HTML的标签层次结构
、
还是这个图，html 的子标签是 head 和 body，相反的，head 和 body 的父标签是 html，而title 的父标签是 head，head 的子标签是 title，head 和 body 则是兄弟关系
下面画出了其层次关系，如图：
标签直接的结构关系，构成了一个DOM树，如上图这种。DOM 是 Document Object Mode（文档对象模型）的缩写。
二、HTML快速开发
开发工具我们使用 VS Code，
官网：https://code.visualstudio.com
打开时，提前创建好你要在哪个文件目录下练习前端代码，然后在VS Code点击下图这个选项，然后选择文件路径。
再点击下面选项，创建文件。
创建好后，如图：
在VS Code中，我们可以输入一个 " ! "，然后再按 回车键 或者 tab键 ，就会自动生成一段代码，如图：
然后在我们之前选择的目录下，就可以看到新创建的 .html 文件，如图：
因为里面什么都还没写，所以打开是啥都没有的，如图：
下面随便写点东西，如图：
保存，再刷新一下当前的网页，如图：
三、HTML常见标签
1、标题标签：h1~h6
如图，代码加上：
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>握手标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
打开 .html 文件，如图：
可以看到字体从1到6，越来越小。
2、段落标签：p
在HTML中，段落、换行符、空格都会失效，如果需要分成段落，需要专门的标签，p标签表示是一个段落，如图：
使用p标签就可以进行换行。
注意：
1、p标签描述的段落，前面没有缩进（HTML中没有，CSS有）。
2、自动根据浏览器的宽度来决定排版。
3、html内容首尾处的换行、空格均无效。
4、在html中，文字之间输入的多个空格，只相当于一个空格。
5、html中直接输入换行不会真的换行，而是相当于一个空格。
3、换行标签：br
如果想要换行，可以使用 br标签，br是break的缩写，表示换行。如图：
注意：
1、br是一个单标签（不需要结束标签）。
2、br标签不行p标签那样，带有一个很大的空隙（空隙大小：标题h > 段落p > 换行br）
3、<br/>是规范写法，不建议写成 <br>。
4、图片标签：img
img标签必须带有 src 属性，表示图片的路径，如图，我们搞个小猫的图片。
可以看到图片很大，我们可以控制宽度（width）和高度（height），一般这里只设置一个就好了，然后另一个会根据原图片的比例，自动适配合适的宽度 / 高度，如图：
px的英译是像素的意思，但这里指的是长度单位，前端的长度单位有：px em
还能设置边框（border），参数是宽度的像素，但一般使用CSS来设定。
注意：
1、路径分绝对路径和相对路径，使用哪个都可以。
2、属性可以有多个，不能写到标签之前。
3、属性之间用空格分割，可以是多个空格，也可以是换行。
4、属性之间不分先后顺序。
5、属性使用 “键值对” 的格式来表示。
5、超链接：a
超链接的标签名是 a，其中里面的有两个属性：
href 属性必须要有，表示点击之后会跳转到哪个页面；
target 属性是可选的，如果不加这个属性，默认_self（在当前页面打开href里写入的地址），如果是_blank则用新的标签页打开。
如图：
四、表格标签
table 标签：表示整个表格。
tr：表示表格的一行。
td：表示一个单元格。
thead：表格的头部区域。
tbody：表格的主体区域。
table 包含 tr，tr 包含 td。表格标签有一些属性，可以用于设置大小边框等，但一般使用CSS方式来设置。这些属性都要放到table标签中：
align：是表格相对于周围元素的对齐方式，align = "center"（不是内部元素的对齐方式）
border：表示边框。1 表示有边框（数字越大，边框越粗），" " 表示没边框。
cellpadding：内容距离边框的距离，默认 1 像素。
cellspacing：单元格之间的距离，默认为 2 像素。
width / height：设置尺寸。（会提示）
placeholder：让文本框中显示提示语。（会提示）
注意：上面这几个属性，除了最后两个，其他的VSCode都提示不出来。
下面是代码演示：
<!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><table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>⼥</td><td>11</td></tr></table>
</body>
</html>执行结果：
五、表单标签
表单是让用户用户输入信息的重要途径；分成两个部分：
表单域：包含表单元素的区域，重点是 form 标签。
表单控件：输入框，提交按钮等，重点是 input 标签。
1、form 标签
描述要把数据按照什么方式，提交到哪个页面。如图：
关于 form 需要结合后端代码来进一步理解，这里先不介绍，后面再做详细研究。
2、input 标签
各种输入控件，单行文本框，按钮，单选框，复选框。
type（必须有）：表示输入控件的种类，取值种类很多：button，checkbox，text，file，image，password，radio等。
name：给 input 起了个名字，尤其是对于 单选按钮，具有相同的 name 才能多选一。
value：input 中的默认值。
checked：默认被选中。（用于单选按钮和多选按钮）
下面介绍一些常用的类型：
1）文本框
<input type="text">结果如下：可以在这个文本框中输入你想要输入的信息。
2）密码框
<input type="password">
3）单选框
性别<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">保密结果如下：这里只能多选一
注意：这里的单选框之间必须有相同的name属性，才能实现 多选一 的效果。
4）多选框
爱好：<input type="checkbox"> 唱<input type="checkbox"> 跳<input type="checkbox"> rap<input type="checkbox"> 篮球结果如下：可以进行多选
5）普通按钮
<input type="button" value="我是一个按钮">结果如下，可以点击，但不会出现任何效果，需要搭配JS使用。
代码改成如下，点击后就会显示hello的信息。
<input type="button" value="我是一个按钮" onclick="alert('hello')">
6）提交按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"></form>提交按钮必须放在 form标签中。
结果如下：
这里点击提交后，就会尝试把请求发给服务器。这里跳转到计算机当前目录下的 test.html中。
3、select 标签
这是下拉菜单，其中里面的 selected="selected" 表示默认选中。
<select><option>北京</option><option selected="selected">上海</option><option>深圳</option></select>结果如下：默认选中是上海。
4、textarea 标签
表示文本域的内容，就是默认内容，在这边标签里写的内容，空格、换行都会有影响，但这里的 rows 和 cols 属性不会直接使用，都是使用 CSS来改的。
<textarea rows="3" cols="50">afaafwawfafwwaf</textarea>执行结果如下：
当然，我们也可以在这个网页更改文本中的内容，文本框的大小也可以更改，如图：
六、无语义标签：div&span
div 标签：division 的缩写，含义是分割；
span 标签，含义是跨度
就是两个盒子，用于网页布局：
div 是独占一行的，是一个大盒子。span 不独占一行，是一个小盒子。
这里的效果类似 邮寄包裹，要邮寄的零散东西用袋子装起来，到快递站寄快递时，会吧袋子装起来的东西再用箱子装起来。
<div><span>咬人猫</span><span>咬人猫</span><span>咬人猫</span></div><div><span>兔总裁</span><span>兔总裁</span><span>兔总裁</span></div><div><span>阿叶君</span><span>阿叶君</span><span>阿叶君</span></div>可以看到，被 div 框起来的都在同一行，而被 span 框起来的都进行了分割。
七、综合练习：用户注册
用户注册界面如下：
代码如下：
<!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><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><input type="button" value="注册"><span>已有账号？</span> <a href="#">登录</a><br/></div>
</body>
</html>最后面的 超链接 <a> 的属性 href="#"，表示该链接指向当前页面的同一位置，具体来说，当点击这个连接是，会发生以下情况：
1、浏览器会尝试将当前页面滚动到ID为 "#" 的元素处。
2、如果页面中没有ID为 "#" 的元素，则浏览器会将页面滚动到顶部。
因此，href="#"通常用于创建指向页面内部的锚链接，允许用户快速跳转到特定部分或元素。
