当前位置：首页 > news >正文

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

news 2025/10/8 5:52:25

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

核心概念

二：必学基础标签清单

2.1、表格标签

2.2、链接标签

2.3、排版标签

2.4、框架标签

2.5、表单标签

2.6、meta标签

2.7、总结

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

四：实战技巧与避坑指南

代码规范：

常用属性：

SEO优化：

兼容性：

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

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

核心概念

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

二：必学基础标签清单

2.1、表格标签

<!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  外边框：cellpaddingalign表示向那边对齐，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、链接标签

<!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>

<a href="排版标签.html"target="_blank">排版标签</a>

<hr>
<a href="https://ndky.fanya.chaoxing.com/portal"target="_blank">学习通</a>

<hr>

<a href="mailto:xxxx@itcast.cn">联系我们</a>


<a name="_abc"></a>

//效果：定义锚点，点击abc之后返回最开始页面

<br>

效果图

2.3、排版标签

<!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、框架标签

<!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>

2.5、表单标签

<!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>

<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标签

<!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、总结

<!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精华！）

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

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