开篇前的一些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
这个太多了,这里就不一一列出了,遇到不会的单词大家再去补一下英文哈!
(举报)
- 相关推荐
- 大家在看
-
【腾讯云】11.11云上盛惠!云服务器首年1.8折起,买1年送3个月!
11.11云上盛惠!海量产品 · 轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。快来腾讯云选购吧!
腾讯云 12-20广告 -
ELLA官网体验入口 腾讯AI文本到图像语义对齐工具使用介绍
ELLA是一种轻量级方法,可将现有的基于CLIP的扩散模型配备强大的LLM。ELLA提高了模型的提示跟随能力,使文本到图像模型能够理解长文本。ELLA的产品特色通过LLM增强扩散模型的文本对齐能力无需训练U-Net和LLM即可提高模型的提示跟随能力设计了时间感知语义连接器,提取LLM中的时间步相关条件提供了DensePromptGraphBenchmark基准测试,评估文本对图像模型的密集提示跟随能力能够与社区模型和下游工具无缝整合,提高其文本-图像对齐能力为了获取更多关于ELLA的信息和体验该工具,请访问ELLA官网。
-
余承东再谈手机支架争议:小米导航没问题 有问题的是部分国际品牌
快科技4月14日消息,在前几天的智界S7发布会上,余承东笑称使用手机支架的原因在于车载导航的不足,被网友认为是暗指小米SU7。随后雷军还在微博上发起投票,询问问网友是否支持车上有原装支架,并在评论区表示同行之间相互交流有助于提升产品水平。余承东发朋友圈再回应此事,称国产智能电动汽车的车机导航都不会有问题(采用高德或百度地图方案)。小米做智能手机出身的,车机导航更不会有问题!现在有问题的却是部分国际智能电动车品牌和传统燃油车。”余承东表示。余承东还透露,此前在和车评人吴佩拍摄视频时,看到一辆开美国热销电车
-
IQAX eBL 荣获亚太贸易便利化论坛 2024 年贸易便利化创新奖
2024年4月XX日-和易孚欣然宣布其IQAXeBL解决方案荣获2024年度亚太贸易便利化论坛颁发的贸易便利化创新奖。作为数字贸易解决方案的领导者,和易孚致力于为客户提供先进方案,促进提单流程的数字化。东方海外国际是全球最大的综合国际运输和物流公司之一和易孚作为一家独立运营的信息科技公司,也传承了全球航运业深厚的底蕴。
-
荐嗅觉数字化!AI还原记忆中的味道
【新智元导读】人类嗅觉的数字化来了!近日,有业内大佬创立的公司宣布实现了气味的远程传送,并开始朝商业化方向努力。人类嗅觉的数字化,它来了!当今的计算机算法,尤其是AI技术,几乎已经把人类的视觉和听觉完全虚拟化了。这种创作也会成为一种新的公共艺术形式,香水行业或将为之颤抖。
-
荐为什么平台要加速推进搜索商业化
随着用户习惯的变化带来的流量结构的变化,平台围绕流量进行的商业化也要同步更新。当平台内容越来越多,且相对同质化,仅靠个性推荐已经不再能实现内容与消费者的精准、高效匹配。电商部门的也会有,有些品牌它没分这么清,但是更加偏向的是品牌公关这一块,因为SEO它不是直接可以追踪到转化的效果。
-
春茶季借势营销战 看易开得如何化「春意」为「创意」
近期,全国各地的用户都在一条视频里找自己家乡的茶,找到的网友纷纷留下自己家乡的足迹,没找到的网友也在评论区主动安利家乡的特色茶。这条引起网友热议的视频来自家电品牌——易开得净水器,借由“春茶季”,用“以好水 敬好茶”为撬点,线上线下联合传播让品牌在一众春茶营销中脱颖而出。01恭喜,杭州人!西湖龙井上市啦!2024年3月23日零点,易开得以一条15S“�
-
夸父炸串:数字化的核心是帮加盟商解决实际问题
2021年夸父还砸下重金建设数字化体系。我当时说,一定要把数字化当成重要的万店的基建。当时很多人觉得这是面子工程,因为“数字化”三个字当时是很虚的。当时我们提出,要成为一家连锁产业互联网公司,要像贝壳之于链家一样,成为一个产业互联网公司,用互联网的模式来提升连锁经营的效率。今天可以非常确切地讲,我们的数字化绝不是花把式,而是门店业绩增长�
-
天狮李金元:数字化技术助推天狮集团实现科技创新
近期,天狮集团加速迈向“第三次创业”的征程,同时发布了专注于年轻一代消费群体的新品。天狮集团的创始人李金元接受了新华网的访谈,在访谈中回答了以下问题,深入探讨了天狮集团的发展战略和未来方向。关于天狮集团的发展战略,李金元提到了“一体多翼”的理念。这一理念以主体导向发展为基础,通过互联网+的方式开展跨境电商、大健康产业、国际化旅游以及�
-
上海首尔丽格:解锁面部年轻化密码,引领抗衰新风尚
随着时光流转,岁月的痕迹逐渐爬上脸庞,让人不禁感叹青春的流逝。在医学美容技术日新月异的今天,面部年轻化已不再是遥不可及的梦想。相信在未来,上海首尔丽格将继续为更多的人们带来美丽与自信。
-
首尔丽格携手艾塑菲立足“再生”领域,领跑面部年轻化
在当今这个美学意识日益提升的时代,越来越多的人倾向于寻求一种更自然、更持久且更安全的方法来实现面部年轻化。先进的再生材料和技术成为了关键,这也使得再生美学逐渐成为新的趋势。在这个面部年轻化趋势日益明显的时代,双方的紧密合作无疑将为整个行业注入新的活力和方向,令人期待他们在“再生”领域创造出更多的辉煌成就,为广大求美者带来更多的美丽和满足。
-
Nextminds:是一家提供在线辅导服务的平台,为所有科目和学术水平的学生提供个性化辅导。
Nextminds是一个提供在线辅导服务的平台,通过与经验丰富的导师在线互动,为学生提供个性化的学习经验。平台提供ICSE、CBSE和州委员会等多种教育体系的辅导。Nextminds的主要优点是学生可以在舒适的家中与专业的导师进行一对一的在线学习,为学生提供高质量的辅导服务。
-
Pedagogue.io:每天花费10分钟,提升您的AI技能。
Pedagogue是一款AI技能培训平台,旨在帮助个人和企业提升AI技能。通过该平台,用户可以学习AI工具、技术和策略,并获得40%的生产力提升。Pedagogue的优势在于更新及时的内容库、个性化的技能培养、有趣的学习方式以及具有商业价值的数据驱动洞察。
-
LexiGym:你的语言学习伴侣。🚀 # #HinkouLabs
LexiGym是一款语言学习应用,帮助用户提升语言技能。它具有离线和多语言支持的创新功能,是最强大的语言学习伴侣。用户可以根据自己的预算选择免费使用或付费订阅,灵活选择学习方式。LexiGym还提供易于创建字典和智能学习等功能,以及详细的训练统计数据。
-
Alevels.ai:A Levels AI是一个利用人工智能提高A Levels学习成绩的工具。
A Levels AI利用人工智能技术,提供个性化的学习计划和辅导资源,帮助学生在A Levels考试中取得优异成绩。它通过分析学生的学习情况和弱点,为其提供针对性的学习建议和练习题。A Levels AI还提供实时答疑和学习进度跟踪功能,帮助学生更好地掌握知识。
-
MailReply:是一款AI助手,可生成专业且人性化的邮件回复,节省时间。
MailReply通过AI生成邮件回复,帮助用户节省时间。它可以在保持人类写作风格的同时,根据邮件内容生成上下文相关的回复。MailReply适用于Windows和macOS,并兼容多种邮件客户端。
-
Notification harbor:高性能团队的电子邮件营销平台
Notification harbor是一个为电子邮件营销团队提供AI优化的电子邮件内容和自动化流程的平台。通过使用LLM技术,我们可以在短短5分钟内创建高性能的电子邮件营销内容,并且随着时间的推移,产品甚至可以自我优化。我们的平台简化了电子邮件营销活动的方式,确保每个活动都能精准地与您的目标受众建立联系。AI生成的电子邮件模板根据您提供的信息和要求选择最合适的模板。实时个性化电子邮件可以提高用户参与度和转化率,并根据每个用户实时定制内容。AI驱动的电子邮件营销使您的团队在创建电子邮件模板和文本方面节省了60%的时间。
-
Magic Loops:通过结合ChatGPT自动化与代码,创建简单的自动化任务
Magic Loops是一种基于ChatGPT的自动化工具,可以连接数据、发送电子邮件、接收短信、爬取网站等功能。它能够帮助用户自动化生活中的各种任务,提高工作效率。Magic Loops的主要优点是可以与各种数据源和应用程序集成,轻松实现个性化的自动化需求。
-
ReplyAuto:Reply Auto是一款AI邮件助手,能够根据上下文理解邮件内容,并提供智能回复。
Reply Auto是一款使用AI技术的邮件助手,它能够自动分析邮件内容,根据上下文提供智能回复。它的主要优点是提高工作效率,减轻用户的邮件负担,并能够个性化定制回复。Reply Auto定位于帮助用户更高效地处理电子邮件,提高工作效率。
-
Mailman Workcation:智能邮递员 - 自动化影响力的智能Twitter机器人
AI Mailman利用最新的人工智能技术创建世界上最准确的邮件,比人类更快速和高质量。它提供简单的用户界面,能够创建世界上最强大的邮件模板,打开率更高。使用AI Mailman创建的邮件打开率是其他方式的10倍,生成时间只需10秒。
-
Inpost:一款AI驱动的移动应用程序,可以改善个人电子邮件体验。
Inpost.ai是一款基于AI的移动应用程序,可以优化个人电子邮件体验。它帮助用户智能地组织和清理收件箱,专注于重要的电子邮件。它提供无缝的邮件交互,提供增强的安全性和独家功能。通过高级AI模型分析邮件内容,而不暴露用户的敏感信息。用户可以轻松追踪支出、管理发票,并利用促销优惠来优化个人预算。Inpost.ai还提供定制的收件箱分类,让用户能够个性化和高效地管理和优化收件箱。
-
Leadog:AI驱动的冷邮件营销、线索跟踪和互动
Leadog.io是一款AI驱动的冷邮件营销平台,提供冷邮件发送、线索跟踪和互动等功能。它采用先进的AI技术来优化冷邮件营销策略,提供精确的邮件投递和跟踪,帮助用户更好地了解和转化潜在客户。
-
Prospect AI:一键查找网站上的电子邮件地址和联系人信息
Prospect AI是一款插件,可以帮助销售团队、数字营销人员和公关专业人员免费查找公司的联系人。它使用人工智能技术,快速获取所需的联系人信息,帮助用户拓展业务关系。
-
Email whisperer:写作完美邮件,让你的电子邮件沟通更上一层楼!
Email Whisperer是一个用于Gmail和Outlook的AI电子邮件编写工具。它可以帮助你轻松地写出完美的电子邮件,提供重新表达、拼写检查和修正功能。它能够提高你电子邮件的清晰度和风格,并确保邮件无错误。Email Whisperer是一个提高电子邮件写作效率的工具,让你的邮件专业而准确。
-
Humanize AI by AI Text Converter:将AI生成的文本转换为与人类写作相匹配的内容。
Humanize AI Text是一个免费在线的AI文本人性化转换工具,能够绕过AI检测,并将AI生成的文本转换为与人类写作相匹配的内容。
-
Happily.ai:使用,超越传统调查。我们的AI平台分析员工情绪,提供可操作的见解,为健康、投入、高绩效的团队提供支持。
Happily.ai是一个AI工具包,帮助人力资源和经理人通过无忧无虑的参与、认可和绩效管理来提高人才留存和团队生产力。
-
ChatKPI:是一款基于AI的数据分析工具,可以通过文本消息跟踪销售趋势、识别热门产品、了解客户行为,提供图表、定制CSV等功能。
ChatKPI是一个AI数据分析工具,旨在帮助Shopify商家做出更明智的数据驱动决策。它可以提供实时洞察力,跟踪销售趋势,识别热门产品,了解客户行为,并通过自然语言对话提供个性化的商业洞察。ChatKPI可以通过文本消息或在Shopify商店内安装的应用程序使用。
-
Limodify.AI | Email Marketing Design Meets AI:Limodify.AI通过AI技术提供电子商务邮件创建服务。
Limodify.AI革新了电子商务邮件的创建过程,只需点击几下,选择格式,输入关键信息,即可在30秒内获得准备好发送的AI设计的邮件。节省时间,利用先进技术,精确实现您的营销目标。立即免费开始使用。
-
PurplePro:使用AI技术,只需两个点击即可启动您的忠诚度俱乐部。
PurplePro是一个使用AI技术的插件,它可以帮助您在短短两个点击的时间内启动您的忠诚度俱乐部。PurplePro通过游戏化和动态的积分规则增加用户参与度,并奖励他们。它还提供了强大的推荐、挑战、问卷和可变奖励功能,帮助您将首次用户转化为忠实的客户。
-
LISUTO:株式会社は、eコマースのセラーやマーケットプレイスが売上を増やし、時間を節約し、コアビジネスに集中できるスマートデータ構造化ソリューションのリーダーです。
LISUTO株式会社は、eコマースのセラーやマーケットプレイスが売上を増やし、時間を節約し、コアビジネスに集中できるスマートデータ構造化ソリューションのリーダーです。LISUTO AIは、AIタッガーやイメージタッガーなどのサービスを提供し、商品のタグ登録やナビゲーション改善などを自動化し、効率を向上させます。
-
geni:免费将您的普通产品转变为非凡的产品
geni-e是一款一体化的AI产品图像解决方案,企业可以使用该解决方案自动生成更好的产品图像。通过使用我们预设的背景设置,上传产品图像或使用自定义提示生成产品图像,您可以将在线商店的形象提升到一个新的水平。