HTML零基础入门教学 第五期：语义化标签与完整页面布局

 

本期学习目标 

1. 理解什么是 HTML语义化，明白为什么不要通篇只用 div

2. 掌握网页标准结构五件套：头部、导航、主体、侧边栏、底部

3. 能搭建 标准、规范、适合SEO 的完整网页骨架

4. 可以独立完成「个人主页、资讯页面、展示型网站」基础布局

 

一、什么是语义化标签

 

通俗解释：

每个标签有自己的专属含义，看标签就知道这一块是干嘛的。

 

– 无语义标签： div 、 span （只用来装内容，没有任何意义）

– 语义化标签：浏览器、搜索引擎、机器人都能识别页面结构

 

好处：

 

– 代码整洁、可读性高

– 方便自己后期维护

– 利于搜索引擎收录（网站排名更好）

– 是正规网站开发的标准写法

 

二、六大核心语义化布局标签（必背）

 

1. <header> 页面头部

 

存放：网站Logo、标题、标语、顶部信息

一个页面通常只有一个

 

2. <nav> 导航栏

 

存放：导航菜单、栏目跳转链接

就是我们第三期学的「列表导航」专用容器

 

3. <main> 网页主体内容

 

存放：页面核心正文、文章、数据、列表、表格

一个页面只能有一个 main

 

4. <section> 内容区块

 

把主体内容分块分组

比如：推荐区、新闻区、功能介绍区

 

5. <aside> 侧边栏

 

存放：侧边推荐、热门排行、公告、广告

 

6. <footer> 页面底部

 

存放：版权信息、备案号、联系方式、友情链接

 

三、语义化 vs 传统 div 对比

 

老式写法（不推荐）

 

全部用 div，看不出

头部<div class=”

底部

 

 

 

四、辅助常用语义化标签

 

<article> 文章模块

 

专门放独立完整内容

例如：单篇新闻、单条公告、独立卡片

 

<h1~h6> 标题语义

 

h1：页面主标题（唯一）

h2：大板块标题

h3-h6：逐级小标题

 

<p> 段落语义

 

专门存放正文文本，是标准段落标签

 

五、标准网页完整骨架结构（万能模板）

 

所有网站都遵循这个结构，可直接复制当模板

 

 

 

六、知识点重点总结

 

1. 语义化 = 标签有含义，结构清晰

2. 标准布局顺序：header → nav → main → footer

3. main 唯一、h1 唯一，是规范写法

4. section 用来分区块，article 用来放独立内容

5. 从此告别通篇 div，写出专业级网页结构

 

本期能力提升

 

现在你已经掌握：

 

– 基础文本标签

– 列表、表格排版

– 表单交互页面

– 标准网页整体布局

 

已经可以独立搭建「完整静态网页」

 

下期预告

 

第六期：HTML超链接与图片、音视频多媒体

学会插入图片、跳转链接、背景音乐、视频播放，让网页图文并茂！