更多分享欢迎关注公众号
1、HTML5（H5）基本组成
H5是一堆标签组成，包括双标签和单标签两种，双标签例如：<html>与</html>，单标签例如：。
<!-- 使用Ctrl /进行快捷注释，使用下面的代码进行文档声明 --> <!DOCTYPE html> <!-- 使用下面的代码定义language为English --> <html lang="en"> <!-- 定义编码格式、标题等 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>一级标题名</h1> </body> </html>
H5文件首行要有<!DOCTYPE html>声明，DOCTYPE是doument type的缩写。使用该声明避免统一代码、不同浏览器却不同渲染效果。
H5基本骨架包括：html、head、body、title、meta。其中，html定义了HTML文档，限定文档的起始和结束；head定义文档头部，描述了文档的属性和信息，包含title等；body定义文档主体，这部分内容是直接显示给用户。VS Code中使用！ Tab自动生成基本骨架。
title定义文档的标题，直接显示在浏览器的标题栏，是head中必须的。
meta定义网页的属性、关键词等，常用的是定义文档的编码格式：<meta charset="UTF-8">
2、标题
标题共6个级别，使用<h1>一级标题名</h1>格式。自动生成h1到h6快捷键是输入：h$*6
注意：（1）正确使用文本标题，不要因为标题可以实现加粗效果等而运用标题；（2）按照内容重要性来使用标题级别。
可以如下添加标题属性，但是不推荐：
<!-- 不推荐按照如下方式添加属性 --> <h1 align="left">一级标题名</h1> <h2 align="center">二级标题名</h2>
可以安装open in browser插件，实现快速在浏览器中打开当前编辑的网页。
3、段落（p）、换行（br）、水平线（hr）
<p>新建段落</p> <P>段落内换行使用br标签<br>换行</P> <!-- 使用hr创建横线，可以设置属性：color、width(线的长度，单位是像素)、size、algin(默认居中) --> <hr color="green" width="1200px" size="20px" align="">
4、图片<img>
使用代码插入图片：
<h2 align="center">加入图片</h2> <!-- img属性包括src：路径和名，alt：图片无法显示时的替代文本；width或height：宽或高，一般只设置宽度或高度一个，不改图片比例；title：鼠标选题提示 --> <img src="C:\Users\YIN\Pictures\联想截图\lenovo20221202104707.png" alt=""> <img src="C:\Users\YIN\Pictures\联想截图\lenovo20221202104707.png" alt="最后一分钟" width="500px" title="zuihouyifenzhong"> <img src="./子集图片/子集.png" alt="" title="ziji"> <img src="../父级.png" alt="" title="父级图">
图片这里有时候不一定必须使用绝对路径，还有时候会使用相对路径。相对路径就牵扯代码和图片的关系，有子级关系、父级关系和同级关系。如果子级，可以直接/到图片路径访问，父级关系需要使用../路径访问，同级关系使用./或者直接访问，这里和markdown一样的，很好理解。
5、超文本链接<a> </a>
默认情况下，超文本链接没打开时，一般是蓝色字体并有下划线；访问过后是紫色并带有下划线；点击链接时是红色。将光标放在链接上时，光标会编程一个小手光标样式，且会在浏览器的右下角或右下角显示链接的网址。
<!-- 使用href属性来描述标签地址 --> <a href="https://www.mi.com/html/index.html"> 小米官网链接 </a> <!-- 使用图片作为小米官网链接 --> <a
