HTML的本质——网页的“骨架”

向葭奔赴♡2025-10-10 9:39

目录

一：HTML的本质------网页的"骨架"

核心概念

二：必学基础标签清单

2.1、表格标签

2.2、链接标签

2.3、排版标签

2.4、框架标签

2.5、表单标签

2.6、meta标签

2.7、总结

三：语义化标签（HTML5精华！）

四：实战技巧与避坑指南

代码规范：

常用属性：

SEO优化：

兼容性：

一：HTML的本质------网页的"骨架"

HTML（HyperText Markup Language）不是编程语言，而是标记语言，用来定义网页的结构和内容。就像盖房子要先搭钢筋骨架一样，HTML就是网页的骨架！

核心概念
  1. 标签（Tags） ：用尖括号包裹的关键词，例如 <div>、<p>。
    • 多数标签成对出现（如 <p>内容</p>），少数自闭合（如 <img/>
    • 属性（Attributes） ：为标签添加额外信息，比如 <a href="https://example.com">链接</a> 中的 href

二：必学基础标签清单

2.1、表格标签

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>
    <!--表格标签 table  行标签：tr  列标签：td   表格边框有无属性：border=0表示没有比边框  border=1表示有边框-->
    <!--内边框：cellspacing  外边框：cellpadding
    align表示向那边对齐，align=center表示居中，align=left向左对齐
    标签th表示表头标签--效果：居中加粗
-->
    
    <table border="1" cellspacing="10" cellpadding="20">
        <!--tr年龄和姓名在同一行-->
        <tr>
            <!--th表示是表头内容-->
            <th>姓名</th> 
            <!--b表示加粗，td表示列，年龄和姓名各占一列-->
            <td><b>年龄</b></td> 
        </tr>
         <!--tr表示Tom和18在同一行-->
        <tr>
             <!--td表示是各站一列-->
            <td>Tom</td> 
            <td>18</td> 
        </tr>
        
        <tr>
            <td>Rose</td> 
            <td>20</td> 
        </tr>
    </table>
</body>
</html>

表格标签 table

行标签：tr

列标签：td

表格边框有无属性：border=0表示没有比边框 border=1表示有边框

内边框：cellspacing

外边框：cellpadding

align表示向那边对齐，align=center表示居中，align=left向左对齐

标签th表示表头标签--效果：居中加粗

效果展示

2.2、链接标签

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>
    <!--target="_blank"即点击超链接会打开一个新的页面框而不会直接覆盖现有的框-->
    <!--链接到同一文件夹下的超链接写法-->
    <a href="排版标签.html"target="_blank">排版标签</a>
    <!--链接到非本文件夹下的超链接写法  需要链接某个网页的完整地址-->
    <hr>
    <a href="https://ndky.fanya.chaoxing.com/portal"target="_blank">学习通</a>
    <!--
        href属性的构成：
        协议名（http)+协议内容
    -->
    <hr>
    <!--mailto协议-->
    <a href="mailto:xxxx@itcast.cn">联系我们</a>
    <!--a标签的锚点功能-->
    <!--定义锚点-->
    <a name="_abc"></a>
    <!--图像标签-->
    <br>
    <img scr="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275biD5biD5LiA5LqM5oOF5L6j5aS05YOPXzE3MzI2NTM2NzcuMzY3NDAz%27/0.png" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275biD5biD5LiA5LqM5oOF5L6j5aS05YOPXzE3MzI2NTM2NzcuMzY3NDAz%27/0.png" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275biD5biD5LiA5LqM5oOF5L6j5aS05YOPXzE3MzI2NTM2NzcuMzY3NDAz%27/0.png" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275biD5biD5LiA5LqM5oOF5L6j5aS05YOPXzE3MzI2NTM2NzcuMzY3NDAz%27/0.png" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    <img scr="https://ts1.tc.mm.bing.net/th/id/OIP-C.9Jyfb_kv-9h16zH-lR07iwHaEK?w=268&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="一二宝和布哥哥"title="一二宝和布哥哥"/><br>
    
    <!--回到顶部 #表示回到当前页面的某个位置-->
    <a href="#_abc">--回到顶部--</a>
</body>
</html>

<!--target="_blank"即点击超链接会打开一个新的页面框而不会直接覆盖现有的框-->
<!--链接到同一文件夹下的超链接写法-->
<a href="排版标签.html"target="_blank">排版标签</a>
<!--链接到非本文件夹下的超链接写法 需要链接某个网页的完整地址-->
<hr>
<a href="https://ndky.fanya.chaoxing.com/portal"target="_blank">学习通</a>
<!--
href属性的构成：
协议名（http)+协议内容
-->
<hr>
<!--mailto协议-->
<a href="mailto:xxxx@itcast.cn">联系我们</a>
<!--a标签的锚点功能-->
<!--定义锚点-->
<a name="_abc"></a>

//效果：定义锚点，点击abc之后返回最开始页面
<!--图像标签-->
<br>

效果图

