HTML 初

前言


HTML的基本骨架

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中,注释是一种用于添加说明、解释或临时禁用代码的工具。注释不会在浏览器中显示,它们只对代码进行注解的文本。

可以使用 <!-- --> 来添加注释

例如:

html 复制代码
<!-- 这是一个注释 -->

VSCode中快捷键为Ctrl+/


标签关系

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

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

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

例如:

html 复制代码
<div>
    <p>这是一个段落。</p>
</div>

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


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

例如:

html 复制代码
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

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


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

例如:

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

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

相关推荐
假如让我当三天老蒯几秒前
Composables和Utils的区别(自学用)
前端
kungggyoyoyo3 分钟前
从0开发一套geo优化软件:系统定位与整体架构
前端
用户713874229005 分钟前
PKCE 的 S256 算法深度剖析:从协议设计到密码学原理
前端
闪闪发光得欧5 分钟前
StreamTokenizer的源码分析和使用方法详细分析
前端
李剑一6 分钟前
华为一面就问网络安全?面试官:请简述一下 XSS/CSRF 的攻击面与前端侧的防护
前端·面试
竹林8189 分钟前
被合约事件搞到失眠?我踩了三天坑,终于写出一份监听智能合约事件的实战指南
前端·javascript
用户0595401744611 分钟前
把 AI 记忆验证从手工 Log 换成 Pytest+Mem0,上下文丢失 bug 减少 90%
前端·css
艾利克斯冰24 分钟前
TypeScript 静态类型入门教程:可选静态类型与类型推导详
前端·javascript·typescript
GuWenyue28 分钟前
告别命名混乱!5步掌握BEM规范,写出易维护的前端页面
前端·javascript·面试
小林ixn29 分钟前
BEM 命名规范与 CSS 重置:打造优雅的按钮页面实战
前端·css