首页 > 教程 > 关键词 > CSS最新资讯 > 正文

CSS:HTML5语义化标记抛弃DIV标记

2009-09-01 15:53 · 稿源:网页教学网

曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者,聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局,并且开始调用外部样式表。但不幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“<div>-soup” 综合症。也许你很熟悉下面的代码:

以下为引用的内容:

<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>Tangential Information</h1>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
</div>

尽管这有些勉强,但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5解决“<div>-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的<div>标签,并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:

以下为引用的内容:

<section>
<section>
<article>
<header>
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Tangential Information</h1>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>

正如我们所见,HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的<div>标签。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上,CSS3也是可以然通过我们忽略掉所有class和id的。

  • 相关推荐
  • 大家在看
  • 工信部:L1-L5级自动驾驶不能一蹴而就 一些企业宣称L3级量产不严谨

    日前,我们于网络渠道获悉,2020 世界新能源汽车大会在海口举行期间,在9月28日下午举行的,以“新能源汽车可持续发展与全球开放合作”为主题的全体大会上,工业和信息化部副部长辛国

  • SEO内容优化,为什么需要关注语义相关性!

    ​众所周知,这是一个内容为王的时代,无论是SEO、社交媒体、新媒体等一些列营销人员,每天都会创造大量的原创文章,我们知道人工智能逐渐的渗透到每个领域,自从谷歌 2015 年开启Rankbrain后,它在搜索领域扮演着重要的角色,特别是在创建内容方面,给予我们很大的提示。

  • Uber Freight正在进行5亿美元融资

    Uber将向投资者Greenbriar Equity Group LP出售Uber Freight的部分股份,作价达5亿美元。消息人士称,这一交易将在本月完成。资料显示,去年9月份,Uber Freight在芝加哥成立了总部,Uber表示将在该地区每年投资超过 2 亿美元,并雇用数百名员工。(完)

  • PS5的SSD焊死在主板上 坏了就报废?别担心了 很难写死

    索尼PS5、微软XSX两款新一代主机已经发布,价格也基本一致,PS5在性能上这次要输一点,但PS5的SSD性能是个亮点,5.5GB/s的速度比XSX的2.4GB/s高出一倍。然而,大家有了新的担心。这两天天索尼

    PS5
  • CSP2020 | 京东健康构建精神专科领域线上线下一体化服务闭环

    2020 年以来,新冠肺炎疫情在全球持续蔓延,由其导致的群体性心理问题也逐渐爆发。疫情防控常态化下,面对持续的压力以及社交模式的改变,人们的心理压力也随之增加,对于心理和精神健康的关注已刻不容缓。9 月 19 日- 25 日,以“重大突发公共卫生事件与精神医学”为主题的中华医学会第十八次全国精神医学大会暨第十四次全国儿童青少年精神医学大会(CSP2020)在广州举行。京东健康专科互联网医院部总经理金方怡应邀出席大会,并?

  • 邱煌上任Discovery高级副总裁 华人高管引领国际媒体数字化转型

    引Content Asia报道,探索传媒集团(以下简称“Discovery”)在9月底完成了亚太区组织架构及人员调整,在新的组织架构中,亚太地区分为东亚及东南亚区、北亚区和南亚区三个区域,同时在内容业务、数字化业务、市场及用户洞察业务方面也进行了区域中心化调整。Discovery亚太区总裁Simon Robinson提出,此轮调整的目的是为了顺应全面数字化转型的需要,在组织方面进一步提升决策效率,增强数字化产品及运营能力,同时将未来的发展及?

  • Intel 11代酷睿首测!PCIe 4.0 SSD直冲5GB/s

    AMD平台已经全面支持PCIe 4.0,Intel也正在慢慢跟上,比如此前发布的数据中心级SSD P7-P5500/P5600,以及面向轻薄本的Tiger Lake 11代酷睿,而在桌面上,将于明年3月正式发布的同样隶属于11代酷

  • PS5 SSD被焊死在主板上 玩家担忧:史上最短命游戏机?

    本周,索尼公布了PS5主机的官方拆解视频,在一饱内部做工和用料的同时,玩家意外得知,PS5此番自带的内置SSD存储芯片是直接焊接于主板上。索尼倒是在PS5内部预留了M.2 2230/2242/2280扩展位,

    PS5
  • 互道信息数字化零售利剑出鞘,告别“库存管理5大痛点”!

    「库存」是品牌零售业务运营的核心之一,也是零售商日常面对的最大难题之一。零售商需要通过库存管理,了解到商品的售卖情况、渠道的销售情况,避免浪费金钱和资源。并动态的调整各个渠道的库存,为各渠道提供足够的商品满足消费者需求。只有良好地控制库存,才能为顾客提供更好的服务。面对库存管理,尤其是在数字化时代全渠道零售的背景下,品牌零售商依然面对着很多困扰。“不准不实时”、“超卖”、“积压”、“断货”、“无法

  • 聚焦华南工博会,迦智科技加速5G云化AGV应用场景落地!

    5G和智慧物流机器人有什么关系?众所周知,物流是制造业的重要组成部分,AGV机器人的广泛应用从根本上提升了物流体系的运行效率,大大提高了生产制造业的智能化水平。而5G技术却可以利用自身优势,解决目前AGV应用存在的一些需求和难点,助力物流机器人产品及整体解决方案更高效,更可靠,更柔性。10月12-15日,2020华南工博会在深圳国际会展中心隆重举行。迦智科技携最新的智能移动机器人创新性技术与前沿智能工厂物流解决方案亮?

  • 5年时间打造!《西游记之再世妖王》官宣:黑化孙悟空登场

    耗时5年打造的国漫《西游记之再世妖王》在今天终于官宣了(星皓影业、中影股份出品,王云飞导演),而从官方放出的首个预告来看,孙悟空被黑化后还是相当震撼的。《西游记之再世妖王》于2018年

  • 香港服务器双节5折优惠不止,数字化进程一刻也不能输

    此次疫情的出现极大程度地改变全球企业的运营方式,多数企业已经转变为完全由员工远程工作,或者在轮班制下允许有限数量员工返回办公室的形式。这种运营方式极大肯定数字技术对业务连续性的有效驱动,并进一步凸显其在“新常态”中的积极作用。值得注意的是,确保业务连续性的前提是拥有适当的设备来支持这些数字工作,而服务器就是企业在追求转型过程中需求最大的关键部分之一,香港IDC新天域互联专注香港服务器租用托管及全球专?

  • 和平精英ss11赛季什么时候开始 ss11赛季具体上线日期时间

    和平精英目前还是在SS10赛季中,但是不少玩家已经在期待下一个SS11赛季了,很多玩家还不清楚S11赛季什么时候开始,下面就来为大家详细的介绍一下。

  • StrategyAnalytics:2020年全球5G智能手机销量将达2.5亿部

    今日,StrategyAnalytics发布预测称,到2020年,全球5G智能手机销量将激增1300%,达到创纪录的2.5亿部。苹果iPhone,华为和三星今年正在推动5G智能手机市场的增长。

  • NVIDIA宣布NVIDIA DGX SuperPOD已就绪,可从全球认证合作伙伴处获取

    全球最先进的AI系统现可按照每20个节点为一个增量单元搭建;首批产品将在年底前安装到韩国、英国、瑞典和印度。加利福尼亚州圣克拉拉市 – GTC 2020秋季站 - 2020年10月5日 – NVIDIA今日发布企业版NVIDIA DGX SuperPODTM解决方案,这是全球首个一站式AI基础设施,能够让企业以惊人的速度安装功能强大的AI超级计算机——通常只需短短几周时间。已上市的DGX SuperPOD是由包含20个到140个独立的NVIDIA DGX A100TM系统构建的集群,现?

  • 搜狗发布组件化代码解耦框架 极大降低组件化重构成本

    9 月 28 日,搜狗正式发布SogouModuleBus组件化解耦框架,为业界贡献新的组件化解决方案。同时,这款基于搜狗立体化架构思维诞生的组件化框架,将会进一步降低开发者的组件化重构成本。代码耦合,是指软件工程中不同模块和类之间的依赖关系。耦合度高,则代码之间的依赖度高,往往容易出现牵一发而动全身的被动局面。因此开发者们需要对高耦合度代码进行解耦,让业务模块之间的关联依赖降到最低。此次搜狗SogouModuleBus组件化框架

  • Strategy Analytics:全球5G智能手机销量将在2020年达到2.5亿部

    10月10日消息,Strategy Analytics最新发布的研究报告指出,到2020年,全球5G智能手机销量将激增1300%,达到创纪录的2.5亿部。苹果iPhone,华为和三星今年正在推动5G智能手机市场的增长。Strategy Analytics总监Ken Hyers表示:“2020年,全球将售出2.5亿部5G智能手机。中国和美国是两个最大的5G市场。苹果iPhone,华为和三星是排名前三的品牌,今年将合计占据全球5G智能手机销量的三分之二。”

    5G
  • NVIDIA收购ARM卡壳了:英国正考虑否决

    一月前,NVIDIA与ARM达成协议,前者将出资400亿美元从软银手中收购后者。本次交易虽然可以成为半导体历史上最大规模的收购案,但却因为涉及的利益面过于广泛,而阴影笼罩。据报道,英国方面

  • 倪光南院士:中国可能否决NVIDIA收购ARM!

    NVIDIA 400亿美元收购ARM,前所未有地震动了整个行业,尤其是在当下这个关键时刻,更是引发各方关注和争议。在第四届信息安全产业发展论坛上,中国工程院院士倪光南也谈到了这笔交易,并明确提

  • 携程:目前公司没有私有化的计划

    在今日的携程第二季度财报电话会议上,被问及“是否有私有化的计划”时,携程方面表示,目前公司没有私有化的计划,不过为了将公司和股东的利益最大化,携程一如既往地对于资本市场上各种的可能性持开放态度。

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