使用HTML 5结构标签

<article>

<article>标签可以在网页中定义独立的内容,包括文章、博客和用户评论等。一个article元素通常有它自己的标题,一般放在一个<header>标签中,有时还有自己的脚注,如:

<article>标签是可以嵌套使用的,当该标签进行嵌套使用的时候,内部的<article>标签中的内容必须和外部的<artcle>标签中的内容相关,如:

另外<article>标签也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中的一样,如:

<section>

<section>标签用于对页面中的内容进行分区。一个section元素通常由内容及其标题组成。<div>标签也可以用来对页面分区,但是<section>标签并不是一个普通的容器元素,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用<div>标签,而非<section>标签。<div>标签关注结构的独立性,而<section>标签关注内容的独立性。并且<seciton>标签包含的内容可以单独存储到数据库中或输出到word文档中,如:

<section>标签的作用是对页面中的内容进行分块处理,相邻的<section>标签中的内容应该是相关的,而不是像<article>标签中的内容那样是独立的,如:

事实上<article>标签更加强调独立性、完整性,<section>标签更加强调相关性。而且<article>和<section>标签并不能用来代替<div>标签,需要在一个页面中合理的使用HTML 5新的结构标签。

因此,在使用<section>标签时需要注意以下几个问题:

1、不要将<section>标签当做设置样式的页面容器,对于此类操作应该使用<div>标签来实现。

2、如果<article>标签、<aside>标签或者<nav>标签更符合使用条件,不要使用<section>标签。

3、不要为没有标题的内容区块使用<section>标签。

<nav>

<nav>标签可以在同一个页面中使用多个,用作传统的导航条、侧边栏导航、页面导航、翻页操作,如:

 <aside>

<aside>标签被用于创建其所处内容之外的辅助性内容,标签中的内容应该与其附近的内容相关,如:

在<artcle>标签之外使用<aside>标签,最典型的是侧边栏,其中的内容可以是友情链接,或是博客中的其他文章列表、广告等,如:

<time>

<time>标签用于表示24小时中的某个时间或某个日期,当使用<time>标签表示时间时,允许设置带有时差的表现方式。它可以定义很多格式的日期和时间,如:

datetime属性中日期与时间之间要使用字母“T”分隔,“T”表示时间。时间加上字母“Z”表示机器编码时使用UTC标准时间。加上时差,表示向机器编码另一地区时间,如果是编码本地时间,则不需要添加时差。

pubdate属性是一个可选的布尔值属性,可以添加在<time>标签中,用于表示文章或者整个网页的发布日期,如:

由于<time>标签不仅仅标识发布时间,而且还可以表示其他用途的时间,如通知、约会等。为了避免引擎误解发布日期,使用pubdate属性可以显示地告诉引擎文章中哪个时间才是真正的发布时间。

HTML 5入门知识(二)的更多相关文章

  1. TypeScript入门知识二(参数新特性)

    一,参数类型 1.在参数的名称后面使用冒号来指定参数的类型,当赋值的不是指定类型数值时会报错. var myname: string = "zhang san"; 2.当你没有指定 ...

  2. [NLP] 语义网络与知识图谱入门(二)

    语义网络与知识图谱入门(二) OWL 本体声明 owl用owl:Ontology来声明一个本体.rdf:about属性为本体提供一个名称或引用.根据标准,当rdf:about属性的值为"&q ...

  3. SpringBoot系列(二)入门知识

    SpringBoot系列(二)入门知识 往期推荐 SpringBoot系列(一)idea新建springboot项目 引言 本来新建springboot项目应该放在入门知识这一章的,但是由于新建spr ...

  4. Chrome插件开发入门(二)——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  5. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  6. Java基础入门知识

    Java编程入门知识   知识概要: (1)Java入门基本常识 (2)Java的特性跨平台性 (3)Java的编程环境的搭建 (4)Java的运行机制 (5)第一个Java小程序入门 (1)Java ...

  7. mybatis入门系列二之输入与输出参数

    mybatis入门系列二之详解输入与输出参数   基础知识   mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回 ...

  8. 我的Python笔记补充:入门知识拾遗

    声明:本文整理借鉴金角大王的Python之路,Day1 - Python基础1,仅供本人学习使用!!! 入门知识拾遗 一.bytes类型 二.三元运算 1 result = 值1 if 条件 else ...

  9. Java入门(二):注释和基本数据类型

    上次通过eclipse在控制台输出了hello world,是不是有点小激动啊,今天接着介绍Java基础知识. 一.Java注释 1.Java注释语句不会被编译器运行,不用担心代码因为许多注释语句显得 ...

  10. zookeeper 入门知识

    作为开启分布式架构的基石,除了必会还有的选么 自己的一些理解,有错误的话请一定要给予指正! 一.是什么? 分布式数据一致性的解决方案. 二.有什么用 数据的发布/订阅(配置中心)  . 负载均衡(du ...

随机推荐

  1. C++_标准模板库STL概念介绍3-函数对象

    函数对象也叫做函数符(functor). 函数符是可以以函数方式和( )结合使用的任意对象. 包括函数名,指向函数的指针,重载了()运算符的类对象. 可以这样定义一个类: class Linear { ...

  2. B. Cover Points Codeforces Round #511 (Div. 2)【数学】

    题目: There are nn points on the plane, (x1,y1),(x2,y2),…,(xn,yn)(x1,y1),(x2,y2),…,(xn,yn). You need t ...

  3. leetcode 88 Merge Sorted Array 归并排序

    归并排序:先将数组一分为二,将左边部分排序(同样将其一分为二),再将右边部分排序,最后逐层归并.(分治策略)(稳定排序). 算法稳定性 -- 假设在数列中存在a[i]=a[j],若在排序之前,a[i] ...

  4. c#和java的深拷贝CloneObject

    public static T Clone<T>(this T source) { if (!typeof(T).IsSerializable) { throw new ArgumentE ...

  5. linux下忘记mysql的root密码

    一.处理方案 #1. 结束当前正在运行的mysql进程 /etc/init.d/mysql stop #2. 用mysql安全模式运行并跳过权限验证 mysqld_safe --user=mysql ...

  6. RNN(recurrent neural network)学习笔记

    参考:https://www.jianshu.com/p/9dc9f41f0b29  以及<白话深度学习与TensorFlow> 与前馈神经网络.卷积神经网络等不同之处在于,RNN具有一定 ...

  7. css引入 以及选择器040

    css的介绍: css(Cascading Style Sheet)  层叠样式表 作用就是给HTML页面标签议案家各种样式 定义网页效果 简单来说 就是讲网页内容和显示样式进行分离 , 提高了显示功 ...

  8. 安装软件或运行软件时提示缺少api-ms-win-crt-runtime库解决方法

    最近碰到一个问题,在我软件安装或运行时会提示缺少api-ms-win-crt-runtime-|1-1-0.dll 当然第一个想到的是运行库没有装,但是很清楚的是我的电脑是装过vc_redist_20 ...

  9. python学习8-闭包、迭代器(转载)

    一.第一类对象: 函数名是一个变量,可以当普通变量使用,但它又是一个特殊的变量,与括号配合可以执行函数. 函数名的运用 1.单独打印是一个内存地址 2.可以给其他变量赋值 3.可以作为容器类变量的元素 ...

  10. vue中使用对非表单元素使用contenteditable的问题

    先说下问题,再上解决方案: span编辑时有多余空格和回车会影响样式(我用的是span便以此为例) 代码:(有换行符) 效果图: 代码:(无换行符) 效果图: 当在span标签的contentedit ...