序言
HTML认知
HTML：超文本标记语言
注释的表达形式：ctrl + /
标题和段落
标题：h系列标签
//ctrl + D 可以快速修改文字
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
文字都有加粗、变大，从h1-->h2文字主键减小。独占一行
段落标签：<p>
在新闻和文章页面中，用于分段显示
使用Alt+Z：启动vscode自动换行
<br>：换行符，强制让文字换行；
<p>好好学习<br>天天向上</p>
<hr>:水平分割线，主题的分割转换
<h1>标题</h1>
<hr>
<p>正文</p>
文本格式化标签：
单词和字母都是一样的效果的。如果内容非常重要、进行突出显示，那么就用后面的单词标签。
这些文本格式化标签是不会自动换行的！！！
<strong>加粗</strong>
<b>加粗</b>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
图片的使用
<img src = "" alt = "">：在网页中显示图片。他是一个单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置！
src："./错误路径图片加载会失败"
alt："是替换文本，如果图片不显示，我就通过alt提示一下"
title：提示文本，当鼠标悬停时，才显示的文本，title属性不仅用于图片标签，还可以用于其他标签。
<img src="tupian.jpg" alt = "图片消失了" title = "鼠标放在这，我就告诉你显示什么" >
路径问题
页面要加载图片，需要先找到对应的图片。
绝对路径：通常从盘符开始的路径
相对路径（用的多）：
同级别： ./xxx.png：./ 表示当前目录；
上级目录：../xxx.png：跳出当前文件夹，后面直接写目标文件
../：专门用来跳出当前文件的文件夹的；
如果当前文件没有被文件夹包裹，那么访问其他路径的时候，直接写./xxx就行
音频标签
<audio src = "./music.mp3" controls autoplay loop></audio>
视频标签
<video src = "" controls autoplay loop></video>
<muted>：播放、但是没有声音
链接标签
<a href = "http://www.baidu.com">跳转到百度</a>
<a href = "#">空连接</a>
通过target属性来控制目标网页的打开方式
列表标签
无序列表：
<ul>：包裹无序列表，里面只允许包含li标签
<li>：里面可以包含任意内容
<ul>
<li>榴莲</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
有序列表：将ul换成了ol
<ol>
<li>张三：100</li>
<li>李四：80</li>
</ol>
自定义列表：网页的最下面通常使用
dl：表示自定义列表的整体
dt：自定义列表的标题
dd：自定义列表中的内容
<dl>
<dt>我是标题</dt>
<dd>我是内容1</dd>
<dd>我是内容2</dd>
</dl>
dd前面会默认显示缩进效果
表格标签
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</table>
表格标题和表头单元格标签
表格的结构标签（了解）
样式上没有变化，但是更易于浏览以及浏览器的渲染。
合并单元格
rowspan：跨行合并--》多行单元格垂直合并 colspan：跨列合并--》多列单元格水平合并
注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
表单
input系列标签
文本框：<input type = "text">
<br>
密码框（书写的内容会加密）：<input type = "password">
单选按钮：<input type = "radio">
多选框（选中打钩）：<input type = "checkbox">
上传文件：<input type = "file">
提交按钮：<input type = "submit">
重置按钮：<input type = "rest">
普通按钮：<input type = "button">
type = "text"或者type = "password"，如果想提示用户输入内容文本，可以通过placeholder属性：
<input type = "text" placeholder = "请输入用户名">
单选功能和默认选中功能
性别：<input type = "radio" name = "sex">男
<input type = "radio" name = "sex">女
通过设置name = ""，来实现单选功能，只能在这些name中选择一个。
<input type = "radio" name = "sex" checked>
多选框checkbox、并且默认打钩
<input type = "checkbox' checked>
上传多个文件
<input type = "file" multiple>
按钮
要想实现按钮功能，需要放在<form>标签中，通过该标签实现按钮的提交、重置功能
<form action = "提交后的地方">
用户名：<input type = "text">
密码：<input type = "password">
<input type = "submit" value = "给按钮添加显示文字">
<input type = "reset">
<input type = "button" value = "给按钮添加显示文字">
</form>
button按钮标签
button也可以做一个标签来作为按钮出现。刚刚学的是input的button
<button>我是按钮</button>
<button type = "submit">提交按钮</button>
<button type = "reset">重置按钮</button>
select下拉菜单标签
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
如果不写selected，默认就显示的是第一个
textarea文本域标签
<textarea cols = "60" rows = "30">
</textarea>
一般我们不设置cols和rows的值，而是通过css来设置。
label标签
以前我是用文字+radio来让用户进行选择。现在我通过label标签，就算用户点的是文字，也相当于点击了radio。
第一种方法：通过label标签把内容包裹起来，然后在表单标签上添加id属性，最后给label标签的for属性设置对应的id值
性别：
<input type = "radio" name = "sex" id = "nan"><label for = "nan">男</label>
<input type = "radio" name = "sex">女
第二种方法：直接使用label标签把文本和表单一起包裹起来，然后把lebel的for属性删除
<label>
<input type = "radio" name = "sex">女
</label>
语义化标签
没有语义的布局标签-div和span
有语义的标签
这些新特性的HTML5新版本中推出的，手机端经常会用到。
<body>
<header>网页头部</header>
<nav>网页导航</nav>
<aside>网页侧边栏</aside>
<section>网页区块区域</section>
<article>网页文章区域</article>
<footer>网页底部</footer>
</body>
字符实体
我们浏览器不认识多个空格，再多的空格也只认一个。
要想在浏览器中显示空格效果，就需要通过字符实体来实现。
知道第一个就行了： 
