article标签和aside标签是什么？

article 和 aside 是 html5 的新标签。
前段时间我刚学 html5 ，也是看的视频，刚开始不太明白，后来也想通了。
html5 是什么呢？是 html 的升级版，在标签和功能上增强了，说到底还是 html 。
html 又是什么呢？html 只是标签，a 就是锚点，p 就是段落，img 就是图片，我们按照这些规定来组织页面，他们本身只是标签，除此之外，没有任何意义，标签的背景颜色是什么，那是 css 的事，标签点击后出现什么效果，那时 js 的事。

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标签是什么？相关推荐

零基础学习HTML(23)——section标签、article标签、details标签、summary标签
注:学习笔记基于小甲鱼学习视频,官方论坛:https://fishc.com.cn/forum.php 官方资料鱼C课程案例库:https://ilovefishc.com/html5/ html5 ...
web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容安装HBuilderX 一.HTML 创建第一个HTML页面写完html后如何测试写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
H5新标签--语义化标签
H5新标签----语义化标签区别:1.默认样式不一样 2.有SEO优化作用 1.header,一般作为网页的头部使用 2.aside,侧边栏 3.nav,导航栏 4.address,地址,字体样式默 ...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
oracle 判断标签,判断text标签
[UWP小白日记-1]判断APP是否是第一次运行初始化SQLITE数据库原文:[UWP小白日记-1]判断APP是否是第一次运行初始化SQLITE数据库利用应用程序设置来实现此功能. 1.首先,获取 ...
js 为label标签和div标签赋值
一.为label标签和div标签赋值: 1. <label id="ttile"></label> document.getElementById ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...

article标签和aside标签是什么？

article标签和aside标签是什么？相关推荐

最新文章

热门文章