语义化概念:通过丰富的语义关系对数据进行逻辑化描述,便于数据人机可读、检索挖掘和共享交换,实现信息处理的自动化和智能化;即人类提供良好结构的、作为人能识别的数据给机器,让不同机器能准确高效的意会和处理数据反馈给人类。

语义化实现方案有多种,如RDFRDFaMicroformatsMicrodata等规范,虽其复杂性、数据模型、属性类型等特性不尽相同,但都支持HTML5语言,项目如有特定需求可采用相关规范,实现丰富的语义关系。本篇Web语义化仅从HTML5语言标准下的“标签语义”和“属性命名语义”两部分展开。

标签语义

Web重构工作主要是语义化排版文档信息,构建语义明确、结构清晰的文档,便于浏览器解析渲染、搜索引擎建立索引抓取页面,提升内容的交互性、可读性和可维护性,视觉呈现上即使没有引入样式,人还是能“愉快”的阅读主体内容,如标题就是标题、段落就是段落、列表就列表…

根据文档特征,在HTML 4.01规范中定义了大量的语义标签,如文本列表表格链接媒体对象表单等范畴下的标签元素;在HTML 5中更为详细的规范化了文档特征,添加了新的标签元素用以更明确的定义和描述文档的结构,并且对所有元素按 Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactive 等属性重新定义了分类规则,如下图(来源:W3C/HTML 5.2 / 3.2.4.2. Kinds of content):

合理使用语义标签,主要是分明层次嵌套、清晰标签职责。

属性命名语义

属性命名语义,主要是classiddata-*等属性的命名,其中最主要的是class属性命名,主要有OOCSSBEMSMACSSSUITCSSAtomic等方案,各种方案都是意图通过样式命名让文档具备逻辑表达能力。OOCSS主要侧重样式的抽象、独立、封装与复用,BEM、SMACSS、SUITCSS主要侧重减轻样式对HTML层级结构嵌套依赖,Atomic主要侧重剥离具体样式表现的特性。

属性命名依赖于HTML结构,早期在项目中尝试过长命名、短命名方案,团队小、项目小都还可以定义与维护,在多人参与的一定规模的项目中,长命名kebab-case会变得很长很晦涩,短命名层级嵌套会变得越来越深,总有队友深怕会与他人产生冲突刻意为之。

属性命名具体实现建议:

  • 采用BEM + OOCSS + Atomic + SCSS/LESS/Stylus/PostCSS组合方案
  • 样式用属性使用.class,数据钩子使用#id
  • 不用‘大小、颜色、方位、形状’等表象的词
  • JavaScript钩子属性名采用j_lowerCamelCase前缀加小驼峰方式

BEM规则可参考:

  • Block独立模块:中横线
  • Element子元素:俩下划线
  • Modifier模块状态:一个下划线
  • Block下的所有Element不考虑层级嵌套关系,扁平化处理都属于Block,即连续的__下划线只能出现一次

BEM实现为:

  • 模块:.block
  • 模块_状态:.block_modifier
  • 模块__子元素:.block__element
  • 模块__子元素_状态:.block__element_modifier

附上常用命名词:

用途 ClassName
主次 primary, secondary, accent, weak, bold, light 建议用于变量
大小 base, normal, regular, small, medium, large, xlarge, xxlarge, xxxlarge 建议用于变量
结构 site, page, topbar, header, footer, container, title, main, content, aside, pendant, section, module, wrapper, inner, row, column
导航 nav, navigation, navbar, menu, breadcrumb, prev, next, first, last, pagination, pager, forward, back, up
列表 list, item, group, panel
组件 alert, dialog, popover, modal, dropdown, tooltip, accordion, collapse, tabs, carousel, slide, media, card, colorpicker, timepicker, datepicker, datetimepicker, calendar, switch, select, radio, checkbox, transfer, upload, cascader, tree-select, label, badge, avatar, backtop, loading, spin, message, notification, overlay, steps, timeline, progress, scroll, rate, divider, spacer, gallery
页面 index, archive, detail, special, contact, search, about, forum
状态 default, toggle, active, current, cancel, checked, hover, focus, success, fail, warning, danger, info, error, close, on, off, in
常用 vertical, horizontal, btn, more, icon, attach

扩展阅读:

(本篇结束)

许可协议:自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-6-semantics.html

