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 ...
随机推荐
- Python第一天——入门Python(3)列表
列表,也是一种序列类型. 如何定义列表? 用" [ ] "(中括号进行定义) 列表的索引操作 例如 # hobby_list=['basketball','football','p ...
- overflow属性及其在ios下卡顿问题解决
overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...
- Leetcode-33-Search in Rotated Sorted Array (Hard)
二分查找算法以及旋转之后的数组二分查找算法: #!/usr/local/bin/python3 # -*- coding: utf-8 -*- __author__ = 'author' class ...
- .net: 不能忽视的break——寻找VS2010和VS2012编译器的一个小区别
文中的问题来自于实际开发,但是实际开发中的代码逻辑比较复杂,因此下面的代码去掉了所有逻辑,只保留能体现问题的代码,类和都只为了说明问题,并不具有实际意义.下面首先看看下面的代码和现象. 1. 问题再现 ...
- python json.load 的奇葩错误
json.load() 可以参数是文件对象, 但是这种方式会遇到莫名其妙的错误: No JSON object could be decoded 有的朋友说的是utf-8编码有BOM和无BOM造成的. ...
- ORACLE 使用sqluldr2和sqlldr进行导入导出
oracle数据导出工具sqluldr2可以将数据以csv.txt等格式导出,适用于大批量数据的导出,导出速度非常快.导出后可以使用oracle loader工具将数据导入. 简介: Sqluldr2 ...
- MyBatis-Generator 逆向工程(生成异常缺少部分的方法)
今日在使用 MyBatis-Generator 逆向工程时遇到了生成 mapper.java , mapper.xml 时缺少部分方法. 正常的 Mapper.java 示例: public in ...
- Jedis实现发布订阅功能
Redis为我们提供了publish/subscribe(发布/订阅)功能.我们可以对某个channel(频道)进行subscribe(订阅),当有人在这个channel上publish(发布)消息时 ...
- Java NIO Path接口和Files类配合操作文件
Java NIO Path接口和Files类配合操作文件 @author ixenos Path接口 1.Path表示的是一个目录名序列,其后还可以跟着一个文件名,路径中第一个部件是根部件时就是绝对路 ...
- Tomcat7性能调优
open files 修改linux系统open files限制,通过ulimit –a可看到系统默认的一个进程最大打开文件数为1024,linux系统中一切皆为文件,包含socket连接,需将些值调 ...