本文是Web前端系列技术之HTML基础的第一篇，介绍了HTML的起源、作用和基本语法。讲解了HTML标签，包括标题、段落、换行、字体样式等，并提到了特殊字符和标签类型的概念。
Web前端系列技术之HTML基础（从入门开始）①
从这里开始，我便开始记录每天重新学习巩固HTML语言的过程，这不仅仅是为了提高自己的熟练度，更是为了让自己的博客一步一步的见证我走向前端全栈工程师这条路，感谢大家支持！
文章目录
一、前言
什么是HTML语言？为什么要使用到HTML语言？该如何使用HTML语言呢？
其实在人类不断发展的社会历程中，Web技术的发展也逐渐从1.0迭代到了4.0，但是目前来看Web4.0的发展还没有达到真正炉火纯青的地步，这或许是由于技术瓶颈，也或许是因为人类目前还没有真正清楚Web4.0可以带来什么！！！（期待2030年的实现）
| web历史版本 | 表现方式 |
|---|---|
| Web_1.0 | 纯静态页面（类似海报，不可交互） |
| Web_2.0 | 动态页面（实现可交互网页的时代） |
| Web_3.0 | 与其他网站交互，实现第三方信息平台对多家网站信息整合 |
| Web_4.0 | 无所不在的网 |
那正处于Web3.0时代的我们，为了在web前端开发方面有所理解，那就少不了要去了解**【HTML】**
1. 那什么是HTML语言呢？
HTML：称为超文本标记语言，是一种标记语言；它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
2. 为什么要使用到HTML语言？
Web前端技术开发是少不了HTML文本编写的，而HTML文本就是由HTML命令组成的描述性文本，它是构成Web页面的骨架，通俗点说：HTML就是Web的骨架，只有它的存在，才能足以支撑整个Web项目的开发 ---------------------------<HTML百度百科>
3. 该如何使用HTML语言呢？
使用HTML语言就要先学会与编写HTML文本相关的标签元素，学会编辑HTML文本才能达到使用HTML语言的效果，这里用到的软件是国产的Hbuilder，可点击下载安装
安装完成之后，准备工作就已就绪了，就接下来就开始正式介绍HTML基础知识
二、HTML基础语法及格式
下列代码就是HTML的基本语法结构和编写格式，同时还总结的相对应的注释说明（注释部分的内容是不会被呈现在网页中的）
网页区域：<html></html>
头部区域：<head></head>
内容区域：<body></body>
<!DOCTYPE html> <!--版本声明-->
<html>
<head>
<title>网页的标题</title>
<meta name="Keywords" content="html,网页"/> <!--搜索关键字-->
<meta name="description" content="学习网页的基本结构"/> <!--网页详细内容-->
<meta charset="UTF-8"/> <!--编码格式-->
</head>
<body>
web网页主体内容 <!--网页中所要展示出来的内容都需要写在body标签中-->
</body>
</html>
三、HTML常用标签
首先了解【块级标签/元素】和【行内标签/元素】的区别：
①【块级标签/元素】：标签/元素会自动换行，简单理解就是，不管在一行之中写多少字符，其标签/元素都要占据一行的区域；
②【行内标签/元素】：标签/元素不会自动换行，简单理解就是，在一行之中写多少字符，其标签/元素就要占据多少字符的区域；**
1. 标题标签
六个等级：h1——h6（从一级标签到六级标签），如代码所示：
<!-- 标题标签 -->
<h1>一碗邹❤️一级标签</h1> <!--一个页面最好只能有一个h1标签，目的就是为了防止搜索引擎误判为非法刷流的网页-->
<h2>一碗邹❤️二级标签</h2> <!--标题标签属于块级标签-->
<h3>一碗邹❤️三级标签</h3>
<h4>一碗邹❤️四级标签</h4>
<h5>一碗邹❤️五级标签</h5>
<h6>一碗邹❤️六级标签</h6>
2. 段落标签
p为段落标签，会自动换行，但是段落内不进行换行，换行后行与行之间的间隙较大，如代码所示：
<!-- 段落标签 -->
<p>《梦华录》主演：刘亦菲、陈晓、柳岩、林允儿、管云鹏等</p>
<p>"东京，真是富贵迷人眼，深情不可许"</p> <!--段落标签属于块级标签-->
3. 换行标签
br为换行标签，属于单标签，换行后行与行之间的间隙较小，如代码所示：
<!-- 换行标签 -->
《梦华录》主演：刘亦菲、陈晓、柳岩、林允儿、管云鹏等
<br />"东京，真是富贵迷人眼，深情不可许"
段落标签和换行标签的效果对比图：
4. 字体加粗标签（了解即可，后续需结合CSS实现）
字体加粗标签有两个：b标签和strong标签，均属于行内标签，其加粗效果是一致的，如代码所示：
<!-- 粗体标签 -->
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<p><b>落霞与孤鹜齐飞，秋水共长天一色</b></p> <!--b标签属于行内标签-->
<strong>落霞与孤鹜齐飞，秋水共长天一色</strong> <!--strong标签属于行内标签-->
效果对比图：
5. 字体斜体标签（了解即可，后续需结合CSS实现）
字体加粗标签有三个：i标签、em标签和cite标签，均属于行内标签，其斜体效果是一致的，如代码所示：
<!-- 斜体标签 -->
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<p><i>落霞与孤鹜齐飞，秋水共长天一色</i></p> <!--i标签属于行内标签-->
最低0.47元/天 解锁文章
扫一扫
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
