更多分享欢迎关注公众号
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 
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
