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. php 读取网页源码 , 导出成txt文件, 读取xls,读取文件夹下的所有文件的文件名

    <?php // 读取网页源码$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url);curl_setopt($curl, CURLO ...

  2. OpenSSL 使用拾遗(二)---- X509 证书的 SKID/AKID 字段

    SKID(证书使用者密钥标识符,subject key identifier 的简称)和 AKID(证书颁发机构密钥标识符,authority key identifier 的简称)是 X509 证书 ...

  3. iOS仿直播带有气泡动画的UIButton

    现在直播软件确实很火,因为需要就写了一个带有动画气泡的按钮,代码中的部分动画有参考到其他童鞋,在这里万分感谢! .h文件 @interface YYBubbleButton : UIButton @p ...

  4. Android深度探索--HAL与驱动开发----第七章读书笔记

    首先创建led驱动的设备文件,可以使用cdev_init,register_chrdev_region,cdev_add等建立主设备号的设备文件.步骤如下: 1使用cdev_init初始化cdev 2 ...

  5. centos6.4下面安装postgresql以及客户端远程连接

    一.安装 centos6.4服务器IP:192.168.220.131 window7客户端IP:192.168.199.218 在centos官网http://www.postgresql.org/ ...

  6. 关于Webstorm的一些配置

    一:代码缩略图插件:CodeGlance: 二:皮肤与主题使用的sublime的系列风格. 三:实现内嵌JS代码的高亮显示.https://segmentfault.com/q/10100000024 ...

  7. Xcode下的批量编辑

    说明:目前为止我找到三种查找与替换功能,如果有更多的方式,请在下面留言 第一种:我们常用的查找以及查找与替换功能 在Windows下,使用Ctrl+f 快捷键查找.用Ctrl+h来进行查找与替换功能. ...

  8. Runtime Complexity of .NET Generic Collection

    Runtime Complexity of .NET Generic Collection   I had to implement some data structures for my compu ...

  9. Implement Trie (Prefix Tree)

    Trie 树实现 Implement a trie with insert, search, and startsWith methods. class TrieNode { public: // I ...

  10. Vim速查脑图