什么是语义化

简介: 学习语义化

原文链接:https://note.noxussj.top/?source=aliyun

什么是语义化?

简单了来说就是,当网页去掉 CSS 样式时,页面能呈现出来清晰的结构。

语义化的核心作用:提升代码可读性,便于团队开发和维护。

以下是语义化的 HTML 标签结构(部分语义化标签):

1.png2.png

假设我要编写一个这样的布局

image3.e7d10b3e.png

不使用语义化是这样的

<div></div><div></div><div>    <div>        <div></div>        <div></div>    </div>    <div></div></div><div></div>

使用语义化是这样的

<header></header><nav></nav><main><section><section></section><article></article></section><aside></aside></main><footer></footer>

从上面的例子可以看出来,去除页面样式后,不使用语义化一堆 div 很难看出来是什么模块。而使用语义化标签后,就能够清晰看出包含了头部模块、导航模块、主要内容展示模块、侧边栏模块、底部模块等

相关文章
|
5月前
|
SQL 存储 分布式计算
五、Hive表类型、分区及数据加载
在 Hive 中设计表,绝不仅是“建个结构那么简单”。选对内部表或外部表,决定了数据的归属和生命周期;设计合理的静态/动态分区策略,则直接关系到大数据场景下的查询效率和存储管理成本。本文深入讲解 Hive 表类型与分区机制,配合大量实战代码与练习题,带你从“写对语法”走向“设计合理”,让你的数仓查询快到飞起!
458 11
|
6月前
|
存储 机器学习/深度学习 缓存
阿里云第九代云服务器c9i/g9i/r9i怎么样?性能、应用场景与活动价格参考
阿里云推出的第九代云服务器c9i、g9i、r9i实例,搭载最新一代的英特尔® 至强® 6 处理器,相比第8代单核算力最大提升20%,适用于在线游戏、通用互联网应用、视频编解码、数据库应用、搜索推荐等场景,已为海量企业客户带来显著性能跃升。本文为大家深入讲解这三款实例的性能优势、适用场景以及活动价格情况,为大家提供详尽的选购指南。
631 1
|
机器学习/深度学习 数据采集 存储
深度解析数据清理和特征工程!5本面向数据科学家的顶级书籍推荐 ⛵
本文对比筛选了『数据清理』和『特征工程』最值得推荐的5本书,帮助你有效地清理数据、获取干净核心的数据,这是后续建模分析等工作有更好结果的保证。
864 0
深度解析数据清理和特征工程!5本面向数据科学家的顶级书籍推荐 ⛵
|
存储 Unix Linux
Linux:指令篇(深度解析+使用)
Linux:指令篇(深度解析+使用)
316 3
|
缓存 数据安全/隐私保护 开发者
常见状态码解释
常见状态码解释
2663 0
|
存储 运维 安全
1Panel开源Linux服务器运维管理面板
1Panel开源Linux服务器运维管理面板
1371 0
|
前端开发
css:移动端实现1px、0.5px的细线
css:移动端实现1px、0.5px的细线
270 0
css:移动端实现1px、0.5px的细线
|
测试技术 API
比postman好用的工具,省钱省力省时间
简单而言,Apifox比postman好用的工具,省钱省力省时间。在相同的功能点上,Apifox基于本土互联网团队的协作模式和痛点,基本做到了人无我有,人有我优 的程度。 因此如果基于各种原因,寻找Postman替代的开发们,不妨体验一下Apifox。
比postman好用的工具,省钱省力省时间
|
存储 NoSQL 网络协议
深入解析redis cluster gossip机制
社区版redis cluster是一个P2P无中心节点的集群架构,依靠gossip协议传播协同自动化修复集群的状态。本文将深入redis cluster gossip协议的细节,剖析redis cluster gossip协议机制如何运转。
8677 0
|
安全 Java 程序员