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. linux-yum

    yum - Yellowdog Updater Modified 简介: Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中 ...

  2. 手机支持USB功能、驱动文件对应关系

    手机支持USB功能: 1.UMS(USB MASS Stronge) : 连接PC作为存储盘使用 2.ADB : 用于调试 3.MTP :连接PC作为存储盘使用(win XP需要安装WMP10 以上 ...

  3. android基础(六)android的消息处理机制

    Android中的消息处理机制由四个部分组成:Message.Handler.MessageQueue和Looper,并且MessageQueue封装在Looper中,我们一般不直接与MQ打交道. 一 ...

  4. tab标签切换

    <script>$(document).ready(function(){ $(".drtitle li").click(function(m){ $(this).ad ...

  5. sql 删除表格delete drop truncate 区别(转)

    (1)   DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作.TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把 ...

  6. winform客户端利用webClient实现与Web服务端的数据传输

    由于项目需要,最近研究了下WebClient的数据传输.关于WebClient介绍网上有很多详细介绍,大概就是利用WebClient可以实现对Internet资源的访问.无外乎客户端发送请求,服务端处 ...

  7. Java中长度为0的数组与null的区别

    有如下两个变量定义,这两种定义有什么区别呢? 1. int[] zero = new int[0]; 2. int[] nil = null; zero是一个长度为0的数组,我们称之为“空数组”,空数 ...

  8. [转]: 两分钟彻底让你明白Android Activity生命周期(图文)!

    转自:http://blog.csdn.net/android_tutor/article/details/5772285 大家好,今天给大家详解一下Android中Activity的生命周期,我在前 ...

  9. REDIS 事务机制

    基本事务操作: 任何数据库都必须要保证一种原子执行操作:最基本的原子执行操作肯定是需要提供: 举一个例子来说明: 当对某个Key 做一个统计: 可能不同的Client做它那部分的统计,一段时间后,服务 ...

  10. HBase学习笔记-HBase性能研究(1)

    使用Java API与HBase集群交互时,需要构建HTable对象,使用该对象提供的方法来进行插入/删除/查询等操作.要创建HTable对象,首先要创建一个带有HBase集群信息的配置对象Confi ...