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

devtools/2024/9/23 3:24:15/

文章目录

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的网页帅气!


http://www.ppmy.cn/devtools/39727.html

相关文章

golang内置包里面的sort.Slice 切片排序函数使用示例

go语言里面用的最多的数据类型应该是切片Slice了&#xff0c; 今天就给大家介绍这个go内置包里面的切片排序函数的使用方法 函数原型 func Slice(x any, less func(i, j int) bool) 参数说明 这个函数有2个参数&#xff0c; 第一个是你要进行排序的slice切片&#xff0c;地个…

数字孪生引擎国产信创环境适配靠谱么?

近期我们组织了一次国产化环境适配以及产品国产化产品替换的交流&#xff0c;虽然从属于不同的业务条线&#xff0c;但是在过去一段时间多多少少都承受不同程度的信创压力&#xff0c;尤其是自然资源业务方面&#xff0c;由于自然资源大多数的业务是属于强GIS的范畴&#xff0c…

服务器拒绝登陆:Permission denied (publickey,password)

在账号密码正确的情况下&#xff0c;登陆服务器出现Permission denied (publickey,password)错误。 主要原因是shell软件&#xff08;比如zsh软件&#xff09;卸载后&#xff0c;主机的默认shell配置未改成可使用的shell软件&#xff08;比如系统默认的bash&#xff09; 通过…

抖音小店怎么做?做店笔记分享来了,新手可学习!

大家好&#xff0c;我是电商糖果 抖音小店怎么做&#xff1f;这个问题是所有新手商家都会提问的问题。 很多朋友可能店开好几个月了&#xff0c;一直都不会运营&#xff0c;店铺没有流量&#xff0c;迟迟不出单。 下面糖果就来分享一下我自己做店总结的笔记&#xff0c;新手…

layui 数据表格 拖动 列、行 位置 重新排序 等

先贴官网 layui官网 &#xff1b; 再贴一个要使用的 插件官网 &#xff1a; layui-soul-table 示例文档 &#xff1b; 这个插件功能很多 看到那个下载 后悔没早点知道啊 还自己写了 一个下载 可以到官网看看 很多实用的 需要引入的 js layui.config({base: rootPath…

Ubuntu添加网络映射路径

参考资料 linux挂在阿里云盘&#xff08;webdav协议&#xff09;给服务器扩容、备份数据等_davfs2-CSDN博客 Linux将WebDAV为本地磁盘 - 夏日冰菓 (lincloud.pro) systemd系统开机运行rc.local_rc-local.service: failed to execute command: exec -CSDN博客 系统版本&#xff…

BroadcastChannel:跨标签页通信

目前浏览器跨标签页通信的方式有很多&#xff0c;比如&#xff1a;websocket、针对LocalStorage使用window.onstorage、window.postmessage。 本文将用BroadcastChannel实现同一域名下两个标签页间消息的收和发 一、全局创建通信通道 const channel new BroadcastChannel(cha…

浅谈消息队列和云存储

1970年代末&#xff0c;消息系统用于管理多主机的打印作业&#xff0c;这种削峰解耦的能力逐渐被标准化为“点对点模型”和稍复杂的“发布订阅模型”&#xff0c;实现了数据处理的分布式协同。随着时代的发展&#xff0c;Kafka&#xff0c;Amazon SQS&#xff0c;RocketMQ&…