小白前端学习日记（二）HTML基础语法与标签1

最新推荐文章于 2025-08-18 22:30:00 发布

见咲

最新推荐文章于 2025-08-18 22:30:00 发布

阅读量685

点赞数 5

CC 4.0 BY-SA版权

分类专栏：小白前端学习日记系列文章标签： html html5

本文链接：https://blog.youkuaiyun.com/weixin_44237608/article/details/115180606

小白前端学习日记系列专栏收录该内容

4 篇文章

订阅专栏

这篇博客是小白前端学习日记系列的第二篇，主要介绍了HTML的基础语法，包括文档类型声明、HTML骨架结构、标题标签、段落标签p、div标签以及注释和转义字符的使用。重点讲解了标题标签在SEO中的作用，div标签在布局中的重要性，以及如何通过注释提高代码可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小白前端学习日记系列

小白前端学习日记（一）认识前端

前言

事不宜迟，赶快进行三个基本能力中相较来说最简单的HTML的学习吧！

一、HTML的骨架

在编写HTML时我们们首先要写出以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

不要被这一大长串吓到，在VSCode编译器中html文件第一行打出“!”便会自动得到这些代码。我们来认识一下这些标签都是什么。

<!DOCTYPE html>

HTML文件第一行必须是DTD（Document Type Definition
，文档类型声明），不写DTD会引发浏览器的一些兼容问题。

<html lang="en">
.
.
.
</html>

<html></html>标签对，将<head></head>标签对和<body></body>标签对放入其中，lang属性为网页语言，英语为en，中文为zh。
注意：head标签对和body标签对需要在html标签对中缩进

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<head></head>标签对中是网页的配置，而并非网页头部
head标签对中<meta charset="UTF-8">为设置字符集，<meta>标签为元标签，表示网页的基础配置；
UTF-8为制作网页所使用的字符集，与gb2312的区别可参考下图。
UTF-8与gb2312的区别
在<head></head>中的<title></title>中书写网页的标题，文字会显示在浏览器的标签栏上。title也是搜索引擎收录网站时显示的标题，所以我们需要合理的设置title以吸引用户的点击。
使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能。

<meta name="Keywords" content="关键词1，关键词2，关键词3">
<meta name="Description" content="页面描述是搜索引擎显示的简介词语">

<body></body>标签对中用来写网页的主要内容，包括网页头部，内容，页脚等等。

二、标签

HTML叫做“超文本标记语言”，超文本标记就是标签，这些标签拥有不同的功能。
标签通常成对儿出现；但meta标签为单标签，只有起始标签。
标签可以给文字设置不同的“语义”。

1.标题标签

	<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

实际显示效果如图。
标题标签
搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容比如网页的logo等放到<h1></h1>中以加大其权重。<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊。
六级标题虽然很像普通文本进行了加粗，但不应该仅仅为了加粗而使用<h6></h6>标签对。

2.段落标签——p标签对

	<p>段落标签，p是英语paragraph的意思</p>
    <p>在HTML文件中即使代码换行了，页面显示效果也不会换行</p>
    <p>所以必须要把任何段落都放入段落标签中</p>
    <p>段落标签中不能嵌套标题标签和其他段落标签</p>

在网页中显示的效果如图。
段落标签

3.div标签

div是英语division“分割”的缩写，<div></div>标签对用来将相关的内容组合到一起，以和其
他内容分割，使文档结构更清晰。最重要的一点是，它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。
div标签对的应用是html中非常重要的知识点。

	<div>
        <h3>标题三</h3>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>

4.注释与转义字符

书写代码时，我们需要写好注释使日后再阅读代码或者他人阅读代码提供提示。
为了在书写“<”“>”等符号时不被当作标签，我们需要使用转义字符来表示它们。

	<!-- 注释内容 -->
    <p>&lt为小于号</p>
    <p>&gt为大于号</p>
    <p>&nbsp为不会被折叠的空格</p>
    <p>&copy为版权符号</p>

在网页中显示的效果如图。
转义符号展示

总结

通过此次的学习，我们认识了HTML骨架，标题标签，段落标签，div标签，注释写法与部分转义字符写法。下次的学习内容将会是列表标签和多媒体语义化标签。