HTML 初识-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73070900/article/details/132042170

本文介绍了HTML的基本结构，包括doctype声明、头部元素（如charset和viewport）、body部分以及如何在VSCode中编写代码。同时讲解了HTML中的注释方法和标签之间的父子、兄弟及嵌套关系。

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

前言

30 HTML5 Tutorials & Resources for Web Developers 2018 - Colorlib

HTML的基本骨架

HTML基本骨架是构建网页的最基本的结果。

<!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>
    
</body>
</html>

<!DOCTYPE html>：指定文档类型为HTML5。
<html>：表示整个HTML文档的根元素。
<head>：包含了与文档相关的设置和定义，如字符编码、标题等。
<title>：定义网页的标题，将显示在浏览器的标题栏或标签页上。
<body>：包含了网页的主要内容。

VSCode中可以输入！再按Tab/Enter 自动生成此代码。

注释

在HTML中，注释是一种用于添加说明、解释或临时禁用代码的工具。注释不会在浏览器中显示，它们只对代码进行注解的文本。

可以使用  来添加注释

例如：

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

VSCode中快捷键为Ctrl+/

标签关系

在HTML中，标签之间存在不同的关系，用于组织和描述文档结构。

以下是一些常见的标签关系：

1.父子关系：一个标签可以包含另一个标签。被包含的标签称为子标签，而包含其他标记的标签称为父标签。

例如：

<div>
    <p>这是一个段落。</p>
</div>

其中，<div>为父标签，<p>为子标签。

2.兄弟关系：具有相同的父级标签的标签称为兄弟标签。它们在文档中相邻出现，并具有相同的层级关系。

例如：

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

其中，<li>标签是兄弟标签，它们都是<ul>的子标签。

3.嵌套关系：标签可以嵌套在其他标签内部，形成多层次的嵌套结构。

例如：

<article>
    <h1>文章标题</h1>
    <p>第一段内容</p>
    <section>
        <h2>子标题</h2>
        <p>子标题下的内容</p>
    </section>
</article>

其中，<h1>、<p>、<section>标签都是<article>标签的子标签,<h2>和<p>则是<section>标签的子标签。