ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5新增语义元素

2021-10-04 20:00:16  阅读:152  来源: 互联网

标签:标签 元素 语义 H5 文档 HTML5 article


目录

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 文件,并解析它

标签:标签,元素,语义,H5,文档,HTML5,article
来源: https://blog.csdn.net/weixin_58139900/article/details/120607069

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有