开篇前的一些YY
曾几何时，一个人出设计稿，出完设计稿打开DW用拖出一个页面，再苦逼一点拖完页面后自己还要写后台，武林人称：美工。更苦逼的是当每一次需求变更后，去修改一大堆发麻的
，于是"div+css"被搬上了互联网时代的舞台，一夜间N多的《DIV+CSS》葵花宝典横空出世，那时，我们活在了div+css的年代，那时，我们用上了
YY结束，切入正题
Ghost曾在2年前就以《页面重构中的语义化》一文对语义化做过讲解，还有码头的《语义化的HTML结构到底有什么好处？》
重构历经7年，也许时至今日，我们可以熟练地写出一个页面，但对于写好一个页面又谈何容易？让我们梳理一下思路，重温下基础，并结合现在的趋势，再来谈一下语义化这个话题，神马是语义化？为何要语义化？
重构中的语义化基本可以分为2块：(x)html标签的语义化和css命名的语义化。
(x)html标签的语义化
不废话上案例：
(图1)
图1非语义化的实现方式：no_emantic_html 语义化的实现方式：emantic_html
你对
"用合理HTML标记以及其特有的属性去格式化文档内容"—这是舒克对语义化标签的解释，能不用
不过怎样才能写出语义化的标签？从基础入手吧，每天跟我们打交道的最多的就是div h1-h6 ul-li p之类的标签了 ，不知大家有没有对这些标签做过深入的理解，来看下面这张表
| 标签 | 原单词 | 说明 | 语义化(Y/N) |
|---|---|---|---|
| h1-h6 | head | 定义 HTML 标题 | Y |
| p | paragraph | 定义段落 | Y |
| ul | unordered list | 定义无序列表 | Y |
| ol | ordered list | 定义有序列表 | Y |
| li | list item | 定义列表的项目 | Y |
| dl | definition list | 定义定义列表 | Y |
| dt | definition term | 定义定义列表中的项目 | Y |
| dd | definition description | 定义定义列表中项目的描述 | Y |
| table | table | 定义表格 | Y |
| thead | table head | 定义表格中的表头内容 | Y |
| tbody | table body | 定义表格中的主体内容 | Y |
| th | table head cell | 定义表格中的表头单元格 | Y |
| tr | table row | 定义表格中的行 | Y |
| td | table data cell | 定义表格中的单元 | Y |
| a | anchor | 定义锚 | Y |
| img | image | 定义图像 | Y |
| div | division | 定义文档中的节 | N |
| span | span | 定义文档中的节 | N |
以上只是列出了我们常用的一些标签，更多的标签请查阅w3c ，基本所有的html标签都是一个单词或者词组的缩写，这样其实本意是更便于我们对语义化的理解。其实所有的(x)html标签中，除了
- 定义列表标签？又如果你不知道有标签？
如果在一个页面中看到的基本全是div，那么说明你对语义化标签的使用还不是很明白：明明是一个标题，可以用标签来实现，却非要用无语义的
标签是否更语义？
大家都知道每年的CSS裸奔节吧？如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性；各个浏览器有自己的默认样式，默认的样式给予了各个标签不同的显示，标签使用的正确与否能体现网站的可用性，这也是检验一个网站可用性的最简单的方法之一。
这个推荐大家去看W3C官网的标签的使用，用web developer禁掉它的CSS看看如何？
CSS命名的语义化
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。
在我的理解，一个语义化的CSS命名至少应遵守如下约定：
尽量规避拼音命名，用英文单词去命名
单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名
单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)
对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂
一些约定好的单词可以迅速的帮助大家命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
登录条：loginbar
标志：logo
广告：banner
轮转：promo
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权copyright这个太多了，这里就不一一列出了，遇到不会的单词大家再去补一下英文哈！
（举报）
- 相关推荐
-
豆包语音合成模型 2.0 重磅升级，语义理解 + 情感演绎双突破
10月16日，火山引擎升级豆包语音合成模型2.0与声音复刻模型2.0。新模型基于大语言模型架构，具备深度语义理解能力，实现从文本朗读到情感表达的进化。对话式合成支持多轮交互，声音复刻仅需5秒即可还原音色。针对教育场景优化，复杂公式符号朗读准确率达90%，覆盖数学、化学等全学科。目前模型已在火山引擎语音平台上线，为OPPO、Keep等客户提供多场景语音服务。
-
立根中国，服务全球——LiteSSL 开放免费 TLS/SSL 证书，零门槛接入 HTTPS
亚数TrustAsia推出LiteSSL公益项目，旨在解决HTTPS普及中TLS/SSL证书部署成本高、流程复杂等痛点。该项目提供免费、自动化证书服务，基于国产可信根证书实现全球兼容，通过本土化验证节点提升效率，并支持ACME协议实现一键部署。LiteSSL致力于构建开放安全生态，邀请开发者共同推动HTTPS成为互联网默认配置，筑牢数据传输安全基石。
-
IT圈俱乐部走进玄武云，共探产业数智化新机遇
2025年10月17日，“IT圈俱乐部走进玄武云”活动成功举办。活动汇聚行业专家与企业代表，通过产品展示、生态交流等环节，探讨产业数字化创新前景。重点展示了智慧U客等AI驱动解决方案，助力企业实现全流程智能化管理。各方就客户资源共享、技术协同达成多项合作共识。活动还组织参观了企业文化与智慧超市展区，实地体验行业AI应用成果。此次活动不仅是技术对接平台，更是构建协同产业生态的重要实践，未来玄武云将持续深化创新，为数字经济发展贡献力量。
-
OpenAI推出AI浏览器ChatGPT Atlas 开启个性化上网新体验
OpenAI于10月22日推出首款AI驱动浏览器ChatGPT Atlas，以个性化上网体验为核心。用户点击“Ask ChatGPT”即可在侧边栏实时互动，实现网页摘要生成、航班预订、文档编辑等多样化任务。目前仅支持macOS，未来将扩展至Windows和移动端。高级代理功能暂限付费用户使用，其特色包括自动捕捉页面上下文、分屏浏览及记忆用户操作历史，旨在通过自然对话提升网络使用效率。
-
从“职场效率工具”到“校园成长伙伴”！讯飞星火的“年轻化”破圈
9月19日，讯飞星火在华东政法大学举办“闯关乐园”校园活动，通过AI简历修改、模拟面试等互动环节，吸引大学生体验产品。这标志着讯飞星火启动品牌年轻化战略，将目标用户从职场人士扩展至高校学生群体。当前AI工具赛道竞争激烈，开拓年轻用户成为差异化突围关键。品牌选择呼兰与小鱼作为代言人，以“智慧+趣味”形象组合强化认知，并通过全国校园巡回活动深化场景化实践，精准切入学生求职痛点，构建情感连接，旨在提前培养用户习惯，抢占未来市场先机。
-
政策落地·行业转向：装库科技用AI和数字化定义“房地产高质量发展”
二十届四中全会首次将"推动房地产高质量发展"写入公报，标志着行业正式进入从规模扩张向品质提升转型的关键阶段。装库科技作为代表性企业，通过"AI设计+数字化供应链"双核驱动，构建覆盖新房、二手房、城市更新的全链条服务平台，以售前美化和租前焕新等方案提升房产展示力与交付效率，推动"好房子"理念落地。目前公司已服务全国上千项目，未来将持续深化科技创新，助力实现"好生活""好城市"的高质量发展目标。
-
国产化率达100%！温州港TOS成功“换芯”金仓数据库
浙江省首个信创版港口集装箱码头生产操作系统n-TOS及配套中心业务处理系统CTOS在温州港乐清湾港区上线运行。系统采用海光CPU、银河麒麟操作系统等全栈国产软硬件，国产化率达100%，安全性和稳定性通过全面验证。金仓数据库助力实现Oracle数据库的平滑迁移，确保业务零改造上线。该系统作为港口"智慧大脑"，管理集装箱装卸、堆存等全流程业务，标志着浙江海港在码头核心系统自主可控方面迈出关键一步，为后续推广提供样板。
-
“全球Robotaxi第一股”文远知行：港股上市临近，商业化进程加速
文远知行通过港交所聆讯，正式进入港股上市冲刺阶段，将构建“美股+港股”双资本平台。作为全球自动驾驶标杆企业，其产品已在7个国家获自动驾驶牌照，在11国30城开展测试运营，安全运营超2200天。技术层面，预测算法误差控制在0.2米内，感知模型延迟小于10毫秒，系统检测精度达99%。成本大幅下降，单车成本降至几十万元，二季度营收同比增长60.8%，自动驾驶网约车业务猛增836.7%。近期获准在北京开展夜间道路测试，向全天候服务网络迈出关键一步。随着技术成熟与商业模式验证，万亿级自动驾驶市场正迎来规模化运营拐点。
-
告别税务焦虑：领星ERP以业财一体化，引领跨境合规新篇章
跨境电商面临复杂税务合规挑战，全球税务规则收紧使合规成为生存关键。传统手工记账方式易导致数据错误、申报失误，引发巨额罚款和法律风险。领星ERP提供智能化解决方案：内置税务引擎自动计算多国税费，业财一体化构建完整数据链，确保每笔交易可追溯。系统已服务超70万跨境企业，帮助降低合规风险、优化业务流程，实现安全高效的全球化扩张。
-
传承海尔，进化自我：Leader统帅的年轻化新路径
在家电行业年轻化浪潮中，统帅品牌以独特视角重新定义年轻家电：依托海尔技术底蕴，通过精准功能裁剪与简约美学设计，将领先技术转化为年轻人真正需要的产品。其核心在于实现"技术轻量化表达"，剔除冗余功能，保留核心体验，让科技自然融入生活。产品设计强调"无感适配"，智能体验注重解决实际问题而非炫技，构建理性精致的消费文化。这种基因传承下的自我进化，使统帅成为年轻人生活中可靠伙伴，重新诠释了高性价比的真正含义——在可靠品质基础上提供恰到好处的体验。