返回顶部
首页 > 资讯 > 前端开发 > JavaScript >语义化是html5新特性吗
  • 483
分享到

语义化是html5新特性吗

2024-04-02 19:04:59 483人浏览 安东尼
摘要

小编给大家分享一下语义化是HTML5新特性吗,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 语义化是

小编给大家分享一下语义化是HTML5新特性吗,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

语义化是html5新特性,其作用为:1、让页面能呈现出更好地内容结构、代码结构;2、提升用户体验感;3、有利于SEO;4、让浏览器的爬虫和机器更好地解析;5、便于团队开发和维护。

教程操作环境:windows7系统、HTML5版、Dell G3电脑。

1、什么是HTML语义化?

基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>

 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好地解析。

2、为什么要语义化?有什么用?

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

  • 提升用户体验感:例如title、alt用于解释名词或解释图片信息、label标签的活用;

  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),以意义的方式来渲染网页;

  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

3、写HTML代码时应注意什么?

  • 尽可能少的使用无语义的标签p和span;

  • 在语义不明显时,既可以使用p或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

  • 不要使用纯样式标签,如:b、font、u等,改用css设置。

  • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4、HTML5新增了哪些语义标签,详述之。

1)、<section></section>

定义文档中的主体部分的节、段。

2)、<article></article>

一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。。。

3)、<aside></aside>

用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。。。

4)、<header></header>

      定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

5)、<footer></footer>

      定义了文档、页面的页脚,和header类似。

6)、<nav></nav>

     定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

7)、<hgroup></hgroup>

     用于对网页或区段(section)的标题元素(h2~h7)进行组合。

8)、<figure></figure>

     用于对元素进行组合。

9)、<fiGCaption></figcaption>

     为figure元素加标题。一般放在figure第一个子元素或者最后一个。

10)、<details></details>

     定义元素的细节,用户可以点击查看或者隐藏。

11)、<summary></summary>

     和details连用,用来包含details的标题。

12)、<canvas></canvas>

     用来进行canvas绘图。

13)、<video></video>

     定义视频。

14)、<audio></audio>

     定义音频。

15)、<embed></embed>

     定义嵌入网页的内容。比如插件

16)、<source></source>

     该标签为媒介元素(比如video、audio)定义媒介元素。

17)、<datalist id='dl'></datalist>

     定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

18)、<mark></mark>

     在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

19)、<meter [min/max/low/high/optimum/value]></meter>

     度量衡,用红黄绿表示出一个数值所在范围。

20)、<output></output>

     定义不同类型的输出,样式与span无异。

21)、<progress></progress>

     进度条,运行中的进度。

22)、<time></time>

     定义日期或者时间。

23)、<keygen></keygen>

     定义加密内容。

24)、<command></command>

     定义命令行为。

以上是“语义化是html5新特性吗”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 语义化是html5新特性吗

本文链接: https://lsjlt.com/news/88640.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 语义化是html5新特性吗
    小编给大家分享一下语义化是html5新特性吗,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 语义化是...
    99+
    2024-04-02
  • HTML5新特性之语义化标签怎么用
    这篇文章主要介绍了HTML5新特性之语义化标签怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。HTML5新特性简洁的DOCTYPE:HT...
    99+
    2024-04-02
  • html5表单新特性是什么
    这篇文章主要为大家展示了“html5表单新特性是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5表单新特性是什么”这篇文章吧。 ...
    99+
    2024-04-02
  • html5十大新特性是什么
    今天小编给大家分享一下html5十大新特性是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。html5的新特性有:1、语义...
    99+
    2023-07-05
  • HTML5新特性有哪些及怎么定义
    这篇文章主要介绍了HTML5新特性有哪些及怎么定义的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5新特性有哪些及怎么定义文章都会有所收获,下面我们一起来看看吧。   ...
    99+
    2024-04-02
  • class是es6的新特性吗
    这篇文章主要讲解了“class是es6的新特性吗”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“class是es6的新特性吗”吧!class是es6新特性。在ES6中,class(类)作为对象...
    99+
    2023-07-04
  • HTML5新语义化标签如何使用
    这篇文章主要讲解了“HTML5新语义化标签如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5新语义化标签如何使用”吧! 我们先通过以下这张图...
    99+
    2024-04-02
  • 什么是html5语义化标签
    这篇文章主要讲解了“什么是html5语义化标签”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“什么是html5语义化标签”吧!1.<article>...
    99+
    2024-04-02
  • html5是一种新的语言吗
    这篇文章主要介绍了html5是一种新的语言吗的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html5是一种新的语言吗文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • 本地数据库是不是html5新特性
    这篇文章给大家分享的是有关本地数据库是不是html5新特性的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 本地数据库是html5新特性。Html5提供...
    99+
    2024-04-02
  • html5有哪些新特性
    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。HTML5的十大新特性 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api...
    99+
    2023-05-14
    html5
  • HTML5新特性有哪些
    本篇内容主要讲解“HTML5新特性有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5新特性有哪些”吧!Web存储 它具有以下特征: 你可以通过属性和方法来使用 JavaScript ...
    99+
    2023-06-04
  • HTML5的十五大新特性是什么
    这篇文章主要介绍“HTML5的十五大新特性是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5的十五大新特性是什么”文章能帮...
    99+
    2024-04-02
  • html5新增了哪些特性
    这篇文章将为大家详细讲解有关html5新增了哪些特性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 html5新增的特性:1、语义化标签(he...
    99+
    2024-04-02
  • html5的新特性有哪些
    这篇文章主要介绍html5的新特性有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!新增的元素html5新增了一些语义化更好的标签元素。结构元素article元素,表示页面中的一块...
    99+
    2024-04-02
  • HTML5中有哪些新特性
    这篇文章主要为大家展示了“HTML5中有哪些新特性”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5中有哪些新特性”这篇文章吧。   当我们进行Web开...
    99+
    2024-04-02
  • html5中有什么新特性
    今天小编给大家分享一下html5中有什么新特性的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。canvas<canvas...
    99+
    2023-06-27
  • html5中新增了哪些新特性
    小编给大家分享一下html5中新增了哪些新特性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html5的新特性:1、用于绘画的canvas元素;2、用于媒介回放的...
    99+
    2023-06-14
  • HTMl5中28个新特性分别是什么
    这篇文章主要介绍HTMl5中28个新特性分别是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览...
    99+
    2024-04-02
  • css3的含义和新特性是什么
    本篇内容主要讲解“css3的含义和新特性是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3的含义和新特性是什么”吧! CS...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作