html基础-1-树形标签结构

最新推荐文章于 2025-10-13 02:00:00 发布

原创最新推荐文章于 2025-10-13 02:00:00 发布 · 6.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html

Web前端专栏收录该内容

25 篇文章

订阅专栏

本文通过解析百度网页源码，深入浅出地介绍了HTML的基本结构和语法要素，包括标签树的概念、成对标签与自结束标签的区别，以及注释的使用。

文章目录

一窥度娘
html概述
html语法要素
参考

一窥度娘

既然html是描述网页的结构性语言，那我们先看度娘，整体感受一下网页的结构。
以百度搜索页为例，F12打开网页源码，我们在右侧的源码看到整体结构，红色字体标志的不同标签，正是这些标语法签构成了html语法的基础。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xBpzAu0E-1588688259784)(evernotecid://7526024C-9E45-4F5B-9ACD-8B8C99291F7B/appyinxiangcom/20641877/ENResource/p1572)]
我们可以看到网页的结构层次<html><head><body>，分别展开每个标签下的内容可以看到更多细节。

<html>
<head>
    <title></title> 
    <meta> #单个标签，键值对格式
    <link> #单个标签，键值对格式
    <style></type>
    <script></script>
<body>
    <div></div>
    <script></script>

展开head标签可以看到meta,link,title,style以及script等子标签。
在这里插入图片描述
折叠head标签后再查看body标签，可以看到div,input,script等标签。不必计较细节，这里我们至少一窥html源码的究竟。

html概述

在简单的浏览完度娘的源码后，我们至少有了一个初步的印象，html其实就是由不同的标签组成的（当然你可以浏览更多网页的源码，淘宝、京东、豆瓣、亚马逊、当当。。。）。
专业来说，html是一门基于不同标签识别渲染网页源码的结构性语言，个人觉得html不能称之为一门编程语言，因为它的工作非常简单–就是渲染网页结构。

<html>
<!--
注释
-->
    <head>
    <!-- 
    head负责设置网页头部
    -->
    
        <title>显示在浏览器头部</title>
    </head>
    <body>
    <!-- 
    body负责设置网页主体
    -->
        <h1>春晓</h1>
        <p><春眠不觉晓</p>
        <p><处处闻啼鸟</p>
        <p><夜来风雨声</p>
        <p><花落知多少</p>
    </body>
</html>

将以上代码复制保存为.html文件，通过浏览器打开效果如下：
在这里插入图片描述
通过上述示例，我们更加清晰的看到，head负责对网页的一些整体属性的设置，例如title网页在浏览器头部的显示名称，以及后续会学到的style对整个网页主体的样式的设置；而body则负责设置网页主体的显示内容，例如h1设置一级标题，p设置段落等。
html的更多常用标签如下：
在这里插入图片描述
总结来说，html源码就是由不同标签组成的一棵标签树，所有标签均由html根标签衍生，head和body是html的两条大腿。

html语法要素

通过上述示例，可以了解语法要素包括：

树形标签，所有标签均源自html根标签，向下衍生更多功能标签分支，以撑起各种各样的网页
标签成对，绝大多数标签均需成对书写，例如<html></html>，<head></head>,少数是单标签(自结束标签)，例如<meta>,<image>以及<a>
注释：，即可单行也可多行注释，但是不能嵌套注释

参考

尚硅谷李立超web教程
 W3Cshool