1. 认识HTML标签
HTML的代码是由“标签”构成的。
例如：
<body>hello</body>
说明：
body为标签名，必须放在<>中
大部分标签都是成对出现，为开始标签，为结束标签
少数标签只有开始标签，称为单标签
开始标签与结束标签之间的内容为标签的内容，示例的内容为hello
开始标签中间可能会带有属性，id属性相当于给这个标签设置了一个唯一的标识符
例如：
<body id="b1">hello</body>
2. HTML文件基本结构
<html> <head> <title>第一个html页面</title> </head> <body> hello word </body> </html>
说明：
html标签是整个html文件的根标签（最顶层标签）
head标签中写页面的属性，示例中的title标签为标题
body标签中写的是页面上显示的内容
2.1 运行一个HTML文件
我们可以选在在idea中或者在vscode中创建一个html文件，利用“！+ Tab”键可以快速生成代码框架，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
细节解释：（了解即可，不必做过于深刻研究）
· 称为DTD（文档定义类型），描述当前文件是一个HTML5的文件
· 其中的long属性表示当前页面是一个“英文页面”
· 描述页面字符的编码方式，没有这行可能会导致中文乱码
· ，其中viewport指的是设备屏幕上能用来显示我们网页的那一块区域，后面的是在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。
我们可以在body中写内容，然后运行，我这里用的是VScode，直接右键按下，如图所示：
运行结果：
2.2 标签层次结构
· 父子关系 ·兄弟关系
<html> <head> <title>第一个html页面</title> </head> <body> hello word </body> </html>
说明：
head，body是html的子标签
title是head的子标签，head是title的父标签
head，body是兄弟标签
3. HTML的常见标签
注释标签
注释不会显示在界面上，目的是提高代码的可读性
快捷键：ctrl + / 可以快速进行注释与取消注释
标题标签：h1-h6
有6个，从h1-h6，数字越大，则字体越小
<h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>
段落标签：p
<p>床前明月光</p> <p>疑是地上霜</p>
注意：
p标签之间存在一个空隙
当前的p标签描述的段落没有缩进（后面学习css的时候会学习）
html内容首尾处的换行，空格均无效
在html中文字之间输入的多个空格只相当于一个空格
html中直接输入换行不会换行，而是相当于一个空格
换行标签：br
br是一个单标签
<br/>是规范写法，不建议写成<br> 举头望明月 <br/> 低头思故乡
格式化标签
· 加粗：strong标签，b标签
· 倾斜：em标签，i标签
· 删除线：del标签，s标签
· 下划线：ins标签，u标签
<strong>strong加粗</strong> <b>b加粗</b> <em>em倾斜</em> <i>i倾斜</i> <del>del删除线</del> <s>s删除线</s> <ins>ins下划线</ins> <u>u下划线</u>
使用css也可以完成类似效果，实际开发中以css方式为主
图片标签：img
img标签必须带有src属性，表示图片的路径
<img src="xxx.jpg">
此时要把xxx.jpg这个图片文件放到html中的同级目录中
img标签的其他属性：
· alt：替换文本，当图片不能正确显示的时候，会显示一个替换的文字
· title：提示文本，鼠标放到图片上，就会有提示
· width/height：控制宽度高度，高度和宽度一般改一个就可以，另外一个会等比例缩放
· border：边框，参数是宽度的像素，一般用css'来设定
例如：
<img src="tiger.jpg" title="老虎" width="500px" border="5px">
注意：
多个属性之间用空格间隔
属性不分先后
属性使用键值对的格式来表示
超链接标签：a
href：必须具备，表示点击后就会跳转到哪个页面
target：打开方式，默认是_self,_blank会用新的标签页打开
例：
<a href="http://www.baidu.com">百度</a>
点击就会跳转到百度页面
· 空链接：使用#在href中占位
<a href="#">空连接</a>
· 下载链接：href对应的路径是一个文件（可以使用zip文件）
<a href="test.zip">下载文件</a>
· 网页元素链接：可以给图片等任何元素添加链接
<a href="http://www.baidu.com"><img src="tiger.jpg"></a>
· 锚点链接：可以快速定位到页面中的某个位置
<a href="#one">第一集</a> <a href="#two">第二集</a> <a href="#three">第三集</a> <p id="one"> 111<br> 222 </p> <p id="two"> 333<br> 444 </p> <p id="three"> 555<br> 666 </p>
禁止a标签跳转： 或者
表格标签
· thread：表格的头部区域（注意和th区分，范围比th大）
表格标签有一些属性，可以用于设置大小边框等，这些属性要放到table标签中
align：表格相对于周围元素的对齐方式（不是内部元素的对齐方式）
border：表示边框，1表示有边框（数字越大，边框越粗），“ ” 表示没有边框
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500px" heigth="500px"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>小兰</td> <td>女</td> <td>18</td> </tr> <tr> <td>小花</td> <td>女</td> <td>19</td> </tr> </table>
列表标签
· 自定义列表，dl（总标签），dt（小标题），dd（围绕标题来说明）
ul，ol标签中，只能放li标签，dl标签中只能放dt，dd
<h3>无序列表</h3> <ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul> <h3>有序列表</h3> <ol> <li>小学</li> <li>中学</li> <li>大学</li> </ol> <h3>自定义列表</h3> <dl> <dt>蔬菜：</dt> <dd>豆腐</dd> <dd>菠菜</dd> <dd>西红柿</dd> </dl>
表单标签
form标签
<form action="test.html"> ...[form的内容] </form>
描述了要把数据按照什么格式，提交到哪个页面中，关于form需要结合服务器，网络编程，来进一步理解。
input标签
· type，取值种类：button，checkbox，text，file，image，password，password，radio等
· name：给input起名字，对于单选框按钮，具有相同的name才能多选一
<input type="text">
<input type="password">
<input type="radio" name="aaa">男 <input type="radio" name="aaa">女
<input type="checkbox">吃饭 <input type="checkbox">睡觉 <input type="checkbox">打球 <input type="checkbox">跑步
<input type="button" value="按钮">
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空"> </form>
说明：当文本框输入内容时，点击清空即可清空文本框中输入的内容
<input type="file">
label标签
搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验
· for属性：指定当前label和哪个相同id的input标签对应
<label for="aaa">男</label> <input id="aaa" type="radio" name="sex"> <label for="bbb">女</label> <input id="bbb" type="radio" name="sex">
说明：这里点击汉字也可以选中，label标签就是用来实现这个功能的
select标签
option中定义selected="selected"表示默认选中
<select> <option>---请选择从哪里来---</option> <option>北京</option> <option selected="selected">上海</option> <option>厦门</option> </select>
textarea标签
<textarea rows="3" cols="50"> 众鸟高飞尽 孤云独去闲 相看两不厌 </textarea>
无语义标签：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>
4. Emment常用快捷键
5. HTML特殊字符
<div> </div> <div><</div> <div>></div> <div>&</div>
