前端开发入门教程，web前端零基础html5 +css3+前端项目笔记（更新中）

HTML入门：基础标签与代码规范

原创已于 2023-02-21 20:32:09 修改 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #css

于 2023-02-21 20:19:05 首次发布

学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括web标准的构成，使用VSCode作为开发工具，强调代码注释的重要性。文章详细讲解了HTML标签的结构，如双标签与单标签，以及父子和兄弟关系。此外，还列举了常用的HTML标签，如标题、段落、换行、水平分割线、文本格式化、图片、音频、视频和超链接标签，并提到了路径的绝对与相对概念。

学习视频

HTML初识

web标准的构成

工具准备-VSCode

由于国内下载慢，故有如下下载链接：

下载链接

安装好后需要用到的插件名为open in browser

需要汉化的直接在拓展商店里查询 Chinese即可，拓展商店如下图所示：

代码规范

1、代码注释

作为一名合格的程序员，在写代码时，其有一定的注释是很有必要的，其注释的作用如下所示：

HTML标签的组成和关系

1、标签的结构

双标签如：<body></body>、<html></html>等等

单标签如：<br>、<hr>等等

2、标签间的关系

（1）、父子关系（嵌套关系）

              <head>
                <title></title>
              </head>

（2）、兄弟关系（并列关系）

<head></head>
<title></title>

常用标签

1、标题标签

<h1>一级标题</h1> <h2>二级标题</h2> ......

共6级标签，其特点如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>  
    <h2>二级标题</h2>
    <h3>三级标题</h3>  
    <h4>四级标题</h4>  
    <h5>五级标题</h5>  
    <h6>六级标题</h6>  
</body>
</html>

（注：在VSCode中，在空html文件中，输入!和回车即可生成模板）

网页显示结果如图所示：

2、段落标签

段落标签<p></p>用于分段显示，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

3、换行标签

4、水平分割线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr>
    <p>这是一个段落</p>
    <hr>
</body>
</html>