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 。

article标签和aside标签两者的理解的更多相关文章

  1. h1、h2、h3标签及strong标签对页面seo的影响

    今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...

  2. code标签和pre标签

    code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...

  3. JavaWeb学习记录(十九)——jstl自定义标签之简单标签

    一.简单标签共定义了5个方法: setJspContext方法 setParent和getParent方法 setJspBody方法 doTag方法 二.方法介绍 osetJspContext方法 用 ...

  4. 【转】object标签和embed标签

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  5. 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签

    学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签.  jsp标签的分 ...

  6. 自学HTML5第二节(标签篇---新增标签详解)

    HTML5新增标签: <article> 标签 规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...

  7. 剖析html对标准标签和自定义标签闭合与不闭合渲染问题

    昨天在修改去年写的系统的时候无意中看到了当时写的一个利用标准标签未闭合在单元格内把整个单元格颜色渲染成红色的效果,如下: 当时的问题是从后台返回来的是个int整数而%是写在页面上的如图 这 时候就出现 ...

  8. struts2标签库----控制标签详解

         前面几篇文章我们介绍了有关struts2的基本内容,简单理解了整个框架的运作流程.从本篇开始我们逐渐了解和使用struts2为我们提供的标签库技术,使用这些标签可以大大降低我们表现层的开发难 ...

  9. @Autowired标签与 @Resource标签 的区别

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

随机推荐

  1. python_login输入三次错误密码锁定密码_密码不允许为空

    #!/usr/bin/env python #_*_coding:utf-8_*_ #by anthor zhangxiaoyu 2017-01-10 import getpass import os ...

  2. 微信小程序-scroll-view隐藏滚动条

    在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scr ...

  3. 启动web项目,报内存不足错误的解决方法

    Initialization of bean failed; nested exception is java.lang.OutOfMemoryError: Java heap space 原因: 在 ...

  4. Android设备标识符的使用

    设备ID(DeviceId) 获取办法 android.telephony.TelephonyManager tm = (android.telephony.TelephonyManager) con ...

  5. php学习笔记——文件(1)

    一.include和require 服务器端包含 (SSI) 用于创建可在多个页面重复使用的函数.页眉.页脚或元素. include (或 require)语句会获取指定文件中存在的所有文本/代码/标 ...

  6. PDF转换成Txt

    我的弱智想法是所有能转换成PDF的文件,就都用PDF预览,上传成功后开启一个线程把文档转换成PDF,PDF再转换成txt. 目的是把txt插入索引进行全文检索. 调用的时候 string filePa ...

  7. js 技巧1

    1. 使用===取代==    ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. "){ //速度慢 } & ...

  8. ECMAScript6之Set结构和Map结构

    set数据结构 ES6提供了一个新的数据结构,Set,Set和Array数组相似,但是Set里没有重复的数据,可以说是一个值的集合. 同时,Set数据结构有以下属性和方法: size:返回成员总数 a ...

  9. 终于了解了User-Agent的历史了

    你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? 1 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.3 ...

  10. 1. LAMP----PHP开发环境搭建(Win)

    LAMP=Linux+Apache+MySQL+PHP. Step1 安装Apache http://httpd.apache.org/download.cgi 1.打开上面网址->点击File ...