无废话网页重构系列——(6)HTML主干结构:站点(site)、页面(page)
语义化概念:通过丰富的语义关系对数据进行逻辑化描述,便于数据人机可读、检索挖掘和共享交换,实现信息处理的自动化和智能化;即人类提供良好结构的、作为人能识别的数据给机器,让不同机器能准确高效的意会和处理数据反馈给人类。
语义化实现方案有多种,如RDF、RDFa、Microformats、Microdata等规范,虽其复杂性、数据模型、属性类型等特性不尽相同,但都支持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):
合理使用语义标签,主要是分明层次嵌套、清晰标签职责。
属性命名语义
属性命名语义,主要是class
、id
、data-*
等属性的命名,其中最主要的是class
属性命名,主要有OOCSS、BEM、SMACSS、SUITCSS、Atomic等方案,各种方案都是意图通过样式命名让文档具备逻辑表达能力。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)的更多相关文章
- 无废话网页重构系列——(7)布局(区块、栅格)、模块组件(module)
本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4654800.html 在构建HTML主干结构后,开始编写“页面布局”和“模块组件”: 页面框架由几个主干结 ...
- 无废话网页重构系列——(3)Web重构前的分析
本篇讲重构前的分析.从“工作状态.工作环境和工作角色”和具体重构工作两方面分析. 凡是经过考验的朋友,就应该把他们紧紧地团结在你的周围 比较理想的工作状态:制定了各种设计和开发规范,各团队之间邮件.团 ...
- 无废话网页重构系列——(2)来套Web重构装备
本篇主要从语言入门.规范.工具.构建.库.框架.版本控制等各方面展开,篇幅会有点长,涉及到的工具类,会另开博文详细介绍. 另外说明Web重构是Web前端的开始,主要侧重Web页面,如实现布局与兼容,符 ...
- 无废话C#设计模式系列文章
不错的系列文章 原文:http://www.cnblogs.com/lovecherry/archive/2007/10/17/927728.html 本系列文章从公司内部的知识分享修改而来,有错误或 ...
- Liferay 6.2 改造系列之五:修改默认站点的页面内容
相关页面可以通过/portal-master/portal-impl/src/portal.properties文件配置进行修改: 登录页: ## ## Default Landing Page ## ...
- 随笔分类 - 无废话ExtJs系列教程
随笔分类 - 无废话ExtJs系列教程 摘自:http://www.cnblogs.com/iamlilinfeng/category/385121.html ExtJs 入门教程 摘要: extjs ...
- 【转】无废话WCF系列教程
转自:http://www.cnblogs.com/iamlilinfeng/category/415833.html 看后感:这系列的作者李林峰写得真的不错,通过它的例子,让我对WCF有了一 ...
- 无废话WCF系列教程 -- 李林峰
李林峰的无废话WCF入门教程 无废话WCF入门教程一[什么是WCF] 无废话WCF入门教程二[WCF应用的通信过程] 无废话WCF入门教程三[WCF的宿主] 无废话WCF入门教程四[WCF的配置文件] ...
- 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代码方式来 ...
随机推荐
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- struts2<s:property />标签
struts2的<property />标签是输出标签 其value属性是指定输出的内容,如果value属性没有写出来,则默认输出对象栈栈顶的元素. 例如,我们在对象栈中添加一个Perso ...
- AOJ 0121 Seven Puzzle
7 パズル 7 パズルは 8 つの正方形のカードとこれらのカードがぴたりと収まる枠で構成されています.それぞれのカードには.互いに区別できるように 0, 1, 2, ..., 7 と番号がつけられてい ...
- c++之RTTI介绍
本文介绍c++的RTTI的基本用法,并初步研究RTTI的实现原理. 1. 什么是RTTI RTTI即运行时类型识别(runtime type identification),用于判断指针或引用所绑定对 ...
- PHP 函数extension_loaded();
extension_loaded — 检查一个扩展是否已经加载 例如: <?php if (!extension_loaded('gd')) { if (!dl('gd.so')) { exit ...
- Berkeley DB分布式探索
明天回家就没有网络,今晚就将整个编写过程记录下来.顺带整理思路以解决未能解决的问题. 标题有点托大,想将Berkeley DB做成分布式存储,感觉很高端的样子,实际上就是通过ssh将Berkeley ...
- Android listview viewpager解决冲突 滑动
Android listview viewpager滑动 跳动 冲突解决 ListView中嵌套ViewPage有或者滑动手势冲突解决 在listview 上使用 addHeaderView 在第 ...
- jquery 在ie10中post数据,最终数据丢失的BUG修复
最近在做项目的时候,发现ie10或者360之类套壳的浏览器(ie10) 在jquery调用post数据的时候,真实的请求并没有上传数据,原因不表,请见 http://stackoverflow.com ...
- DBCC Check
DBCC CHECKDB 可以完成两个任务 (1)检查数据库里有没有损坏发生 (2)尽力修复数据库损坏,是数据能重新被正常访问 DBCC 下列步骤执行下列操作 1.检查一些关键性的表 sysalocu ...
- Microsoft Access Database Engine 2010 Redistributable Download
SQL Server 如需要导出类似Excel(*.xls.*.xlsx)格式的数据需要以来以下安装包 Microsoft Access 2010 数据库引擎可再发行程序包 此下载将安装一系列组件,帮 ...