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

yizhihongxing

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日

相关文章

  • 一些CSS的设计原则浅谈

    一些CSS的设计原则浅谈 CSS(层叠样式表)是Web开发中最常用的样式定义方法,它可以对网站元素进行美化和布局控制。在使用CSS时,需要遵守一些基本的设计原则,以保证样式代码的复用、可扩展性和可维护性。下面是一些CSS的设计原则浅谈。 命名规范 命名规范是CSS设计的重要环节,好的命名规范可以使CSS的可读性和可维护性大大提高。一般来说,命名应该具有以下几…

    css 2023年6月9日
    00
  • 详解CSS两种添加注释的方法

    CSS注释是指在CSS代码中添加注释信息,用于增强代码可读性和维护性。注释可以在必要时提供有关代码的额外信息,并且不会被浏览器解释为CSS规则。 CSS注释的语法很简单,可以使用如下两种方式: 单行注释 单行注释以“/”开头,以“/”结尾。注释内容之间不得使用“*/”,否则注释会提前结束。 例如: /* 这是一个单行注释 */ 多行注释 多行注释也以“/”开…

    Web开发基础 2023年3月20日
    00
  • 基于jquery的横向滚动条(滑动条)

    下面我来讲解“基于jquery的横向滚动条(滑动条)”的完整攻略。 简介 在很多网站的页面设计中,会使用到横向滚动条(滑动条),用于展示大量的图片、横向长表格等内容。而本文将介绍如何利用jquery实现一个美观且实用的横向滑动条。 准备工作 在开始实现之前,请确保已经引入jquery库文件,并且已经编写好了html和css代码。 实现步骤 1. 编写html…

    css 2023年6月10日
    00
  • 使用CSS的border属性绘制各种几何形状的方法

    使用CSS的border属性绘制各种几何形状的方法可以通过设置不同的border属性值来实现,例如border-width用于设置边框的宽度,border-style用于设置边框的样式,border-color用于设置边框的颜色等等。 下面为您详细讲解使用CSS的border属性绘制各种几何形状的方法: 1. 矩形 矩形是最常见的几何形状之一,可以使用CSS…

    css 2023年6月10日
    00
  • 网页设计色彩搭配:更轻更平淡的颜色设计

    为了更好的呈现网页内容,色彩的搭配是非常重要的一环。颜色的规律和相互影响将直接影响网页的视觉效果,为了让网页更轻更平淡,我们需要对网页色彩的搭配有一定的规划。下面将介绍一些常用的网页色彩搭配方法,希望对各位网页设计者有所帮助。 1. 简洁明亮色 这种颜色组合方式基本上是白色+柔和的灰色+淡淡的黄色或绿色构成的。显然,这种颜色搭配方法突出了一个”简洁明亮”的感…

    css 2023年6月9日
    00
  • css 怎么清除浮动

    在 CSS 中,浮动是一种常见的布局方式,但是浮动元素可能会影响其他元素的布局。因此,我们需要清除浮动。下面是一个完整的攻略,包含了如何清除浮动的过程和两个示例说明。 如何清除浮动 1. 使用 clear 属性 我们可以使用 clear 属性来清除浮动。下面是一个示例: <div class="container"> <…

    css 2023年5月18日
    00
  • 使用css属性屏蔽鼠标事件的方法(鼠标点击可穿透上层元素)

    要屏蔽鼠标事件,常用的方法是使用CSS的pointer-events属性。这个属性控制元素是否响应用户的鼠标或手势事件。设置为none时,元素不会响应此类事件,并允许它们穿透到下面的元素,可以用来模拟类似遮罩的效果。下面是一些详细的步骤,以及两个示例说明。 步骤一:设置需要屏蔽事件的元素的CSS代码 首先,我们需要设置需要屏蔽事件的元素的CSS代码。在这个元…

    css 2023年6月9日
    00
  • jquery使用ul模拟select实现表单美化的方法

    下面是关于“jQuery使用ul模拟select实现表单美化的方法”的完整攻略,包含以下几个部分。 简介 在Web开发中,表单是常用的一种交互方式。其中,select元素是常用的表单元素之一,但是由于select元素在样式上与其他元素不协调,所以我们需要对其进行美化。本文介绍了使用jQuery实现使用ul模拟select元素的表单美化方案。 实现步骤 HTM…

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