1. 什么是 HTML
HTML（Hyper Text Markup Language），超文本标记语言
超文本：比文本要强大，通过链接和交互方式来组织和呈现信息的文本形式，不仅有文本，还可能包含图片、音频、或者自己已经审阅过的学者所加的评注、补充或脚注等
标记语言：由标签构成的语言
HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容，如以下代码：
上面代码中的 <h1><h2><h3> 就是标签
1.1 认识 HTML 标签
HTML 代码是由 “标签” 构成的，特点如下：
- 标签名（body）放到 < > 中
- 大部分标签成对出现，<h1> 为开始标签，</h1> 为结束标签
- 少数标签只有开始标签，称为 “单标签”
- 开始标签和结束标签之间，写的是标签的内容
- 开始标签中可能会带有 “属性” （如：id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)，如下代码
<h3 id="myId">我是三级标题</h3>1.2 HTML 文件基本结构
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
- html 标签是整个 html 文件的根标签（最顶层标签）
- head 标签中写页面的属性
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题
1.3 标签层次结构
- 父子关系
- 兄弟关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>其中：
- head 和 body 是 html 的子标签（html 就是 head 和 body 的父标签）
- title 是 head 的子标签，head 是 title 的父标签
- head 和 body 之间是兄弟关系
tip：
可以使用浏览器的开发者工具查看页面的结构
F12 或 鼠标右键检查，开启开发者工具，切换到 Elements 标签，就可看到页面结构细节
标签之间的结构关系，构成了一个 DOM 树，DOM 是 Document Object Mode（文档对象模型）的缩写
1.4 HTML 快速入门
开发工具：Visual Studio Code
在 VS Code 中创建文件 xxx.html，直接输入 ! ，按 Enter 或 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>在 <body></body> 标签中，任意书写文字，按 Ctrl + s 保存文件，通过浏览器访问即可，如：
1.5 HTML 常见标签
1.5.1 标题标签 h1-h6
从 h1 到 h6，数字越大，字体越小
1.5.2 段落标签：p
在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签
p 标签表示一个段落
tip：
- p 标签描述的段落，前面没有缩进
- 自动根据浏览器宽度来决定排版
- html 内容首尾处的换行、空格均无效
- 在 html 中文字之间输入的多个空格只相当于一个空格
- html 中直接输入换行不会真的换行，而是相当于一个空格
1.5.3 换行标签：br
换行通过 <br/> 标签实现，br 是 break 的缩写，表示换行
br 是一个单标签（不需要结束标签）
br 标签不像 p 标签那样带有很大的空隙
<br/> 是规范写法，不建议写成 <br>，虽然浏览器有很好的 “鲁棒性”，但这里没有问题，不代表后面也没问题
1.5.4 图片标签：img
img 标签必须带有 src 属性，表示图片的路径
<img src="rose.jpg">此时要把 rose.jpg 这个图片放到和 html 中的同级目录中
img 标签的其他属性：
width / height：控制宽度高度，高度和宽度一般改一个就行，另一个会等比例缩放，否则就会图片失衡
border：边框，参数是宽度的像素，但是一般会使用 CSS 来设定
tip：
- 属性可以有多个，不能写到标签之前
- 属性之间用空格分割，可以是多个空格，也可以是换行
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示
关于目录结构：
对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好
1. 相对路径：以 html 所在位置为基准，找到图片的位置
- 同级路径：直接写文件名即可（或者 ./）
- 下一级路径：image/1.jpg
- 上一级路径：../image/1.jpg
2. 绝对路径：一个完整的磁盘路径，或者网络路径
- 磁盘路径 D:/rosr.jpg（最好使用 /，不要使用 \）
- 网络路径 https://cn.bing.com/images/search?view=detailV2&ccid=wtpfIxZv&id=0EB129930EAA55858F09715E195BAEA0462DF70E&thid=OIP.wtpfIxZvYE3XmBVy7hovYgHaEn&mediaurl=https://img-blog.csdnimg.cn/4dfc7057ff0f406187a2c7def724b99a.png&exph=508&expw=816&q=java&simid=608049172503483542&form=IRPRST&ck=0498F3C0DC5285A86C54AA8EBE301A5A&selectedindex=1&itb=0&ajaxhist=0&ajaxserp=0&vt=0&sim=11
1.5.5 超链接：a
href：必须具备，表示点击后会跳转到哪个页面
target：打开方式，默认是 _self，如果是 _blank 则用新的标签页打开
链接的几种形式：
1. 外部链接：href 引用其他网站的地址
<a href="https://www.baidu.com">百度</a>2. 内部链接：网站内部页面之间的链接，写相对路径即可
在一个目录中，先创建一个 demo1.html，再创建一个 demo2.html
target 设置为 _blank
3. 空链接：使用 # 在 href 中占位
<a href="#">空链接<a>用于此处需要插入超链接，但还不知道插入哪个的时候
1.5.6 表格标签
- table 标签：表示整个表格
- tr：表示表格的一行
- td：表示一个单元格
- thead：表格的头部区域
- tbody：表格的主体区域
table 包含 tr，tr 包含 td
表格标签中有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置，这些属性都要放到 table 标签中：
- align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对其方式）
- border 表示边框，1 表示有边框（数字越大，边框越粗），"" 表示没边框
- cellpadding：内容距离边框的距离，默认 1 像素
- cellspacing：单元格之间的距离，默认 2 像素
- width / height：设置尺寸
快速生成：
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</table>
加上属性：
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
1.5.7 表单标签
表单是让用户输入信息的重要途经，分为两个部分：
- 表单域：包含表单元素的区域，重点是 form 标签
- 表单控件：输入框，提交按钮等，重点是 input 标签
1) input 标签
各种输入控件，单行文本框、按钮、单选框、复选框
- type(必须有)，取值种类很多，如：button、checkbox、text、file、image、password、radio 等
- name：给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一
- value：input 中的默认值
- checked：默认被选中（用于单选按钮和多选按钮）
常用的类型：
1. 文本框
2. 密码框
3. 单选框
tip：单选框之间必须具备相同的 name 属性，才能实现 多选一 效果
4. 复选框
5. 普通按钮
当前点击了没有反应，需要搭配 JS 使用
6. 提交按钮
<form action="demo1.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
提交按钮必须放到 form 标签中，点击后就会尝试给服务器发送请求
2) select 标签
下拉菜单，option 中定义 selected="selected" 表示默认选中
3) textarea 标签
文本域中的内容就是默认内容，空格也会有影响
rows 和 clos 不会直接使用，都是用 CSS 来改的
4) form 标签
<form action="demo1.html">
...[form 的内容]
</form>描述了要把数据按照什么方式，提交到哪个页面中
5) 无语义标签：div & span
div 标签，division 的缩写，含义是分割
span 标签，含义是跨度
类似于两个盒子，用于网页布局
div 是独占一行的，是一个大盒子
span 不独占一行，是一个小盒子
1.6 练习：用户注册
用户注册界面：
代码：
<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>