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 ...
随机推荐
- 访问mysql出现“Access denied for user root@localhost”(using password:NO)解决方案
首先声明,出现这个提示的原因有很多,以下只针对我遇到的一种情况 使用解压缩版安装mysql的时候,data文件夹是自己新建的,my-default.ini也是自己配置的,这时直接启动mysql服务的时 ...
- 《我与Android不得不说的故事-1-立贴明志》
产品需要迭代,人也一样,自我更新,才能不断进步,进军新领域,立贴明志. 顺便记录一下新路上的坑坑洼洼
- Linux学习笔记-epoll
#include <sys/epoll.h> epoll是Linux内核的一个系统调用,一种可扩展的I/O事件通知机制,最早在Linux内核2.5.44版本引入. 它的功能是监视多文件描述 ...
- ViewController
ViewController ViewController 进入VC后先调用loadView,再调用ViewDidLoad ViewDidLoad皆为系统调用 需要先调用[super viewDidL ...
- Java学习日志(20170111)
今日新知识点: 1.关键字volatile sychronized是同步锁,这个之前接触过,在类/方法或代码块前加该修饰词,即可实现线程同步: volatile也是一个修饰符,被volatile修饰的 ...
- XTU 1252 Defense Tower
$2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$J$题 贪心. 优先删除$power$大的点. #pragma comment(linker, "/STACK:1024000000, ...
- PyQt界面编程应用与实践
一个典型的GUI应用程序可以抽象为:主界面(菜单栏.工具栏.状态栏.内容区域),二级界面(模态.非模态),信息提示(Tooltip),程序图标等组成.本篇根据作者使用PyQt5编写的一个工具,介绍如何 ...
- js数组中的注意
1.数组删除 2.数组合并 3.原数组会被修改的数组方法有: 1)排序 .sotr() 2)逆序 .reverse() 3)数组拼接 .splice()
- 等比缩放之自适应神器——css3的rem
1.rem简介 rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-si ...
- linux挂载新硬盘
Linux添加新硬盘自动挂载硬盘的具体步骤 1.插入新硬盘,启动Linux服务器,使用fdisk -l 查看硬盘 #fdisk -l Disk /dev/sdb: 1000.2 GB, 1000204 ...