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

server/2024/9/23 3:24:16/

文章目录

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/server/39865.html

相关文章

时间复杂度与空间复杂度(上篇)

目录 前言时间复杂度 前言 算法在运行的过程中要消耗时间资源和空间资源 所以衡量一个算法的好坏要看空间复杂度和时间复杂度&#xff0c; 时间复杂度衡量一个算法的运行快慢 空间复杂度是一个算法运行所需要的额外的空间 一个算法中我们更关心的是时间复杂度 时间复杂度 时…

重庆市工程技术生态环境专业职称申报条件

重庆市工程技术生态环境专业职称申报条件链接重庆市人力资源和社会保障局 重庆市生态环境局关于印发重庆市工程技术生态环境专业职称申报条件的通知_重庆市人力资源和社会保障局类别基本条件业绩成果备注工程师具备博士学位&#xff1b;或具备硕士学位或第二学士学位&#xff0…

基于springboot+mybatis+vue的项目实战之增删改查CRUD

目录结构 页面的效果大致如下&#xff1a; PeotController.java package com.example.controller;import com.example.pojo.Peot; import com.example.pojo.Result; import com.example.service.PeotService; import org.springframework.beans.factory.annotation.Autowired;…

MySQL(定义语言与操作语言)

一、数据定义语言 DDL 1 、数据库的创建 &#xff08; 1 &#xff09;创建数据库 ①查看数据库 show databases; ②创建数据库 基本格式&#xff1a; create database <数据库名>; ③如果数据库名不存在就创建数据库&#xff1a; 基本格式&#xff1a; SQL 语言不…

【Git】 Git分支操作指南

隐形的纪念躲在心里面 也许吧 也许不会再见 阴天或晴天 一天又一年 风它在对我说莫忘这一切 &#x1f3b5; 蔡淳佳《隐形纪念》 Git是一种非常强大的分布式版本控制系统&#xff0c;允许用户在开发过程中创建不同的分支&#xff08;branch&#xff09;来分…

Linux监听某个进程,自动重启

文章目录 前言一、使用 bash 脚本编写监控程序二、使用 systemd总结 前言 在 Linux 下监听某个进程&#xff0c;当进程异常退出后自动重启&#xff0c;可以使用bash脚本编写监控程序&#xff0c;也可以使用系统工具如 systemd 或 supervisor。 一、使用 bash 脚本编写监控程序…

使用 Docker 部署 TaleBook 私人书籍管理系统

1&#xff09;项目介绍 GitHub&#xff1a;https://github.com/talebook/talebook Talebook 是一个简洁但强大的私人书籍管理系统。它基于 Calibre 项目构建&#xff0c;具备书籍管理、在线阅读与推送、用户管理、SSO 登录、从百度/豆瓣拉取书籍信息等功能。 友情提醒&#x…

Vue UI 组件库

推荐使用 npm 的方式安装&#xff0c;它能更好地和 webpack 打包工具配合使用。 npm i element-ui -SCDN: 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源&#xff0c;在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel"styl…