2.3、排版标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排版标签</title>
</head>
<body>
    <!--br/是换行标签-->
    <!--h1是一级标题标签并且会自动换行，，h1-h6是一级到六级标签-->
    <h1>静夜思</h1>
    <!--p标签是段落标签会自动换行-->
    <!--font是属性标签-->
    <p><font color = "red size="5">床前明月光</font></p>
    <p>疑是地上霜</p>
    <!--hr/标签是水平线标签-->
    <hr>
    <p><font color="blue size="5">举头望明月</font></p>
    <p>低头思故乡</p>
</body>
</html>

<h1>------<h6>:表示标题1到标题6

<br>换行

<hr>水平线

<p>正文

<b>/<strong>加粗

<font>属性：加粗，颜色等

<title>标题

效果

2.4、框架标签

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>
<!--row表示竖着放置，三七分-->
<!--cols表示横着放-->
<frameset row="30%,70%" >
        <frame scr="表格标记.html" />
        <frameset cols="30%,70%">
                  <frame scr="链接标签.html" />
                  <frame scr="排版标签.html" />
        </frameset> 
</frameset> 
</html>

<!--row表示竖着放置，三七分-->

<!--cols表示横着放-->

2.5、表单标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标记</title>
</head>
<body>
    <!--form用于标识表单的范围
    action表示提交到哪里一般是提交到服务器
    #代表当前目录
    name属性作为提交的键值对
    type属性决定提交的类型
    -->
    <form action="#">
        用户名：<input type="text" name="username" /><br>
        <!--提交按钮submit-->
        <input type="submit" />

    </form>
</body>
</html>
html 复制代码 
<form action="/提交地址" method="POST">
  <label>输入框：<input type="text" placeholder="提示文本"></label>
  <label>单选：<input type="radio" name="gender" value="male"></label>
  <label>复选框：<input type="checkbox" value="agree"></label>
  <select>
    <option>下拉选项1</option>
    <option>下拉选项2</option>
  </select>
  <textarea rows="4">多行文本</textarea>
  <button type="submit">提交</button>
</form>

form action='#' //表示该表单的范围用于当前目录

type决定提交的类型

name提交的键值对

2.6、meta标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>meta标签</title>
</head>
<body>
    <!--3秒后刷新到百度网站  refersh表示刷新-->
    <meta http-equiv="Refersh"content="3; url=http://www.baidu.com">
   <!--最终输入的文本类型utf-8-->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"
</body>
</html>

2.7、总结

html 复制代码 
<!DOCTYPE html>  <!-- 声明文档类型为HTML5 -->
<html>
<head>
  <title>网页标题</title>  <!-- 浏览器标签页显示的文字 -->
  <meta charset="UTF-8">  <!-- 指定字符编码 -->
</head>
<body>
  <h1>一级标题</h1>  <!-- 共6级标题，h1最大，h6最小 -->
  <p>段落文本</p>
  <a href="https://example.com">超链接</a>
  <img src="图片路径" alt="图片描述">
  <ul>
    <li>无序列表项</li>  <!-- 配合CSS可做导航栏 -->
  </ul>
  <div>块级容器</div>  <!-- 用于布局分组 -->
  <span>行内容器</span> <!-- 包裹少量文本样式 -->
</body>
</html>

三：语义化标签（HTML5精华！）

html 复制代码 
<header>页眉</header>
<nav>导航栏</nav>
<main>主内容区</main>
<section>独立区块（如章节）</section>
<article>文章/博客内容</article>
<aside>侧边栏（广告/备注）</aside>
<footer>页脚</footer>

好处：搜索引擎和屏幕阅读器能更好理解页面结构！

四：实战技巧与避坑指南

代码规范：

  • 标签小写，属性用双引号，缩进用2空格（非Tab）。
  • 注释写清楚：<!-- 这是注释 -->。

常用属性：

  • class：为元素定义样式类（可重复使用）。
  • id：唯一标识（常用于JS操作）。

SEO优化：

  • 合理使用 title、meta description、h1~h6 标签。

兼容性：

  • 老旧浏览器可能不支持HTML5标签，可通过CSS添加 display: block; 解决。
相关推荐
2501_918126918 小时前
使用HTML和Python开发街霸游戏
python·游戏·html
清欢ysy8 小时前
Cannot find module ‘@next/bundle-analyzer‘
开发语言·javascript·arcgis
小岛前端8 小时前
Vue3 键盘快捷键的高效开发！
前端·vue.js·开源
江城开朗的豌豆8 小时前
小程序避坑指南：这些兼容性问题你遇到了几个？
前端·javascript·微信小程序
云浪8 小时前
说透 Suspense 组件的实现原理
前端·javascript·vue.js
我有一棵树8 小时前
浏览器/用户代理默认样式、any-link 伪类选择器
前端·css·html
江城开朗的豌豆8 小时前
玩转小程序页面跳转：我的路由实战笔记
前端·javascript·微信小程序
前端 贾公子9 小时前
Vue 响应式高阶 API - effectScope
前端·javascript·vue.js
幸运黒锦鲤9 小时前
npm 扩展Vite、Element-plus 、Windcss、Vue Router
前端·npm·node.js
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02GitHub 镜像站点03UV安装并设置国内源04智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践0546个Nano-banana 精选提示词，持续更新中06GitLab 零基础入门指南：从安装到项目管理全流程07Linux下V2Ray安装配置指南08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09jdk21下载、安装（Windows、Linux、macOS）10KGG转MP3工具|非KGM文件|解密音频