（零基础）HTML基础结构分析与语法

RE_从零开始的敲代码生活

已于 2023-10-18 19:59:07 修改

阅读量23

点赞数 2

分类专栏： HTML 文章标签： html 前端

于 2023-10-17 21:07:20 首次发布

本文链接：https://blog.csdn.net/m0_64034224/article/details/133886986

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用软件

vscode、火狐浏览器

前言

大家好，我是蕾姆。苦于之前学艺不精，如今只能进行系统的复习来回忆起大脑中关于HTML的内容。

经过学习之后，我根据自身的经验和所学知识，想要尽可能简单但是全面的将html的知识框架梳理出来，于是便有了这个系列。

事先强调，笔者在今后的文章中所写出的一切内容，若笔者也不太清楚原因，则会直接展示代码效果，不会强行解释，所以诸君可放心观看。

必需拓展

vscode的功能十分齐全，为开发者的日常使用提供了大量的拓展，在这里我贴一张图，希望能对诸位像我一样的“初学者”们提供一定的帮助。

基础框架

首先，我们先需要了解一个快捷键！（英文状态）

（建议安装上图拓展，不然后续可能有些快捷键无法使用）

在vscode中创建一个html文件后，我们直接输入英文状态的！就可以快捷生成一个基础的代码模板。如图

既然是初识HTML，那自然先需要了解一下在这个基本模板中，每一行代码的意义是什么。

1.<!DOCTYPE html>

这是HTML5的标准文档声明，它可以告诉浏览器在解析我们的网页时要按照HTML5的标准进行解析。

备注：每个浏览器都有一套自己的解析标准，如果不加这个声明，可能在不同的浏览器中就会有不同的展示结果。

<!DOCTYPE html>

2.<html lang="en">

这是这个页面的根标签，也叫做根元素。一个页面最多只能有一个根标签（根元素），而所有的代码内容全部要写到这个根标签中。

其中lang="en"表示该html文件中的代码的语言是英语，lang是language的缩写。

<html lang="en">
<head>
</head>
<body>
</body>
</html>

3.<head></head>

文件头部标签，该标签中包含的内容不会直接显示在浏览器的视口区域。该标签中内容的作用是帮助浏览器正确解析网页。

<head>
......
</head>

4.<meta charset="UTF-8">

meta是单元素（单标签），同时也是自结束标签。它可以用来设置网页的一些元数据，比如网页的字符集，关键字、简介等。

charset="UTF-8"指的是文本内容的字符编码，浏览器会根据字符编码进行解析。

常见的字符编码有：gb2312、gbk、unicode、UTF-8

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

5.<title>Document</title>

被title标签包裹住的Document就是当前文件加载为网页时的选项卡标题，其中的内容可以自行修改。如图

（这破水印怎么去啊）

<title>Document</title>

6.<body></body>

这部分是网页的主体部分，在body中的内容都会显示在浏览器的视口区域中。

<body>
......
</body>

最后，我们使用</html>结尾，与前文中的根标签相互呼应。

这就涉及到了接下来要说的部分，HTML的基本语法。

基本语法

一、注释

在HTML中，有着统一的注释格式，快捷键是 ctrl+/

<!--这是一段注释-->

作为开发者，我们应该拥有良好的开发习惯，合理地应用注释可以让我们的代码在整体的阅读上更加舒适。而注释的作用，便是对某一行代码的解释说明，方便代码阅读和维护。

二、标签元素

标签又分为单标签与双标签。

比如前文中的meta就是单标签，只由一个标签组成，后面我们还会复习到<hr>分割线、<br>换行等许多单标签。

双标签则是由<开始标签>元素内容</结束标签>组成，其中开始标签与结束标签是相同的。例如

<html></html>
<head></head>
<body></body>
<table></table>
<div></div>
......

三、属性

笔者初学的时候，对这个词到底是个什么意思苦恼了许久，后来想了个较为简单的理解办法。

（引用百科）属性：我们把一个事物的性质与关系，都叫作事物的属性。事物与属性是不可分的，事物都是有属性的事物，属性也都是事物的属性。

在HTML中，上述的“事物”就是我们所说的标签，所以属性指的就是标签的属性。属性是一个“整体”，由属性名和属性值组成，中间使用等号连接。

<img src="" alt="这是一个图片标签">

其中src和alt就是img的属性，“这是一个图片标签”就是alt的属性值。

html标签都拥有的属性

id 唯一标识一个标签

class 标识一类标签、操作一类标签

style 给标签设置样式

title 标签提示说明鼠标悬浮到标签上提示说明

四、空白语法

通俗点说就是无论敲了多少个空格，在网页展示时都会被解析成一个

五、字符实体

在HTML中，许多字符有着其他的含义。例如小于号<和大于号>，浏览器在解析时会误认为它们是标签。所以我们写HTML中的一些特殊符号时，要使用字符实体（character entities)替代。

字符实体以&符开始，以；结尾。例如

&nbsp;  空格
&quot;  "
&gt;  >
&lt;  <
&copy  ©
......

以下是一些常见的字符实体

显示结果	描述	实体名称	实体编号
	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
'	撇号	&apos (IE不支持)	&#39
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

RE_从零开始的敲代码生活

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（零基础）HTML基础结构分析与语法

大家好，我是蕾姆。苦于之前学艺不精，如今只能进行系统的复习来回忆起大脑中关于HTML的内容。经过学习之后，我根据自身的经验和所学知识，想要尽可能简单但是全面的将html的知识框架梳理出来，于是便有了这个系列。事先强调，笔者在今后的文章中所写出的一切内容，若笔者也不太清楚原因，则会直接展示代码效果，不会强行解释，所以诸君可放心观看。
复制链接

扫一扫