目录
1. 认识HTML标签
HTML的代码是由“标签”构成的。
例如：
<body>hello</body> 说明：
body为标签名，必须放在<>中
大部分标签都是成对出现，<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>
细节解释：（了解即可，不必做过于深刻研究）
· <!DOCTYPE html> 称为DTD（文档定义类型），描述当前文件是一个HTML5的文件
· <html lang="en"> 其中的long属性表示当前页面是一个“英文页面”
· <meta charset="UTF-8"> 描述页面字符的编码方式，没有这行可能会导致中文乱码
· <meta name="viewport" content="width=device-width, initial-scale=1.0">，其中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标签跳转： <a href="javascript:void(0);"> 或者 <a href="javascript:;">
表格标签
· table标签：表示整个表格
· tr：表示表格的一行b
· td：表示一个单元格
· th：表示表头单元格，会居中加粗
· thread：表格的头部区域（注意和th区分，范围比th大）
· tboday：表格的主体区域
table包含tr，tr包含了td或者th
表格标签有一些属性，可以用于设置大小边框等，这些属性要放到table标签中
align：表格相对于周围元素的对齐方式（不是内部元素的对齐方式）
border：表示边框，1表示有边框（数字越大，边框越粗），“ ” 表示没有边框
cellpadding：内容距离边框的距离，默认1像素
cellspacing：单元格之间的距离，默认为2像素
width/height：设置尺寸
例：
<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>
列表标签
主要用来布局
· 无序列表：ul ，li
· 有序列表：ol ，li
· 自定义列表，dl（总标签），dt（小标题），dd（围绕标题来说明）
注意：
元素之间是并列关系
ul，ol标签中，只能放li标签，dl标签中只能放dt，dd
li中可以放其他标签
示例：
<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标签
表单控件：输入框，提交按钮，重点是input标签
form标签
<form action="test.html">
...[form的内容]
</form>描述了要把数据按照什么格式，提交到哪个页面中，关于form需要结合服务器，网络编程，来进一步理解。
input标签
各种输入的控件，单行文本框，单选框，复选框
· type，取值种类：button，checkbox，text，file，image，password，password，radio等
· name：给input起名字，对于单选框按钮，具有相同的name才能多选一
· value：input中的默认值
· checked：默认被选中（用于单选按钮，多选按钮）
· maxlength：设定最大长度
1. 文本框
<input type="text">
2. 密码框
<input type="password">
3. 单选框
<input type="radio" name="aaa">男
<input type="radio" name="aaa">女
4. 复选框
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打球
<input type="checkbox">跑步
5. 普通按钮
<input type="button" value="按钮">
6. 提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
7. 清空按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
说明：当文本框输入内容时，点击清空即可清空文本框中输入的内容
8. 选择文件
<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>
注意：文本域中的内容，就是默认内容，注意空格也会有影响
rows和cols代表行和列
无语义标签：div & 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>
4. Emment常用快捷键
· 快捷输入标签：input[tab]
· 快捷输入多个标签：div3[tab]
· 标签带id：div#sex[tab]
· 标签带类名：div.sex[tab]
· 标签带子元素：ul>li*3[tab]
· 标签带兄弟元素：span+span
· 标签带内容：div{hello}
· 标签带内容带编号：div{$.hello}
5. HTML特殊字符
有些特殊的字符在html文件中是不能直接来表示的，例：
空格： 
小于号：<
大于号：>
按位与：&
<div> </div>
<div><</div>
<div>></div>
<div>&</div>
6. 小结
HTML只是描述了页面的骨架结构
使用css可以针对页面进一步美化