PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

关于html中<article>标签和<aside>标签两者的区别

黄舟
黄舟 原创
2019-11-25 16:28:30 3513浏览

article标签,使用后感觉和P(段落)差不多,语义化的标签。

<aside> 标签定义article以外的内容(可用做文章的侧栏). 语义化的标签。

html 标签有几种分类,其中有一种就是网页布局性质的标签,如最常用的 div。

抛开以前的传统网页布局(table布局)不谈,就说现在的网页布局——div+css。

你比如说,你要做一个最简单的一行两列的网页,外层是一个 div 容器,里面两个 div,左边是导航菜单,右边是内容,为了实现网页布局,你肯定得用 css 定位,为了方便定位,你肯定得为 div 设置 id 或者 class,我们暂且用 id。

外层容器 div :id="wrap",内层左边 div:id="aside",内层右边 div:id="article"。

为什么左边导航 id 要给它设置为 aside(旁边),而不用 div1、div2 呢?

因为 aside 赋予了 div 意义,给当前开发者和后期维护者带来方便,一看到 <div id="aside"> 我就知道它的作用,看到 <div id="div1"> 谁知道这是什么东西,就像 div 标签本身一样,毫无意义。

而 article 和 aside 就像 div 一样,只是布局标签,除了标签名字不一样,其他功能意义基本是一样的,article、aside 里面的字体、背景、边框等没有任何特殊的样式,也不是鼠标点击了 aside 标签之后会出现什么特殊的效果;

因为它们只是简简单单的标签。既然功能和 div 一模一样,html5 为何多此一举,又生产出几个多余的 “div” 出来呢?

有句话叫做:存在的就是合理的。

因为很多网站布局是重复的,全世界网站有很多都是左边是导航,右边是正文内容,然后给div设置id来用css布局,因为有这个需求,html5 就人性化的添加了几个标签,从而简化了开发人员的开发,毕竟,<aside> 与 <div id="aside">,那个更好?
html 角度:前者比后者少写几行代码,一定程度简化了网页文件大小。

css角度:前者直接使用 aside 就能获取到标签,后者需要通过 id 。

js角度:同上。

之前也听说过这么一个消息,说一些移动设备(如 ipad),在解析 html5 标签时,遇到 aside 标签可能会有个性化的展示,可能效果更美观。

总结:

<article> 就看做是 <div id="article">,<aside> 你就看做是 <div id="aside">,仅仅是人为的给div 换了一个说话,换汤不换药,还是 div 。

以上就是关于html中<article>标签和<aside>标签两者的区别的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。