更多分享欢迎关注公众号

1、HTML5（H5）基本组成

H5 是一堆标签组成，包括双标签和单标签两种，双标签例如：与，单标签例如：。

DOCTYPE html>

html lang="en">

head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
head>
body>
    h1>一级标题名h1>

body>
html>

H5 文件首行要有 声明，DOCTYPE 是 doument type 的缩写。使用该声明避免统一代码、不同浏览器却不同渲染效果。

H5 基本骨架包括：html、head、body、title、meta。其中，html 定义了 HTML 文档，限定文档的起始和结束；head 定义文档头部，描述了文档的属性和信息，包含 title 等；body 定义文档主体，这部分内容是直接显示给用户。VS Code 中使用 ！Tab 自动生成基本骨架。

title 定义文档的标题，直接显示在浏览器的标题栏，是 head 中必须的。

meta 定义网页的属性、关键词等，常用的是定义文档的编码格式：

2、标题

标题共 6 个级别，使用

格式。自动生成 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="green" width="1200px" size="20px" align="">

4、图片

使用代码插入图片：

    h2 align="center">加入图片h2>
    
    img src="C:UsersYINPictures 联想截图 lenovo20221202104707.png" alt="">
    img src="C:UsersYINPictures 联想截图 lenovo20221202104707.png" alt="最后一分钟" width="500px" title="zuihouyifenzhong">
    img src="./ 子集图片 / 子集.png" alt="" title="ziji">
    img src="../ 父级.png" alt="" title="父级图">

图片这里有时候不一定必须使用绝对路径，还有时候会使用相对路径。相对路径就牵扯代码和图片的关系，有子级关系、父级关系和同级关系。如果子级，可以直接 / 到图片路径访问，父级关系需要使用 ../ 路径访问，同级关系使用 ./ 或者直接访问，这里和 markdown 一样的，很好理解。

5、超文本链接

默认情况下，超文本链接没打开时，一般是蓝色字体并有下划线；访问过后是紫色并带有下划线；点击链接时是红色。将光标放在链接上时，光标会编程一个小手光标样式，且会在浏览器的右下角或右下角显示链接的网址。

a href="https://www.mi.com/html/index.html"> 小米官网链接 a>

a