HTML5不支持标签和新增标签详解

HTML5是一种用来定义Web内容的标准。HTML5的新增标签主要分为两类:语义化标签和媒体标签。

HTML5不支持的标签

1. 纯表现的标签

HTML5不再支持一些纯表现的标签,如font、center、hr等。这些标签没有明确的语义,以前用来进行排版和美化页面,现在建议使用CSS来实现。

2. 实用但经常被滥用的标签

还有一些实用但经常被滥用的标签,如big、strike、u等。这些标签被HTML5不推荐使用,建议使用CSS来实现文本的样式。

HTML5新增的语义化标签

HTML5新增了许多语义化标签,包括:header、nav、section、article、aside、footer等。这些标签可以明确地定义文档的结构和内容,不仅提高了文档的可读性,也有利于搜索引擎和屏幕阅读器等工具的分析和解析。

示例1:使用

标签

在网页中,

标签通常用于定义页面或者文章的标题区域。下面是一个使用

标签的示例代码:

<header>
  <h1>我是页面的标题</h1>
  <nav>
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
      <li><a href="#">链接3</a></li>
    </ul>
  </nav>
</header>

示例2:使用

标签

在网页中,

标签通常用于分隔页面的不同段落,

标签则用于定义一个完整的文章。下面是一个使用

标签的示例代码:

<section>
  <h2>文章列表</h2>
  <article>
    <h3>文章1的标题</h3>
    <p>文章1的内容</p>
  </article>
  <article>
    <h3>文章2的标题</h3>
    <p>文章2的内容</p>
  </article>
</section>

HTML5新增的媒体标签

HTML5还新增了一些媒体标签,如video和audio标签,使得在网页上嵌入音频和视频更加方便。

示例3:使用

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
</video>

在这个示例中,

总之,HTML5的标签使用更加规范、丰富,使得网页结构更加清晰,也使得网页内容的表现更加丰富。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML5不支持标签和新增标签详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS3的Border-radius轻松制作圆角

    当我们需要对一个html元素添加圆角时,可以使用CSS3的Border-radius属性。以下是该属性的语法: border-radius: value; 其中,value可以是一个或多个数值,数值的含义如下: 如果只给定一个值,那么四个圆角的大小相同。 如果给定两个值,第一个值为水平方向上的圆角半径,第二个值为垂直方向上的圆角半径。 如果给定四个值,则分别…

    css 2023年6月10日
    00
  • 纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)

    下面是纯CSS实现鼠标放上滑动出半透明效果的文字说明的完整攻略。 简介 这是一种常见的鼠标交互效果,在网页设计中经常用到。当鼠标放在特定的文字上时,文字会出现一种半透明的效果,以提醒用户该文字可点击。这种效果可以用纯CSS实现,而且实现起来非常简单。 实现步骤 首先,使用HTML创建需要加入效果的文字。 为这些文字创建一个class,并添加hover效果(鼠…

    css 2023年6月10日
    00
  • 使用CSS实现无滚动条滚动的两种方法

    在 CSS 中,我们可以使用两种方法来实现无滚动条滚动。第一种方法是使用 overflow 属性,第二种方法是使用 transform 属性。下面是一个完整攻略,包含了如何使用 CSS 实现无滚动条滚动的过程和两个示例说明。 使用 CSS 实现无滚动条滚动的两种方法 方法一:使用 overflow 属性 我们可以将父元素的 overflow 属性设置为 hi…

    css 2023年5月18日
    00
  • jQuery插件scroll实现无缝滚动效果

    jQuery插件scroll实现无缝滚动效果 1. 介绍 在网页设计中,经常需要使用滚动效果来展示内容,而无缝滚动效果更是常用的设计。jQuery插件scroll可以实现无缝滚动,简单易用,适用于各种场景。 2. 安装 scroll插件是一个jQuery插件,可以通过下面的CDN引用或下载到本地使用: <script src="https:/…

    css 2023年6月10日
    00
  • 学DIV CSS技术,如何入门?

    学习DIV CSS技术,需要掌握以下三个方面的知识: HTML基础知识。要学习DIV CSS技术,首先需要掌握HTML的基础知识,了解HTML标签的含义、使用方法以及常用标签的作用。 DIV布局基础。DIV是CSS中最常使用的盒子模型,学习DIV CSS技术也需要了解DIV布局的基础知识,包括块级元素、内联元素等概念。 CSS样式基础。学习DIV CSS技术…

    css 2023年6月9日
    00
  • IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUG

    在IE7浏览器中,当父元素使用display:none属性隐藏,子元素也使用display:none属性隐藏且先于父元素隐藏,再显示的时候会出现BUG,即子元素无法显示。要解决这个问题,可以执行以下步骤: 使用visibility:hidden代替display:none 在IE7浏览器下,使用visibility:hidden代替display:none能…

    css 2023年6月10日
    00
  • jquery下实现overlay遮罩层代码

    下面是jquery下实现overlay遮罩层代码的完整攻略。 背景知识 overlay遮罩层是一种常用的web页面效果,它可以用来阻止用户在操作页面时与页面下层元素发生交互,通常用于loading、模态框等场景。 实现思路 使用jquery实现overlay遮罩层的基本思路是: 创建一个全屏遮罩层元素。 设置该元素的样式。 将该元素添加到body标签中。 在…

    css 2023年6月10日
    00
  • easyui Draggable组件实现拖动效果

    来讲解一下 easyui Draggable 组件的使用攻略。 简介 Draggable 是 easyui 中的一个拖动组件,它可以给页面中的任意元素添加拖动功能,支持鼠标和触摸屏两种操作方式。使用 Draggable 组件可以很方便地实现一些拖动、排序、调整位置等功能。 基本用法 Draggable 组件的调用方式如下: <div id="…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部