前言
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>标签的子标签。