HTML 标签

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


<article> 元素的潜在来源: 
论坛帖子 
报纸文章 
博客条目 
用户评论

  1. <article>
  2. <header>
  3.     <h1>标题</h1>
  4. <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  5.   </header>
  6.   <p>article的使用方法</p>
  7.   <footer>
  8. <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
  9.   </footer>
  10. </article>

  1、section元素用于对网站或应用程序中页面上的内容进行分块,section 元素的作用是对页面上的内容进行分块,或者说对文章进行分段,;

  2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素,

  3、section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素;

  4、如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;

  5、section元素中的内容可以单独存储到数据库中或输出到word文档中。

  1. <section>
  2.     <h1>section元素的</h1>标题
  3.     <p>section区块的主题部分</p>
  4.   </section>

在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:

1)不要将section元素用作设置样式的页面容器,那是div元素的工作。

2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。

3)不要为没有标题的内容区块使用section元素。


两者的区别:

  1. 在HTML5中,article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

到这里,或许会想到为什么会新增这些标签?那么这里应当知道

语义化标签

HTML 标签

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


<article> 元素的潜在来源: 
论坛帖子 
报纸文章 
博客条目 
用户评论

  1. <article>
  2. <header>
  3.     <h1>标题</h1>
  4. <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  5.   </header>
  6.   <p>article的使用方法</p>
  7.   <footer>
  8. <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
  9.   </footer>
  10. </article>

  1、section元素用于对网站或应用程序中页面上的内容进行分块,section 元素的作用是对页面上的内容进行分块,或者说对文章进行分段,;

  2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素,

  3、section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素;

  4、如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;

  5、section元素中的内容可以单独存储到数据库中或输出到word文档中。

  1. <section>
  2.     <h1>section元素的</h1>标题
  3.     <p>section区块的主题部分</p>
  4.   </section>

在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:

1)不要将section元素用作设置样式的页面容器,那是div元素的工作。

2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。

3)不要为没有标题的内容区块使用section元素。


两者的区别:

  1. 在HTML5中,article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

到这里,或许会想到为什么会新增这些标签?那么这里应当知道

语义化标签

1.什么是语义化。 
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.那么为什么要语义化? 
- 去掉样式能让页面结构呈现清晰 
- 屏幕阅读器会按标记“读”你的网页 
- 有益于SEO 
- 便于团队开发和维护

HTML day0的更多相关文章

  1. [1] Tornado Todo Day0

    Github地址: day0 初始化数据库: jakeychen@JC:~/Public/tornado_todo$ pwd /home/jakeychen/Public/tornado_todo j ...

  2. Beta冲刺计划---Day0

    Beta阶段报告---Day0 1.需要改进完善的功能   我们上一阶段开发由于开发时间匆忙,对于爬虫耗时的优化没有考虑.优化的空间我在Alpha阶段的总结报告里说过,具体看下图.   这张图显示出爱 ...

  3. Beat冲刺报告---Day0

    Beta阶段报告---Day0 1.需要改进完善的功能   我们上一阶段开发由于开发时间匆忙,对于爬虫耗时的优化没有考虑.优化的空间我在Alpha阶段的总结报告里说过,具体看下图.   这张图显示出爱 ...

  4. NOIP2018 Day0 回首向来萧瑟处,也无风雨也无晴

    回首向来萧瑟处,也无风雨也无晴 NOIP2018 Day0 感想  by HGOI ljc20020730 Back ground: /* HGOI 陈功杰让我们写初赛总结?! (考这么烂还要写总结? ...

  5. 长沙雅礼中学集训-------------------day1(内含day0)

    day0: 首先,请允许我吐槽一下: 1.那些一个人住一个标准房的人您们真的是#@**¥&%……#*()%……*()@Q$&. 2.感谢那些一个人住一个标准间的人,要不然我们也找不到这 ...

  6. ZJOI 2017 二试 day0

    2017.4.25 话说4.24怒订正了6题,早上大扫除,把校服弄脏了too sad 中午从二中出发,只2个小时不到就抵达宾馆,开始先在大厅等候了半天(分配房间),和一试差不多.只是这个宾馆要远优于“ ...

  7. 白盒测试实践--Day0

    白盒测试实践--Day0 累计完成任务情况: 阶段内容 参与人 开会学习作业要求,取得共识 全体 注: 1."阶段内容"划斜线表示完成. 2.采用倒序. 具体情况: 组长提前组织分 ...

  8. SDOI2017round1酱油记day0

    嗯... 现在是21:12...准备睡了. 睡前写下day0一天如何过的: 早上5点起床到教室早自习,迷迷糊糊的宣誓,背东西,英语听写: 都停课了为什么还要上早自习! 我!想!去!机!房! OI才是我 ...

  9. day0~day13

    day0 day1 day2 day4 day5 day7 day9 day10 day12 day13

随机推荐

  1. 19:A*B问题

    总时间限制:  1000ms 内存限制:  65536kB 描述 输入两个正整数A和B,求A*B. 输入 一行,包含两个正整数A和B,中间用单个空格隔开.1 <= A,B <= 50000 ...

  2. vs2013源码编译zlib 1.2.8

    1.从 zlib 官网上下载 zlib最新版 1.28 的源码,解压到 zlib-1.2.8 2.使用vs2013打开vc11目录下的sln工程文件(进行单向升级) 3.修改zlibvc工程属性--& ...

  3. javascript获取asp.net服务器端控件的值

    代码如下: <%@ Page Language="C#" CodeFile="A.aspx.cs" Inherits="OrderManage_ ...

  4. VS2012新建项目出错:未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService

    刚刚重新做的系统,第一次打开vs2012新建项目时出现错误提示 通过查找解决办法发现方法有两种: 1:卸载两个windows更新补丁(KB2833957和KB2840642) 2:安装一个window ...

  5. shader forge卡通渲染!

    自从用了shader forge,妈妈我再也不写shader了...... 写了3种,分别用的顶点法线.法线贴图.顶点法线+法线贴图,然后还有自发光和受光两种模式,那就是6种了吧... 最后来一张sh ...

  6. shell脚本入门及基本元素

    命令和参数 #!/bin/sh 其中#!用来告诉系统它后面的参数是用来执行该文件的程序,必须放在脚本的首行,不然会在执行脚 本 的时候报错.当一个文件开头的两个字符是#!时,内核会扫描其它的部分看是否 ...

  7. PHP中"->"和"=>"的区别

    =>不是运算符,这个是数组特有的指针符号..是定义数组时做键.值映射用的.foreach($_POST AS $key=>$value){...}遍历数组的时候,就是将$_POST数组的键 ...

  8. 使用Navicat修改SQLite数据库提示:no such collation sequence: LOCALIZED

    今天在修改Android应用里用到的一个SQLite数据库文件,使用Navicat修改SQLite数据库提示:“no such collation sequence: LOCALIZED”错误,折腾了 ...

  9. Adobe Audition音频制作

    Adobe Audition 同义词 AU(软件(Adobe Audition))一般指Adobe Audition Adobe Audition是一个专业音频编辑和混合环境,原名为Cool Edit ...

  10. Android 媒体存储服务(一)

    Android 媒体存储服务 本文介绍如何在 Android 中,开发者的 APP 如何使用媒体存储服务(包含MediaScanner.MediaProvider以及媒体信息解析等部分),包括如何把 ...