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

相关推荐
weixin_382395236 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__6 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.7 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~8 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华9 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子11 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅11 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni11 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学13 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端