HTML5新增语义元素

目录

H5简介

新特性:

移除的元素(了解)

H5现状

H5新增的语义元素 

section

article

aside

header

 H5新增语义元素兼容问题

解决方案


H5简介

HTML5是HTML最新的修订版本,具有新的元素,属性和行为。

HTML5规范于2014年10月29日由万维网联盟正式宣布。

随着移动化的进程,HTML5终将成为主流。

新特性:

  • 新增语义化元素

  • 新增表单相关新元素、新属性

  • 新增了全局属性

  • 新增API应用程序接口:

  • canvas绘图

  • 多媒体(视频、音频)

  • 本地存储,离线存储、

  • 地理信息

移除的元素(了解)

以下的 HTML 4.01 标签在HTML5中已经被删除:

● <acronym> 定义只取首字母缩写
● <applet> 规定 Java applet 的文件名
● <basefont> 定义文档中所有文本的默认颜色、大小和字体
● <big> 呈现大号字体效果
● <center> 标签控制文本的居中显示
● <dir> <dir> 标签定义目录列表
● <font> 标签规定文本的字体、字体尺寸、字体颜色
● <frame> 标签定义 frameset 中的一个特定的窗口(框架)
● <frameset> frameset 元素可定义一个框架集
● <noframes> noframes标签向浏览器显示无法处理框架的提示文本
● <strike> strike 标签可定义加删除线文本定义。

提示:由于H5是向前兼容的,所以在H5中使用这些标签也不会报错或出现异常,但这些元素在H5中已不被W3C标准推荐,建议尽量不要使用。

H5现状

 HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

H5新增的语义元素 


HTML5新增了页眉、页脚、内容块等文档结构相关的标签,可以使文档结构更加清晰明确。

section

  • 语法:

    <section></section>

  • 作用:定义文档中的节(页面中内容的区段、文章中的章节)。 一个section元素通常由内容及标题组成

  • 典型应用: 文章中的章节、 选项卡式对话框中的各个选项卡式页面

  • 注意:样式上的分区用div,结构 上的分区用section

article

  • 语法:

    <article></article>

  • 作用:元素表示文档、页面、应用或网站中的独立结构,可以成为可独立分配的或可复用的结构。

  • 典型应用:论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目

  • 注意: 每个article通常包括标题(h1 - h6元素)作为article元素的子元素 当article元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的article元素可嵌套在代表博客文章的article元素中。 可能包含一个或多个section article>section

  • 语法

    <nav></nav>

  • 作用:定义导航链接的部分

  • 典型应用:主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等

aside

  • 语法

    <aside></aside>

  • 语义:定义当前页面或文章的附属信息部分

  • 典型应用:侧边栏、标注框、广告等

  • 语法

    <header></header>

  • 语义:定义整个文档或文档中一个节段的的头部(页眉)。 作为文档的头部通常搜索表单、相关的logo、站点的名称以及水平菜单(如果有的话)等。 作为一个节段的头部,通常包含了节段的标题和作者名字等。

  • 典型应用:整个页面的头部、文章页的包含标题部分的头部

  • 语法:

    <header></header>

  • 作用:定义文档或节的页脚 作为文档的页脚通常会包含版权信息和法律声明以及一些其他链接 作为节段的页脚,可能包含了节段的发布数据、许可声明等

  • 典型应用:网页中的版权信息,相关阅读链接

<article>, <section>, <aside>, and <nav> 可以拥有它们自己的 <footer> ,<header>

 H5新增语义元素兼容问题


问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签被当作错误处理

解决方案

一、通过document.createElement(tagName)方法即可让浏览器识别新标签, 浏览器支持新标签后,还可以为新标签添加CSS样式。

<!--[if lt IE 9]>
  <script>
        document.createElement("header");
        document.createElement("footer");
  </script>
<![endif]-->

 

由于创建出来的元素是内联元素,所以需要转换成块级,宽度和高度才能生效
 header,footer,nav,article,section,aside{
 		display: block;
 }

二:使用封装好的插件html5shiv.js解决

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式

  <!--[if lt IE 9]>
     <script src="html5shiv.js"></script>
<![endif]-->

 说明

  • 条件注释作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它

上一篇:“Hacker_R_US”因炸弹威胁和DDoS勒索被判8年监禁


下一篇:TypeScript 之常见类型,你都掌握了吗?