Web前端开发（HTML部分之基础概念篇二）——HTML语法规范、HTML基本结构标签、HTML基本架构解析

目录

                  一、HTML语法规范

       1.基本语法

       2.标签关系

二、HTML基本结构标签

       1.结构标签种类及作用

       2.基本结构框架图

三、HTML基本架构解析​编辑

       1.文档类型声明标签

       2.lang语言

       3.字符集

       4.meta标签

---

一、HTML语法规范

1.基本语法

HTML标签由尖括号< >包围，<html>为开始标签，</html>为结束标签

2.标签关系

   ①包含关系（父子关系）          ②并列关系（兄弟关系）

           <head>                                      <head></head>

                   <title></title>                     <body><body>

            </head>

---

二、HTML基本结构标签

1.结构标签种类及作用

<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档头部	head中必须设置title标签
<title></title>	文档标题	页面的网页名称
<body></body>	文档主体	页面内容基本都放在body里

2.基本结构框架图

---

三、HTML基本架构解析

1.文档类型声明标签

<!DOCTYPE>为文档类型声明，告诉浏览器用哪种HTML版本显示网页

<!DOCTYPE html>表示当前页采用HTML5版本显示网页

2.lang语言

作用：定义当前文档显示的语言

种类：①en表示英文  ②zh-CN表示中文

3.字符集

<meta charset="UTF-8"> 在<meta>标签内，通过<meta>标签的charset属性来规定HTML文档用哪种字符编码。注：UTF-8称为万国码，基本包含了全世界所有国家需要用到的字符。使用UTF-8字符编码，可以有效防止乱码。

4.meta标签

基础篇二涉及不到该标签，此处做简单说明供大家先了解一下。

<meta>标签提供了HTML文档的元数据,元数据通常以名称/值对出现,meta有个必须的属性content用于表示需要设置的项的值。

width=device-width：告诉浏览器将网页的宽度设置为设备的屏幕宽度，设置initial-scale=1.0将网页的初始缩放比例设置为 1:1，即网页以原始大小显示，避免用户在加载页面时看到页面被默认缩放或出现横向滚动条的情况，让用户可以直接看到完整的页面内容。这两个参数的设置实现了响应式布局，使网页能够根据设备屏幕的宽度自动调整布局和样式，确保在各种设备上（如手机、平板、电脑等）都能有良好的显示效果，提高用户体验。

meta标签详解，转自作者庸人°，感兴趣且学有余力的小伙伴们可以提前了解

下一篇：Web前端开发（HTML部分之基础概念篇三）——网页开发工具之vscode