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日

相关文章

  • CSS常用优化技巧

    以下是关于“CSS常用优化技巧”的完整攻略,包含两个示例说明。 优化技巧一:使用缩写属性 在 CSS 中,有很多属性可以使用缩写来简化代码。例如,可以使用 margin 属性来设置元素的外边距,而不是分别设置 margin-top、margin-right、margin-bottom 和 margin-left 属性。这样可以减少代码量,提高代码的可读性和可…

    css 2023年5月18日
    00
  • 使用HTML5和CSS3制作一个模态框的示例

    制作一个模态框是前端开发中的常见需求,以下是使用HTML5和CSS3制作模态框的攻略: 一、HTML结构 制作模态框需要使用HTML搭建模态框的骨架,其中包含以下元素: 1.1 遮罩层 遮罩层是覆盖在页面上的半透明层,用于屏蔽其他操作,使用户可以专注于模态框的内容。通常使用一个带有id属性的div元素来实现。 <div id="mask&qu…

    css 2023年6月10日
    00
  • javascript 带有滚动条的表格,标题固定,带排序功能.

    要实现带有滚动条的表格,标题固定和带排序功能的javascript,可以按照以下步骤进行: 第一步:创建HTML基本结构 首先,需要在HTML文件中创建一个基本的表格结构。在表格头部固定,表格主体带有滚动条,需要对表格主体进行固定高度和overflow属性设置。 <div class="table-container"> &l…

    css 2023年6月10日
    00
  • JavaScript实现选项卡效果的分析及步骤

    JavaScript实现选项卡效果的分析及步骤需要涉及以下几个方面: HTML代码结构的设计 CSS的样式设置 JavaScript的操作逻辑 接下来我们来逐一分析: HTML代码结构的设计 在进行选项卡效果实现之前,我们需要事先设计好HTML的整体结构。一般来说,选项卡组成需要一个选项卡标题部分和一个选项卡内容部分,可以采用div+ul的组合方式,如下所示…

    css 2023年6月10日
    00
  • js实现弹窗插件功能实例代码分享

    JS实现弹窗插件功能是一个非常常见也是较为基础的前端开发技能,在本篇攻略中,我们将讨论实现弹窗插件的步骤,并提供两个示例说明。 一、实现弹窗插件的基本思路 实现弹窗插件的基本思路可以分为以下几步: 编写HTML、CSS和JS代码,分别定义弹窗模板,弹窗样式和弹窗功能; 使用JS代码绑定事件,当用户点击需要弹窗的元素时,触发弹窗功能; 使用JS代码动态生成弹窗…

    css 2023年6月10日
    00
  • CSS3 text-shadow实现文字阴影效果

    本次回答将详细讲解“CSS3 text-shadow实现文字阴影效果”的完整攻略,包含以下主要内容: 文字阴影的定义和实现方式 text-shadow的详细参数解释及应用示例 cross-browser兼容性问题 一、文字阴影的定义和实现方式 文字阴影即指文字周围出现的一层阴影效果。在页面设计中,文字阴影可以为文字增加层次感和鲜明度,提高视觉效果。在CSS中…

    css 2023年6月9日
    00
  • CSS实现ul和li横向排列的两种方法

    下面是CSS实现ul和li横向排列的两种方法的攻略: 方法一:使用display:inline-block 使用display:inline-block是CSS实现ul和li横向排列最常见的方法之一。 具体步骤如下: 在ul选择器中添加display: inline-block,将ul设置为行内块元素。 在li选择器中添加display:inline-blo…

    css 2023年6月10日
    00
  • 前端开发工程师和美工对于网站开发所掌握的知识的区别

    前端开发工程师和美工在网站开发中扮演的角色不同,因此他们所掌握的知识也有所区别。 前端开发工程师 岗位职责 前端开发工程师负责制作网站的前端页面效果,在网站前端开发过程中,需要掌握 HTML、CSS、JavaScript 等技术,能够开发响应式网站,并与后端工程师协作,实现网站的页面交互效果。 相关技能 HTML技能:熟悉基本的HTML5语法,并能够熟练使用…

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