article标签和aside标签两者的理解
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标签两者的理解的更多相关文章
- h1、h2、h3标签及strong标签对页面seo的影响
今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...
- code标签和pre标签
code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...
- JavaWeb学习记录(十九)——jstl自定义标签之简单标签
一.简单标签共定义了5个方法: setJspContext方法 setParent和getParent方法 setJspBody方法 doTag方法 二.方法介绍 osetJspContext方法 用 ...
- 【转】object标签和embed标签
我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...
- 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签
学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签. jsp标签的分 ...
- 自学HTML5第二节(标签篇---新增标签详解)
HTML5新增标签: <article> 标签 规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...
- 剖析html对标准标签和自定义标签闭合与不闭合渲染问题
昨天在修改去年写的系统的时候无意中看到了当时写的一个利用标准标签未闭合在单元格内把整个单元格颜色渲染成红色的效果,如下: 当时的问题是从后台返回来的是个int整数而%是写在页面上的如图 这 时候就出现 ...
- struts2标签库----控制标签详解
前面几篇文章我们介绍了有关struts2的基本内容,简单理解了整个框架的运作流程.从本篇开始我们逐渐了解和使用struts2为我们提供的标签库技术,使用这些标签可以大大降低我们表现层的开发难 ...
- @Autowired标签与 @Resource标签 的区别
Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...
随机推荐
- Array类型方法总结(未写完)
转换方法: toString() toLocaleString() valueOf() 栈方法: push()---在数组末尾添加项,返回修改后的长度, pop()---在数组末尾移除项,返 ...
- mysql数据恢复问题
现象 mysql> drop database zabbix; Query OK, 104 rows affected (0.30 sec)mysql> exitBye[root@mysq ...
- lamda 表达式
Lamda 表达式 高阶语言中的lamda表达式, 灵感来自于lamda演算.lamda演算包括一条变换规则 (变量替换) 和一条函数定义方式, 通过带入和替换, 对输入产生输出. Connect 新 ...
- Linux 下安裝 Java SE Development Kit(JDK)並配置環境變量
下載頁面:http://www.oracle.com/technetwork/java/javase/archive-139210.html 打開“Java SE 7”,再打開“Java SE Dev ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- spark yarn任务的executor 无故 timeout之原因分析
问题: 用 spark-submit --master yarn --deploy-mode cluster --driver-memory 2G --num-executors 6 --execu ...
- Vim编辑器与Shell命令脚本
章节简述: 本章节将教给您如何使用Vim编辑器来编写文档.配置主机名称.网卡参数以及yum仓库 ,熟练使用各个模式和命令快捷键. 我们可以通过Vim编辑器将Linux命令放入合适的逻辑测试语句(if. ...
- express mongoose 新手上路 问题记录
1.npm start启动报错,提示端口占用 app.js中添加了app.listen(3000),删掉即可 2.跳转到html页面 //ejs改为html app.engine('.html', r ...
- 《Javascript权威指南》
<Javascript权威指南> chorme.safari中的input或textarea html超链接(a)详细讲解 html5新增及删除标签 html表格 图片加alt属性
- JSON文件处理
牛X的JSON解析JSON字符串显示字典键值 public void ResolveJson() { //定义的JSON字符串,注意JSON的格式 string str = @” { “”Name”” ...