无废话网页重构系列——(6)HTML主干结构:站点(site)、页面(page)的更多相关文章

  1. 无废话网页重构系列——(7)布局(区块、栅格)、模块组件(module)

    本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4654800.html 在构建HTML主干结构后,开始编写“页面布局”和“模块组件”: 页面框架由几个主干结 ...

  2. 无废话网页重构系列——(3)Web重构前的分析

    本篇讲重构前的分析.从“工作状态.工作环境和工作角色”和具体重构工作两方面分析. 凡是经过考验的朋友,就应该把他们紧紧地团结在你的周围 比较理想的工作状态:制定了各种设计和开发规范,各团队之间邮件.团 ...

  3. 无废话网页重构系列——(2)来套Web重构装备

    本篇主要从语言入门.规范.工具.构建.库.框架.版本控制等各方面展开,篇幅会有点长,涉及到的工具类,会另开博文详细介绍. 另外说明Web重构是Web前端的开始,主要侧重Web页面,如实现布局与兼容,符 ...

  4. 无废话C#设计模式系列文章

    不错的系列文章 原文:http://www.cnblogs.com/lovecherry/archive/2007/10/17/927728.html 本系列文章从公司内部的知识分享修改而来,有错误或 ...

  5. Liferay 6.2 改造系列之五:修改默认站点的页面内容

    相关页面可以通过/portal-master/portal-impl/src/portal.properties文件配置进行修改: 登录页: ## ## Default Landing Page ## ...

  6. 随笔分类 - 无废话ExtJs系列教程

    随笔分类 - 无废话ExtJs系列教程 摘自:http://www.cnblogs.com/iamlilinfeng/category/385121.html ExtJs 入门教程 摘要: extjs ...

  7. 【转】无废话WCF系列教程

    转自:http://www.cnblogs.com/iamlilinfeng/category/415833.html     看后感:这系列的作者李林峰写得真的不错,通过它的例子,让我对WCF有了一 ...

  8. 无废话WCF系列教程 -- 李林峰

    李林峰的无废话WCF入门教程 无废话WCF入门教程一[什么是WCF] 无废话WCF入门教程二[WCF应用的通信过程] 无废话WCF入门教程三[WCF的宿主] 无废话WCF入门教程四[WCF的配置文件] ...

  9. WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

随机推荐

  1. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  2. struts2<s:property />标签

    struts2的<property />标签是输出标签 其value属性是指定输出的内容,如果value属性没有写出来,则默认输出对象栈栈顶的元素. 例如,我们在对象栈中添加一个Perso ...

  3. AOJ 0121 Seven Puzzle

    7 パズル 7 パズルは 8 つの正方形のカードとこれらのカードがぴたりと収まる枠で構成されています.それぞれのカードには.互いに区別できるように 0, 1, 2, ..., 7 と番号がつけられてい ...

  4. c++之RTTI介绍

    本文介绍c++的RTTI的基本用法,并初步研究RTTI的实现原理. 1. 什么是RTTI RTTI即运行时类型识别(runtime type identification),用于判断指针或引用所绑定对 ...

  5. PHP 函数extension_loaded();

    extension_loaded — 检查一个扩展是否已经加载 例如: <?php if (!extension_loaded('gd')) { if (!dl('gd.so')) { exit ...

  6. Berkeley DB分布式探索

    明天回家就没有网络,今晚就将整个编写过程记录下来.顺带整理思路以解决未能解决的问题. 标题有点托大,想将Berkeley DB做成分布式存储,感觉很高端的样子,实际上就是通过ssh将Berkeley ...

  7. Android listview viewpager解决冲突 滑动

    Android listview viewpager滑动 跳动 冲突解决 ListView中嵌套ViewPage有或者滑动手势冲突解决   在listview 上使用 addHeaderView 在第 ...

  8. jquery 在ie10中post数据,最终数据丢失的BUG修复

    最近在做项目的时候,发现ie10或者360之类套壳的浏览器(ie10) 在jquery调用post数据的时候,真实的请求并没有上传数据,原因不表,请见 http://stackoverflow.com ...

  9. DBCC Check

    DBCC CHECKDB 可以完成两个任务 (1)检查数据库里有没有损坏发生 (2)尽力修复数据库损坏,是数据能重新被正常访问 DBCC 下列步骤执行下列操作 1.检查一些关键性的表 sysalocu ...

  10. Microsoft Access Database Engine 2010 Redistributable Download

    SQL Server 如需要导出类似Excel(*.xls.*.xlsx)格式的数据需要以来以下安装包 Microsoft Access 2010 数据库引擎可再发行程序包 此下载将安装一系列组件,帮 ...