1. HTML基础
1.1 什么是HTML
HTML是超文本标记语言。
超文本：比文本更强大，可以包含图片，链接等。
标记语言：由标签构成的语言。所以我们学习HTML就是在学习标签。
1.2 认识HTML标签
HTML代码都是由标签组成的，例如：
<h1>一级标题</h1>- 标签名（body）放在 “ <>” 中
- 大部分标签都是成对存在，<> 为开始标签，</>为结束标签。
- 少数标签只有开始标签，称为 “ 单标签 ”
- 开始标签和结束标签中填写标签的内容。
- 标签可以有多个属性
我们可以在记事本写HTML代码，写完后修改后缀为HTML，然后用浏览器打开即可运行： 
1.3 HTML文件基本结构
<html>
<head>
<title>第一个页面<title>
</head>
<body>
hello world
</body>
</html>- html标签是整个html文件的根标签（最顶层标签）
- head标签中写页面的属性
- body标签中写页面上显示的内容
- title标签中写页面的标题
- head和body是html的子标签，title是head的子标签
2. HTML快速入门
2.1 开发工具
虽然可以使用记事本写HTML代码，但是非常不方便，这里推荐使用Visual Studio Code
我们打开VS Code创建一个html文件输入 ! + 回车即可快速生成html文件格式
HTLM的注释符号是 <! -- 要注释的内容 -->
2.2 HTML常见标签
2.2.1标题标签
h1到h6为标题标签，数字越大字体越小
2.2.2段落标签
在HTML中，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签
p标签表示一个段落：
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
2.2.3 换行标签
换行标签 <br/> 是一个单标签 :
这是一个换行<br/>
这是一个换行<br/>
这是一个换行<br/>
注意<br/>标签换行后上下不会有空隙
2.2.4 图片标签
img标签必须带有 src 属性，表示图片上的路径，这个路径可以是文件路径也可以是网络上的路径：
<img src = "https://pic1.zhimg.com/50/v2-1c0dc06731a92e82e56e2357affd66a6_hd.jpg?source=1940ef5c">
注意：当图片路径是文件路径时，默认路径位于HTML文件所在的位置，例如我把上面图片保存到对应html文件的同级目录下：
此时代码就可以变成：
<img src = "dog.png"> 
也可以写作绝对路径。
img标签还可以添加其他属性来控制图片大小等：
- width/height：控制宽度高度单位是px（像素），高度和宽度一般改一个就行，另一个会等比例缩小，否则图片会变形
- border：边框，参数是宽度的像素。一般使用CSS来设定
<img src = "dog.png" width = "200px" border = "5px">
2.2.5 超链接标签
超链接标签<a></a>必须有href属性，表示点击后跳转到哪个页面：
<a href = "http://www.baidu.com">百度</a>
点击即可跳转到百度。
链接分为外部链接和内部链接，外部链接即跳转到其他网站，内不链接即网站内部页面之间的链接，例如再创建一个test1.html，在test1中写以下代码：
<a href = "test.html">跳转到test</a>
我们点击即可跳转到test页面
不过我们发现这个页面是在test1这个页面打开的，这是因为<a></a>标签有个属性为target,这个属性的默认值是 _self 如果把它改为 _blank 就会在一个新的页面打开：
<a href = "test.html" target = "_blank">跳转到test</a>如果开发时还不知道要跳转到哪个页面，可以使用#作为href的值占位：
<a href="#">空链接</a>此时跳转的页面是当前页面。
2.3 表格标签
- table标签：代表整个表格
- tr标签：代表表格的一行
- td标签：代表一个单元格
- table 包含 tr，tr包含td
我们可以使用快捷键快速生成表格：
table>tr*3>td*2输入上述代码后点击回车即可生成一个3行两列的表格模板：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>一个<tr></tr>代表一行，一个<td></td>代表一个单元格，我们给表格中添加一些数据：
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
我们还可以使用border标签加上边框
<table border = "5px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
2.4 表单标签
表单标签是让用户输入信息的重要途经
2.4.1 input标签
input标签用于创建各种输入控件，单行文本框，按钮，单选框，多选框。
属性：
- type：type必须有，代表创建的控件类型取值有很多，button，checkbox，text，file，image，password，radio等。
- name：给input起了个名字。
- value：input中的默认值。
- checked：默认被选中，用于单选按钮和多选按钮。
下面介绍一些常用的类型：
1. 按钮：
<input type = "button" value = "我是一个按钮">
2. 文本框
<input type = "text" placeholder = "输入文本">placeholder代表占位符，即输入框中的提示
3. 密码框
密码框的输入内容不会显示出来。
4. 单选按钮
<input type = "radio">A.这是一个选项<br/>
<input type = "radio">B.这是一个选项<br/>
<input type = "radio">C.这是一个选项<br/>
由于这个三个选项并不知道他们之间是一组，所以并不能达到单选的目的，此时我们就需要使用name属性，name相同的单选标签就会视为一组：
<input type = "radio" name = "name">A.这是一个选项<br/>
<input type = "radio" name = "name">B.这是一个选项<br/>
<input type = "radio" name = "name">C.这是一个选项<br/>此时就能达到单选功能了。
5. 提交按钮
提交按钮必须放在form标签中，form标签描述了要把数据按照什么方式提交到哪个页面中，关于form需要结合后端代码来进一步了解，我们后续再继续介绍。
<form action = "test.html">
<input type = "button" value = "我是一个按钮">
<input type = "text" name = "文本" placeholder = "输入文本">
<input type = "password" name = "password"><br/>
<input type = "radio" name = "sex" value = "1">A.男<br/>
<input type = "radio" name = "sex" value = "2">B.女<br/>
<input type = "radio" name = "sex" value = "0">C.其他<br/>
<input type = "submit" value = "提交">
</form>
action属性代表要提交到的页面，我们提交的内容是以键值对形式的 name和value属性的内容
点击提交：
我们发现提交的信息出现在了test页面的url中。
2.4.2 select标签
select标签用于生成下拉菜单，下拉菜单的选项需要放在option标签中：
<select>
<option>深圳</option>
<option>杭州</option>
<option selected = "selected">北京</option>
</select>option中定义 selected = "selected"表示默认选中。
2.4.3 textarea标签
textarea标签用于生成一个文本域：
<textarea rows = "3" clos = "100">文本域</textarea>生成一个额3行100列的文本域
2.5 无语义标签 div span
div标签,division的缩写,含义是分割
span标签,含义是跨度
div和span都是用来标识一部分内容的，为了方便对这块内容做一个整体的美化等等，下期介绍css时会详细解释。
例如上述代码，如果我想对某句话进行修饰，我们需要先选中这句话，此时就需要一个标签来帮助我们选中，于是我们给他们加上标签，就可以通过标签来选中
div会独占一行，span不会独占一行，
