前言
随着人工智能的不断发展，HTML这门技术也越来越重要，很多人都开启了HTML学习，本文就介绍了HTML的基础内容。
一、HTML是什么？
HTML是超文本标记语言的缩写，它是一种用于创建网页的标准标记语言。HTML语言使用一系列标签来描述文本、图像、音频、视频和其他内容的外观和布局，并指示浏览器如何呈现该内容。HTML语言通常与CSS（层叠样式表）和JavaScript一起使用，这些语言一起构成了现代网站的基础。
二、使用工具
Visual Studio Code
官网下载地址 Visual Studio Code - Code Editing. Redefined
浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）都可以
三、基本命令
1、html架构
-
<!DOCTYPE>声明
<!DOCTYPE>声明是用于指定文档类型的一种标记。它告诉浏览器或其他解析器，应该使用哪个规范来解析文档。HTML文档通常使用以下此种形式的<!DOCTYPE>声明：
<!DOCTYPE html>
此声明指定文档类型为HTML5。在此之前，不同版本的HTML都有不同的<!DOCTYPE>声明形式。此标记位于HTML文档的开头，是必需的，因为它能确保浏览器正确地解释HTML。
-
<html>标签
<html>标签位于<!DOCTYPE>声明之后，被称之为根标签。根标签主要用于告知浏览器该文件是一个HTML文档。其中，<html>标签标志着HTML文档的开始，</html>标签则标志着HTML文档的结束，它们之间是文档的头部和主题内容。
-
<head>标签
头部标记（head）是HTML文档中的一个标记，它用于在网页中定义文档的头部部分。该标记包含诸如网页标题、样式表（CSS）、脚本、元数据等信息，这些信息可以被浏览器和搜索引擎等程序读取并使用。在HTML文档中，头部标记通常是通过<head>和</head>标签所包含的所有文本内容来定义的。
-
<body>标签
<body>标签用于定义HTML文档所要显示的内容，也被称为头部标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内，才能最终展示给用户。
基本框架代码显示：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>2、常用标签
1. 单标签
单标签也被称为空标签，是指用一个标签就可以完整的描述某个功能。语法格式为：<标签名/>
如<hr/>就是单标签，改标签用于定义一条水平线。
2.双标签
双标签也称体标签，由开始标签和结束标签组成。语法格式为：<标签名>内容</标签名>
如<html></html>,<body></body>都是双标签。
3.注释标签<!-- -->
注释标签是在HTML和其他标记语言中使用的特殊标签，用于将注释添加到文档中。注释标签以"<!"开始，以">"结束，并以两个短横线" -- "分隔注释内容。注释标签通常用于代码中添加有关代码功能或结构的额外信息，而这些信息不会在浏览器中显示给用户。语法格式：<!-- -->
4.标签的关系
标签有两种关系，一种是父子关系（嵌套关系），一种是兄弟关系（并列关系）
<body>
<!-- 在此代码块当中div和span，p和span就属于父子关系，而div和p 则是属于兄弟关系 -->
<div>
<span></span>
</div>
<p>
<span></span>
</p>
</body>5. 标题标签
场景：在新闻和文章的页面中，都离不开标题 ，用来突出显示文章主题
代码：
<body>
<h1>嗨，欢迎一起学习前端</h1>
<h2>嗨，欢迎一起学习前端</h2>
<h3>嗨，欢迎一起学习前端</h3>
<h4>嗨，欢迎一起学习前端</h4>
<h5>嗨，欢迎一起学习前端</h5>
<h6>嗨，欢迎一起学习前端</h6>
</body>
效果：
语义：1~6级标题，重要程度依次递减
特点：
• 文字都有加粗
• 文字都有变大，并且从h1 → h6文字逐渐减小
• 独占一行
注意事项：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
标题标签一共有几个？分别表示什么含义？
• h1标签：一级标题
• h2标签：二级标题
• h3标签：三级标题
• h4标签：四级标题
• h5标签：五级标题
• h6标签：六级标题
标题标签有哪些特点？
• 文字都有加粗
• 文字都有变大，但是从h1 → h6文字逐渐减小
• 独占一行
6.段落标签<p>
场景：在新闻和文章的页面中，用于分段显示
代码： <p>嗨，欢迎一起学习前端</p>
<body>
嗨，欢迎一起学习前端
嗨，欢迎一起学习前端
<p>嗨，欢迎一起学习前端</p>
</body>
效果:
语义：段落
特点：
• 段落之间存在间隙
• 独占一行
7.水平线标签<hr>
场景：分割不同主题内容的水平线
代码：
<body>
嗨，欢迎一起学习前端<br>
嗨，欢迎一起学习前端
<p>嗨，欢迎一起学习前端</p>
<hr>
</body>效果：
语义：主题的分割转换
特点：
• 单标签
• 在页面中显示一条水平线
8.换行标签<br>
场景：让文字强制换行显示
代码：
<body>
嗨，欢迎一起学习前端<br>
嗨，欢迎一起学习前端
<p>嗨，欢迎一起学习前端</p>
<br>
</body>
效果：
语义：换行
特点：
• 单标签
• 让文字强制换行
9.文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
<
<body>
<strong>加粗</strong>
<b>加粗2</b>
<ins>下划线1</ins>
<u>下划线2</u>
<em>倾斜1</em>
<i>倾斜2</i>
<del>删除线1</del>
<s>删除线2</s>
</body>效果：
语义：突出重要性的强调语境
使用原则：标签语义化
• 即：根据语义选择对应正确的标签
• 如：需要写标题，就使用h系列标签
• 如：需要写段落，就使用p标签
推荐使用：
• strong、ins、em、del，表示的强调语义更强烈！
总结
以上就是今天要讲的内容，本文仅仅简单介绍了什么是HTML，而且对他的一些基本构架和基本命令进行了讲解，同时如果有啥讲解的不对的地方也希望大家能够不吝赐教，让我及时更正。如果觉得我写的不错的话可以点个赞加个关注，感谢大家。
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
