零基础HTML教程(32)--HTML5语义化标签

文章目录

  • [1. div时代](#1. div时代)
  • [2. div的缺点](#2. div的缺点)
  • [3. 语义化标签](#3. 语义化标签)
  • [4. 语义化标签有哪些](#4. 语义化标签有哪些)
  • [5. 实战演练](#5. 实战演练)
  • [6. 小结](#6. 小结)

1. div时代

我是2009年开始学习网页开发的,那时候HTML里面到处是div。

这么说吧,那时候div就是网页的骨架,支撑着网页的主结构。

2. div的缺点

div作为逻辑分组标签,用来分组肯定没问题。

但是逻辑这块,它的能力有点不足。

例如我网页上有个标题栏、导航栏,还有一个内容区域。如果用div的话,得这么写。

html 复制代码
	<!-- 标题栏 -->
    <div>
        <h1>钓鱼爱好者网</h1>
    </div>
    <!-- 导航栏 -->
    <div>
        <a>钓鱼技巧</a>
        <a>钓竿购买</a>
        <a>鱼饵购买</a>
    </div>
    <!-- 内容区域 -->
    <div>
        钓鱼使人快乐!
    </div>

div本身并不能表达当前分组是干啥的,需要借助注释。

但是需要注意的是,注释只能给程序员自己看,对于浏览器、搜索引擎而言,他们还是不知道你这个分组是干啥的。

3. 语义化标签

所以我们还是需要更能表达真实含义的标签。

例如我们如果通过一个标签,说明当前内容是导航栏,那么手机浏览器就可以在空间不足时将导航栏折叠。视障人士专用浏览器就可以读出导航栏的内容。这是不是会更好?

总结来说,不用语义化标签,网页也能正常显示,但是用了语义化标签,网页会更完美。

4. 语义化标签有哪些

看图:

解释下:

  • header表示网页的头部,一般用来放标题栏
  • nav表示导航区域
  • main表示主要内容区域
  • aside表示侧边栏
  • article一般用来表示一篇文章
  • section表示内容区域的一个部分
  • footer表示网页的底部,一般用来放版本信息

这里需要注意的是,这些语义化标签并没有规定死就得怎么用。例如header你既可以放网页的标题栏,也可以让它作为网页一个新闻模块的标题。

我个人建议是,把这些语义化标签用到网页的主框架上,也就是说大结构上。例如内容区域就用main表示,main里面再分几个大区域的话用section,如果section里面再细分就可以用div了。

5. 实战演练

那么我们看一个比较标准的、采用了语义化标签的网页:

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>钓鱼网</title>
</head>

<body>
    <header>
        <h1>钓鱼网</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">钓具</a></li>
            <li><a href="#">技巧</a></li>
            <li><a href="#">名人</a></li>
            <li><a href="#">视频</a></li>
        </ul>
    </nav>
    <main>
        <p>钓鱼是捕捉鱼类的一种方法。</p>
        <p>钓鱼的主要工具有钓杆、鱼饵。</p>
        <p>钓杆一般由竹子或塑料轻而有力的杆状物质制成,钓杆和鱼饵用丝线联接。</p>
        <p>一般的鱼饵可以是蚯蚓、米饭、菜叶、苍蝇、蛆等,现代有专门制作好的鱼饵出售。</p>
        <p>鱼饵可以直接挂在丝线上,但有个鱼钩会更好,对不同的鱼有特殊的专制鱼钩。</p>
    </main>
    <footer>
        版权所有 侵权必究
    </footer>
</body>

</html>

6. 小结

用了语义化标签,就是比全是div的网页帅气!

相关推荐
quan26319 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路10 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app