站长之家首页 > 经验 > html语义化最新资讯 > 正文

再谈语义化

2011-11-23 11:10 · 稿源:站长之家

开篇前的一些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

你对

情有独钟吗?拿到一个设计稿之后,不经意间无数的
已经在你的弹指神功下落在屏幕?如 果是no_emantic_html那 样,恭喜你得了恋
癖。

 

"用合理HTML标记以及其特有的属性去格式化文档内容"—这是舒克对语义化标签的解释,能不用

的地方不用
,因为
是无语义的标签,原本单词是division,为分隔、区块的意思,一般只用在架构html的地方,在(x)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标签中,除了

2个无语义的标签,其他标签都有它存在的意义,只有知道有哪些标签,以及对各个标签的本义做一个了解才能知道去用它。你不知道何时用
定义列表标签?又如果你不知道有标签?

 

如果在一个页面中看到的基本全是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

这个太多了,这里就不一一列出了,遇到不会的单词大家再去补一下英文哈!

  • 大家在看
  • 相关推荐
  • 商品内容向左,内容商品向右

    不只淘宝、京东、拼多多,今天用户打开抖音、快手、小红书等平台,都能够买到自己心仪的商品。淘宝直播、洋淘电商平台打造丰富的内容生态,抖音小店、快手带货等社交平台电商体系愈加成熟。

  • 数说云测试:AI自动VS 传统自动

    自动化测试技术复杂,与操作系统、浏览器、应用开发相关技术耦合性强,导致了自动化测试的应用学习成本高、脚本维护效率低,整体测试效率低于预期,这是很多企业对自动化测试望而却步的原因。当下,AI技术正在解决“自动化测试成本高,还不如手工测试”的困局。云测测试正在通过应用机器学习和深度学习算法实现自动化脚本的智能化,节省脚本的录制、维护时间,从智能生成、智能执行,以及测试结果的智能分析等方面,让测试越来越“

  • 才云新一代云 AI 平台实现算法普惠

    在新一轮科技革命的浪潮中,AI 已经成为全行业转型升级的核心驱动力。疫情当前,不少企业开始用 AI 推动生产经营和员工安全复工,如用 AI 智能客服提供语音咨询服务,有效规避客服人员集中办公;通过营销 AI 自动开展线上活动,以非接触形式为客户提供差异化服务等。才云 Caicloud Clever 是基于容器底层技术的云原生 AI 平台,提供数据管理、模型管理、流程管理、资源管理四大核心能力,涵盖企业从数据治理、模型开发、模型训练、?

  • 云手机商业的鲲鹏“变”

    2015 年,诞生了世界上第一款云手机NextbitRobin。这部手机的独特之处是内置了先进的云空间算法,会在手机本地存储尚未用完时将数据上传至云端,让用户永远不必担心手机存储空间不够。这款名不见经传的云手机,在巨头丛生的智能手机世界中,竟然一路存活了下来。时至今日,云手机的概念已经被更多的人所了解,云手机的市场也不仅仅局限于提供了云存储需求的手机,而是向着更丰富的场景落地去发展。2 月 28 日,在华为举办的“DevRu

  • 希尔链张宇焱做客福建经济频道:区块链应用会从虚拟到实体逐步普及

    前言:SEAL希尔链创始人、海南省人工智能学会区块链专委会副主任、中国人民大学商学院区块链客座教授张宇焱受邀做客福建省经济生活频道,访谈就《区块链,你了解多少?》的主题进行探讨,其中张宇焱表示:区块链是互联网的2.0,变信息传递为价值传递,当前区块链在数字货币交易、跨境支付和供应链金融三大领域广泛应用,已在全球掀起一股金融科技狂潮,堪称世界第九大奇迹。自从区块链被当作核心技术自主创新的重要突破口,上升为国

  • 银盛支付带领场景数字升级

    突如其来的疫情使人们对“接触”变得十分的敏感,大众更愿意采用线上办公、购物的生活方式。不难看出,疫情让人们开始更愿意选择数字生活,加快了消费数字化。而第三方支付机构在这中间发挥了至关重要的作用。疫情发生以来,为尽可能地减少消费过程中人们彼此接触,避免病毒通过纸币传播,商家或者消费者通过收付款码进行交易,此方式已经成为当前中国民众的生活常态。作为第三方支付机构的银盛支付,多种产品皆可满足这种无接触交

  • 华为:2020年将发布新一代超融合云硬件及新一代超融合云系统

    3月9日据证券时报报道,华为云核心网产品线Marketing副总裁马亮在华为产品与解决方案线上发布会上表示,5G新商业需要确定性网络,满足差异化网络需求、行业专属客户需求,并能够实现灵活配置,如何将5G网络开放给行业客户,使行业参与者能够快速定义网络,参与5G商业建设。马亮还介绍,华为 2020 年将发布新一代超融合云化硬件及新一代超融合云化系统。

  • 疫情大考下的蒙牛数字升级答卷

    疫情对所有乳企无疑是一场大考,乳企的原奶调拨、生产排产、供应链计划、零售终端等各个环节都受到了重大影响。但危中有机,蒙牛率先把数字化作为抗击疫情的重要“武器”,在运营管理中倒逼数字化升级,并探索全渠道新零售模式变革。不仅实现了诸多业务的突围,也为公司下一步整体迈入数字化企业打下了良好基础。正如蒙牛总裁卢敏放所言,本次疫情正在推动乳企进行更大力度、更高水平的革新,推动零售渠道、订奶渠道、供应链、配送

  • B站与知乎的媒体宿命?

    在《B站会成为"两微一抖"后的新一极吗?》中,我做了一个设问:“两微一抖”后的新一极会是知乎还是B站?无论是从公共话题的参与能力,还是用户自发的传播意愿上来看,这两个社区的传播外延都在向平台外溢出。

  • 线下业务线上,远程客服实现服务新突破

    国内疫情防控正呈现出积极向好的态势。治愈病例超越确诊病例,受感染人数持续下降,各企业陆续开始复工复产,恢复正常作业。然而复工复产带来人口流动明显增加,让形势充满不确定性,防控也面临较大的反弹压力。同时,随着疫情已经在全球范围内爆发,国内面临的疫情输入风险也在加大,整体疫情防控进入“持久战”模式,“少接触”、“少聚集”依然是最有效的防控手段之一。为了将疫情对复工复产的影响降至最低,多数互联网企业采用

  • 直播之外,学校信息建设大有可为

    2 月,全国诸多省市线上“开学”,超过 1 亿中小学生在线迎来新学期的第一堂课。一时间,直播上课的相关话题霸屏微博、百度。对于学校信息化建设的关注达到了空前高度,更有行业人士表示,“这是教育信息化的历史性时刻。”然而直播授课火爆的同时,“上网课的尴尬”也登上热搜。不少老师更表达了对直播课后学习进度管理、线上教学与教务衔接等实操环节的担忧。“疫情必然会过去,而学校的信息化建设其实刚刚起步。”国内专业的教?

  • 海兴电力怎么样?全球企业有口皆碑

    在如今的环境下,一个企业要想取得良好成绩,寻求更好发展,必然要适应经济全球化、信息全球化。对于中国企业来说,积极“走出去”是推动企业实现更大发展的有效途径,经济全球化也需要中国企业扮演更加重要的角色。我国有许多走出国门的企业,海兴电力就是其中之一,今天我们就来看看海兴电力在“走出去”这个过程中,做得怎么样。海兴电力科技股份有限公司,成立于 1992 年。主要产品包括智能配用电产品和系统、微电网和分布式?

  • 智能办公几步走,看震旦集团如何布局

    智能家居早已深入人心,商业办公智能化趋势显著。有研究表明 ,好的办公环境已成为影响职场幸福感的重要因素,对于企业家来说,好的办公环境也是提升效率,留住人才的必要软性条件。智能办公也非一蹴即成,来看下震旦集团是如何布局。办公终端整合 震旦集团最早经营办公设备、办公家具,深耕办公行业50多年。发展至今,产业和产品覆盖了几大办公室所需:打印设备、办公家具、空气净化器、碎纸机、财务装订机等。2019年震旦集团与?

  • WiseCRM365携手西软打造数智平台

    近日,杭州西软计算机工程有限公司与企能WiseCRM365 达成战略合作,上线CRM客户关系管理系统,帮助杭州西软建立起高性价比、高扩展性的客户关系管理体系,为杭州西软制定适合其业务模式特性的系统化解决方案,推动业务高效发展。杭州西软计算机工程有限公司从事互联网安全产品研发,为酒店、银行、运营商提供可靠,专业的安全服务。是国内专业致力于旅游饭店业信息化建设、开发和服务的高科技企业,杭州西软为国内领先的星级酒店管

  • 天津自如服务加速市场,受自如客喜爱

    天津自如是一家提供高品质居住产品与生活服务科技公司。随着二十一世纪的到来,越来越多的人选择成为长租客。调查显示当代租客愿意为了追求高品质租住生活而选择换房。天津自如自成立以来,受到自如客的追捧与喜爱。天津自如让生活更美好如今天津自如旗下拥有包括自如友家、自如整租、业主直租、自如豪宅、自如寓、自如民宿、自如ZSPACE等租住产品。作为自如的核心业务之一,自如服务线同样发展迅猛。天津自如为用户提供自如搬家、

  • XSKY助力同煤集团总医院信息转型升级

    与我们日常就医感受不太一样这家医院很少排队等候没有高声问询在这里就诊最大的感受是快、静、好而这背后是强大的信息化管理能力这家医院便是山西大同煤矿集团有限责任公司总医院(以下称“同煤集团总医院”或客户)。日前,其在智慧医院领域的打造经验,被央视发现之旅频道拍摄播出《智慧医院——同煤集团同华医院管理公司总医院在新时代写下的答案》专题节目。同煤集团总医院始建于 1949 年 10 月,是一所集医疗、教学、科研、预防

  • Windows 10即将获得现代磁盘管理工具

    ​如果你想要删除/创建分区或者扩展某个磁盘的空间,最简单的方式就是使用Windows10 系统中内置的磁盘管理工具来完成。但由于功能比较基础,因此在日常装机过程中我们还是倾向于使用DiskGenius等第三方程序。不过微软已着手开发现代化磁盘管理工具,这种情况可能很快发生改变。

  • 线上销售系统成传统行业数字改革最佳工具

    传统的营销模式单调乏味,用户到店数量越来越少,销量下降让传统线下销售成本高、转化率低的弊端暴露无遗。疫情期间,人流量更是为零,销售额直线下降,企业更是需要思考如何在线销售。如今已经有不少传统企业开始拥抱互联网,否则有可能错失让企业继续生存的机会。福建省仙游鲁艺古典家具,是一家集设计、生产、销售、服务为一体的综合型企业,借助加推线上销售系统进行微信渠道营销,累计获取线索7756人,大幅度提升线索量,新增

  • 扬起AI数据风帆,人工智能产业加速起航

    科技行业发展滚滚向前,不过一直以来,中国科技行业都是一个追随者,可以说在PC时代我们是一个完全的学习者,而在互联网时代,我们的网络应用和服务开始能够和海外巨头并驾齐驱,而到了移动互联网时代,开始呈现领先全球的态势,中国移动互联网发展的进程远超西方发达国家,很多人都觉得中国人太依赖手机了。不过想要领先世界,那么机会真正出现在人工智能领域,AI改变世界已经是一个不争的趋势,而在这个领域,中国科技界正在凝聚

  • 宝马发布全新LOGO设计,采用扁平设计够养眼

    扁平化设计已然成为UI设计的主流,这也促使越来越多公司重新设计自家的LOGO,更符合当代的审美需求。继去年大众推出新的LOGO之后,宝马也紧随步伐,在 2020 年发布了新设计的LOGO。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议