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. split拆分数组长度问题

    package test; public class test1_format { public static void main(String[] args) { System.out.printl ...

  2. 【转】一名大学生的PHP进阶之路

    我是一名河南某职业学院的学生,比较喜欢PHP开发 的 工作,自己也曾经自学过php,but如果没有老师教还真是难以坚持啊,在这里给大家说一下寒假在麦子的学习感受,首先说麦子每一堂课程都给了特别详细的 ...

  3. how-to-add-global-asp-net-web-api-filters

    要实现给mvc 和api 接口全局添加日志统计,web api添加的方式有些不同 FilterConfig.cs 页面 public class FilterConfig { public stati ...

  4. 安装R语言扩展包diveRsity-1

    今天去了学院的运动会呢-扮熊本熊超开心-写完这篇我补上我的图么么哒 ××××××××××××文末高能预警!!!!!这个包的安装并不是本周的任务!!!!!我真是萌萌哒×××××××××××××× ××× ...

  5. docker 源码分析 三(基于1.8.2版本),NewDaemon启动

    本文来分析一下New Daemon的启动过程:在daemon/daemon.go文件中: func NewDaemon(config *Config, registryService *registr ...

  6. python简易爬虫来实现自动图片下载

    菜鸟新人刚刚入住博客园,先发个之前写的简易爬虫的实现吧,水平有限请轻喷. 估计利用python实现爬虫的程序网上已经有太多了,不过新人用来练手学习python确实是个不错的选择.本人借鉴网上的部分实现 ...

  7. [转]SQL Relay使用

    一.SQL Relay是什么? SQL Relay是一个开源的数据库池连接代理服务器 二.SQL Relay支持哪些数据库? * Oracle * MySQL * mSQL * PostgreSQL ...

  8. Hadoop是什么?一句话理解

    Hadoop(MapReduce&HDFS) 1.学习目的(前言) 在从业了六年IT生涯里,做个实施顾问.业务顾问.BA需求分析师.项目经理,现在重新定位自己,在新公司做起了开发顾问,虽然经历 ...

  9. 配置自己的OpenGL库,glew、freeglut库编译,库冲突解决(附OpenGL Demo程序)

    平台:Windows7,Visual C++ 2010 1. 引言 实验室的一个项目,用到OpenGL进行实时绘制,还用到一些其他的库,一个困扰我很久的问题就是编译时遇到的各种符号未定义,符号重定义之 ...

  10. tornado中self.write() 写list

    tornado源码中不支持在self.write()中直接传入list对象,源代码如下 def write(self, chunk): if self._finished: raise Runtime ...