html5语义化标签

语义化标签一节元素标签在HTML 5出来之前，用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css 样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的 某些部分。但现在，那些之前没“意义”的标签因为html5的出现消失了，这就是我们平时说的“语义”。如上图那个页面结构没有一个div，都是采用html5语义标签（用哪些标签，关键取决于你的设计目标）。但是也不要因为html5新标签的出现，而随意用之，错误的使用肯定会事与愿违。所以有些地方还是 要用div的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。因此是 最适合做容器的标签。W3C定义了这些语义标签，不可能完全符合我们有时的设计目标，就像制定出来的法律不可能流传 100年都不改变，更何况它才制定没多久，不可能这些语义标签对所有设计目标都适应。结论：不能因为有了 HTML 5标签就弃用了 div，每个事物都有它的独有作用的。节点元素标签因使用的地方不同，我将他们分为：节元素标签、文本元素标签、分组元素标签1、header 元素header元素代表“网页”或“section”的页眉。通常包含h1h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部 分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素网站标题网站副标题header 使用注意：可以是“网页”或任意“section”的头部部分；没有个数限制。如果hgroup或h1-h6自己就能工作的很好，那就不要用header。2、footer 元素footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接， 版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类 别等一些其他类似信息。COPYRIGHT 小北footer 使用注意： 可以是“网页或任意“sectio n”的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似。3、hgroup 元素hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将hl到h6元素放在其内，譬如文章的主标题和副标题的组合这是一篇介绍HTML 5语义化标签和更简洁的结构HTML 5hgroup 使用注意： 如果只需要一个h1-h6标签就不用hgroup 如果有连续多个h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签4、nav 元素nav元素代表页面的导航链接区域。用于定义页面的主要导航部分HTML 5CSS3JavaScript 应用位置譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条 款，版权页等，这些footer元素就能够用了。nav使用注意：用在整个页面主要导航部分上，不合适就不要用nav元素;5、aside 元素aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有 关的相关资料、标签、名次解释等。（特殊的 section）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是 日志串连，其他组的导航，甚至广告，这些内容相关的页面。 内容 作者简介 小北，前端一枚aside 使用总结： aside在article内表示主要内容的附属信息， 在article之外则可做侧边栏，没有article与之对应，最好不用。 如果是广告，其他日志链接或者其他分类导航也可以用6、section 元素I|元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：section 是啥？ 关于 sectionsection 的介绍关于其他关于其他section的介绍section 使用注意：一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不 是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。 表示文档中的节或者段； article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div7、article 元素article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇 用户的评论，一个互动的widget小工具。（特殊的sectio n）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。我们举几 个例子介绍一下article，好更好区分article、section、div篇文章 文章内容.版权：html5jscss 网所属，作者：小北一篇简单文章的 article 示例代码上例是最简单的article标签使用情况，如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的，如博客文章下面的评论，如下： 一篇文章 2014/10/03文章内容. 评论 评论者:XXX1 hour ago哈哈哈 评论者:XXX1 hour ago哈？哈？哈？ 文章里的评论，一个article嵌套article来表示的实例article内部嵌套article，有可能是评论或其他跟文章有关联的内容。那article内部嵌套section 一般是什 么情况呢。如下：前端技术前端技术有那些CSS 样式.JS 脚本 因为文章内section部分虽然也是独立的部分，但是它门只能算是组成整体的一部分，从属关系,article 是大主体，section是构成这个大主体的一部分。本网站的全部文章都是article嵌套一个个section章节, 这样能让浏览器更容易区分各个章节所包括的内容。那 section 内部嵌套 article 又有哪些情况呢，如下介绍：网站制作成员配备设计师设计网页的.程序员后台写程序的.前端工程师给楼上两位打杂的.article 使用注意：自身独立的情况下：用article 是相关内容：用section 没有语义的：用 div8、HTML5其他结构元素标签HTML5 节元素标签包括 body article nav aside section header footer hgroup，还有 h1-h6 address address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等一般出现在footer。 h1-h6因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个hl。在构造语义化和结构化的标签时的选择要慎重。也就是说不应该滥用超语义化的元素。语义化标签二文本元素标签、分组元素标签。一张页面中结构元素构成网页大体，但是也需要其他内容来填充，譬如图片、文本、代码、表单、交1、文本字体元素文字对SEO影响很大，而HTML5对一些文本字体元素的语义又重新定义了一遍，也增加了一些新的。那 我们就来重新认识他们。 a（anchor 的缩写）：用于定义超链接 em（emphasis的缩写）：em是句意强调，加与不加会引起语义变化，也可以理解为局部强调，用在语句 某个单词上来改变句子的侧重。 strong： strong 表示重要， strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键 词句。 p： p 元素 b（bold 的缩写）： b 元素原本就是加粗，现在表示“文体突出”文字，通俗将是用来在文本中高亮显示某个 或者几个字符，旨在引起用户的特别注意，无强调作用。譬如文档概要中的关键字，评论中的产品名，以 及分类名。 i italic 的缩写）： i 元素原本只是倾斜，现在描述为在普通文章中突出不同意见或语气或其他的一段文本， 就像剧本里的话外音（外语、译音），或也可以用做排版的斜体文字。 code：定义计算机代码文本。 q （quote的缩写）：用于定义一段引用的内容（短内容） cite :用于定义引用内容出自书籍或杂志等的标题，不允许其他信息，如作者，日期等。 u （underline 的缩写）：定义下划线文本 abbr（abbreviation的缩写）：定义一个缩写文本，建议在abbr的title属性中描述缩写的全称 dfn（defining instance 的缩写）：用于定义一个术语 var：定义计算机代码中的变量 samp（sample 的缩写）：由程序输出的示例文本 kbd（keyboard 的缩写）：定义由键盘输入的文本 wbr（word break）的缩写：定义换行的时机 span ：没有任何语义 br：定义一个换行符以上很多只是W3C定义，有些还不支持，但是为了彻底贯彻W3C的语义化，还是慢慢熟悉用起来吧。文本字体元素标签使用注意: 在下面这些元素都不适合的时候：strong，em， hl h6，高亮或标记文本的p等，就用b来表示。 em的强调是用在语句某个单词上来改变句子的侧重，可以说是局部的，而strong和局部还是全局无关， 局部强调用strong也可以，strong强调的是重要性，不会改变句意。time 元素time元素也是文本标签，因为是全新的标签，所以我们单独来介绍o time元素用来标记一篇文章的发 布时间。2012 年 02 月 15 日 如上代码，time标签一般有三个组成部分机器可识别的时间戳：格式必须是年月日的数字以减号相隔，如果增加时间，那就在日期后面加字母T然 后跟24小时格式的时间值以及时区偏移量，如datetime=2012-2-15T22:49:40+08:00 可识别的文本内容：格式随意，只要能看懂。 一个可选的pubdata标记：pubdata是个布尔值，如果需要，写上属性名就好pubdata。但是为了美观， 我们也可以写成pubdata=我们还要注意的是，如果该time位于一个article中，那么它表示这篇文章的发布时间；如果不在article 之中表示整个文档的发布时间。html5jscss 网2 月 14 0成立发布2012 年 02 月 15 0分类：前端交流 你好世界！ 2、分组元素标签我们熟悉的 div、 p 、dl 、dt、dd、ol、ul、li、hr 都是分组元素标签，我们接下来看一些不常用的和新 加的分组元素标签 blockquote:标记一段长引文。标记短引文（行内引文），应采用q元素！ pre： pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也 会呈现为等宽字体。pre标签的一个常见应用就是用来表示源代码。他跟code的关系好比blockquote和 q的关系。ol 元素ol 元素在 HTML5 有改良，增加了两个属性：1. “start”： start 属性用来定义列表编号的起始位置，2. “reversed”： reversed 属性表示将列表进行反转，但是目前还没有任何一款浏览器对其提供支持。figure 元素与 figcaption 元素figure元素用来包含一块独立内容，该内容如果被移除掉不会对周围的内容有影响。具体来说它可以用来 表示图片，统计图，图表，音频，视频，代码片段等。如果需要你也可以给该内容添加一个标题，这个标 题使用figcaption来表示。figcaption只能作为figure元素的子元素，可以放在figure元素内的任何位置。 形如：html5jscss 前端网是刚建立的小站不是所有图片都用figure来包裹，img标签也有语义的。如果纯粹只是为了呈现的图，也不在文档其 他地方引用，那就绝对不要用figure。如果和上下文有关，也可以把它移动到附录，那就别用figure，aside 可能适合。figure元素和aside元素看起来表达的内容差不多，但是aside所能包含的内容比figure要广。当你 不知道如何选择的时候可以这样来做：这段内容对周围的内容来说是一个要点，或者很重要，不可少，那 么可以使用figure，否则使用aside。一个figure元素内最多只允许放置一个figcaption元素，也可以不放，但是其他元素可无限放置。注意不 是所有图片都得用figure元素。3、嵌入元素标签在页面中除了显示文档活字符外，还需要放入一些其他元素，就是我们所说的嵌入元素。嵌入元素包括img （图片），页面（frame），多媒体对象将不再全部绑定在object或embed标签 中，而是由有video（视频）audio （音频），用于绘画的canvas元素这里我们不详细介绍它们的属性了，以后专门介绍。HTML5中增加了一些表单元素和一些交互元素等新的标签，但是着重点不同，所以我们放在另一片 文章来继续了解。HTML5语义标签到此结束。