html标签使用时特别注意,HTML 语义化标签-新增标签介绍

最新推荐文章于 2024-06-02 09:58:03 发布
最新推荐文章于 2024-06-02 09:58:03 发布
阅读量246 收藏
点赞数
文章标签： html标签使用时特别注意

HTML 基础知识

版权声明：未经博主授权，内容严禁转载 ！

HTML语义化标签概念

e690817a4c72973fcc97ba03f64f32a0.png

如果没有语义化标签，上面这些 div 都是没有实际意义的，只是我们提供给浏览器的指令。

和 语义化 代码对比：

ba220230043ed3b6f9ac1f797574f6dd.png

什么是语义化1. 根据内容结构化(内容语义化)。

2. 选择合适的标签(代码语义化).

3. 便于开发者阅读和写出更好的代码，或者让浏览器的爬虫和机器很好的解析。

语义化的意义：

1.遵循统一的标准(便于团队的开发和维护，具有可读性，遵循W3C标准的团队都应该遵循该标准)。

2.内容结构分离(没有css的时候，页面也可以呈现出很好的内容结构和代码结构)。

3.用户体验好(例如 title、alt 用于解释名词或解释图片信息、label标签的活用)。

特别注意：

语义化还具有 利于搜索优化(有利于搜索引擎抓取更多有效信息，爬虫依赖于标签确定上下文和各个关键字的权重)

和方便设备解析(屏幕阅读器、移动设备能够以有意义的方式渲染网页) 的意义。

语义化标签的分类

header：这个标签标示一个标签的头部。

hgroup：这个标签标示一组标题。

footer：这个标签标示一个节的脚注，可以包含作者信息、版权信息等。

nav：这个标签标示用于导航栏连接部分。

section：这个标签表示一个通用的文档或者应用程序节。

article：这个标签标示文档内容的一个独立快，比如博客条目或者报纸文章。

aside：这个标签标示与页面其他部分略微相关的内容块。

hgroup 元素标签代表页面或者内容块的标题分组

1. 当元素有多个层级标签的时候，该元素可以将 h1 到 h6 元素放在其内。

2. 譬如文章的主标题和副标题组合。

3. 如果只需要一个 h1 到 h6 标签就不用 hgroup 。

(h1 和 h6 用来表示一个层级关系，单纯调节字体大小不建议使用h标签，用font-size属性。)

主要标题h1>

次要标题(副标题)h2>

hgroup>

hgroup 标签有中划线，表示过时的意思。新的表示方式用 h 标签，大的标签包含小的标签，如下。

任天堂游戏h1>

魂斗罗h2>

魂斗罗h2>

header 元素 代表页面或内容头部标题(页眉)

1. 通常包含 h1 到 h6 元素或者 hgroup。

2. 页面中 header 元素的个数没有限制，可以拥有多个。

3. 可以为每个内容增加一个 header 元素。

主要标题h1>

次要标题(副标题)h2>

hgroup>

header>

案例：header 可以放置在任何地方表示头部信息。

主要标题h1>

次要标题(副标题)h2>

hgroup>

header>

页面正文区域p>

王者荣耀h1>

游戏h2>

header>

asdjhasj asd asdas d asd asd as das d asd s vdf bg fv df v p>

article>

王者荣耀h1>

游戏h2>

header>

asdjhasj asd asdas d asd asd as das d asd s vdf bg fv df v p>

section>

div>

footer  元素代表页面或内容块的底部信息(页脚)

1. 通常含有该节点的一些基本信息(譬如：作者、相关文档、版权资料等)

2. 如果 footer 元素包含整个节，那么他们就代表附录，索引等类似信息。

3. footer 元素没有个数限制，除了包裹不一样，其他和 header 类似。

©2018

  • HTML5li>
  • CSS3li>
  • JavaScriptli>

    ul>

    section>

    footer>

    &copy ： 版权符号

    nav 元素代表页面的导航连接区域，用于定义页面上的 主要导航部分 ，一般只用在整个页面主要导航部分上，不合适就不要用 nav 元素！

    • HTML5li>
    • CSS3li>
    • JavaScriptli>

      ul>

      nav>

      article 元素代表一个在文档、网页或者网站中自成一体的内容

      1. 其目的是为了让开发者独立开发或重用。

      2. 譬如论坛的帖子、博客文章、一片用户的评论、一个混动的 widget 小工具。

      3. article 会有一个标题(通常会在 header 中)，会有一个 footer 页脚。

      4. 如果在 article 内部在嵌套 article，那就代表内嵌的 article 是与他外部的内容有关联的，如博客文章下的评论。

      文章标题h1>

      文章内容p>

      版权small>p>

      footer>

      article>

      article 嵌套相对来说比较恶心人，但是经常用到，所以说恶心人也忍着！！例如：看下边，先别蒙，挺住！！

      一篇文章h1>

      2018-04-23time>p>

      header>

      文章内容p>

      评论h2>

      评论人h3>

      一小时前time>p>

      header>

      评论内容p>

      article>

      评论人h3>

      一小时前time>p>

      header>

      评论内容p>

      article>

      article>

      article>

      aside 元素放置主要内容的附属信息部分

      aside 中的内容可以是与当前文章有关的相关资料、标签、名词解释等，或者作为页面或者站点的全局的附属信息部分，如广告，其他日志连接或者其他分类导航等。用的不是特别的多，还是看心情。

      文章内容p>

      作者简介h1>

      内容介绍p>

      aside>

      article>

      section 元素表示文章的节或者页面的一个区块

      段是指一篇文章里按照主题的分节，区块是指一个页面里的分组。

      section 通常带有标题。

      虽然 HTML5 中的 section 会自动给标题 h1 - h6 降级，但是最好手动给他们降级。

      article、nav、aside 可以理解为特殊的 section。

      所以如果可以用 article、nav、aside 就不要用 section，没有实际意义的用 div。

      24b5e606429271bdc97298e573e78a5f.png

      王者荣耀h1>

      诸葛亮h2>

      是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大Vp>

      section>

      李白h2>

      是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大Vp>

      section>

      狄仁杰h2>

      是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大Vp>

      section>

      虞姬h2>

      是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大Vp>

      section>

      article>

      在一个大的节点下，可以有多个文章(反向嵌套)。

      0d177bc4337afa7565a429ebd65cb0f9.png

      原文h2>

      充分是的收发把是地方深V地方vAV深V 深V深V深V深V突然VR是大V突然表示同意p>

      译文h2>

      译文1标题h3>savccsvvsvjfsdkljviodrdnortsdvfniodyrntskbohtnkddyrnsbfvbghjmnybgfvgbhjnkmi,mujngvfarticle>

      译文2标题h3>savccsvvsvjfsdkljviodrdnortsdvfniodyrntskbohtnkddyrnsbfvbghjmnybgfvgbhjnkmi,mujngvfarticle>

      section>

      稍微刺激一点的 小练习 (挺住！别慌！)：

      看下边的图片:

      db0210932e1a19cbce8e885febdea877.png

      主题结构：

      7b94c4c7f0aa4000843ef155a2568e9d.png

      关键HTML代码：

      Simpel HTML5 Blogheader>

      • Bloga>li>
      • Abouta>li>
      • Contacta>li>

        ul>

        nav>

        Blogs post for 2018header>

        sdcsdcscfsh1>

        header>

        sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth p>

        sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth p>

        article>

        sdcsdcscfsh1>

        header>

        sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth p>

        sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth p>

        article>

        sdcsdcscfsh1>

        header>

        sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth p>

        sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth p>

        article>

        section>

        tag cloudaside>

        © 2018footer>

        语义化标签的注意事项

        在SEO中，搜索引擎非常重视 h1，但是 title 的权重要高于 h1.

        h1 的目的是告诉搜索引擎这部分的内容很重要，要求贴近文章内容，突出主题。

        一个页面最好只用一个 h1 ， h1 用得太多，会稀释主题。

        从网站角度而言，title 则侧重于网站信息的标题，突出网站标题或关键字。

        一个网站可以有多个 title，一个单页用一个 title 一遍突出网站页面内的主题信息。

        早期(IE8 之前)的浏览器不支持 html5 的新增标签，不过没关系，把下面的代码敲过去：

        94e7b4c85052a1995dd251d4be6844dd.png

        脚本放在 body 标签的最底部！！但是上边的代码放在 head 里面。

        总结

        HTML5 简介：

        HTML5 是由 IETF、 W3C 、WHATWG 等组织更痛推动完善。

        比较重要的几个HTML版本是：HTML4.01、HTML1.0、HTML5.

        1da9619b8fba0de1605a1227ac5e5fdf.png

        DOCTYPE 验证

        577a2266bf94981b94c65f499d9e4509.png

        HTML5 的新特性

        76d5f0bc0a45985e1ab02f9c9df284e0.png

        HTML4 和 HTML5 的区别

        10cc2bb64b38ab53e7c5e394abcdea98.png

        语义化标签的基本概念：

        8cd582d184e2a43d07e4cf901b3468fb.png

        语义化标签

        a69792f03e29dd581fe561f8e29f519b.png

        推荐个网址，用来处理早期浏览器不能解决HTML5标签的问题：

        对，就是这个网址 html5shiv

        OK ! 这一部分终于结束了，哈哈哈，真他妈的累！

weixin_39845113
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML第十次课堂笔记（新增语义化标签）
m0_59248606的博客
03-14 1074
一.HTML5是什么 HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。 html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。 ...
HTML5新增的语义化标签
原地起飞
08-02 3813
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
HTML5 语义元素
qq_35892775的博客
10-15 492
语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. <section> 元素 &l...
HTML一些新增的语义化标签
Letas的博客
12-29 278
语义化的一些标签目的是使代码更容易被理解，有利于其他设备语义化理解和搜索引擎优化（SEO） 语义化标签 在写HTML时尽量选择语义化标签，新增的语义化标签有： <header>定义页面头部 <nav>定义导航标签 <article>定义页面独立区域，通常为文章 <aside>定义页面侧边栏内容 <d
HTML5--html新增语义化标签
cmy741741的博客
06-15 633
：定义页面独立的内容区域（可以嵌套使用，可以表示插件）。：定义文档中的节（section，区段）。:定义导航链接的部分。:定义页面的侧边栏内容。:定义日期或时间。:定义了文档的头部区域。：定义 section 或 document 的页脚。：被用来对标题元素进行分组。：定义文档作者/所有者的联系信息。 ———————————————— 版权声明：本文为CSDN博主「Ass...
HTML新特性，新增的语义化标签
阿牛哥的博客
12-12 400
HTML新增的语义化标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
HTML5新特性之语义化标签
09-27
HTML5新增了一系列语义化标签，如`<article>`用于定义独立的内容区块，`<section>`用于划分页面的区域，`<aside>`通常用于侧边栏内容，`<hgroup>`用于组合多个标题，`<header>`和`<footer>`分别表示页面的头部和尾部...
Html5新增标签有哪些
09-27
根据给定的文件内容，以下是HTML5新增标签的详细知识点，以及它们的用法和意义。 1. 标签：这是HTML5中新增的一个用于嵌入音频内容的媒体播放标签。它允许直接在网页中嵌入音频文件，而无需任何插件支持。主要属性...
13-html5新增的语义标签.html
09-11
13-html5新增的语义标签.html
HTML5不支持标签和新增标签详解
09-27
在这个过程中，HTML5淘汰了一些不再被推荐使用的标签，同时引入了许多新的标签，以更好地支持网页内容的结构化和语义化。 首先，让我们来看看HTML5不再支持的标签： 1. `<acronym>`：这个标签用于定义只取首字母的...
HTML5 新的语义化标签
最新发布
一名全栈开发工程师
06-02 1181
CSS3 和 HTML5 引入了大量新特性，为前端开发提供了更多功能和更好的语义化支持。这本教程将详细介绍 CSS3 新语法和技巧，以及 HTML5 新的语义化标签元素，如等。希望通过本教程，读者能够掌握这些新特性的使用方法，提高前端开发水平。
【HTML5系列】第一章 · HTML5新增语义化标签
麟-小白的博客
05-14 1099
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！目录【往期回顾】1.HTML5简介1.1什么是HTML5HTML5是新一代的HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。官网地址：W3C提供：WHATWG。
HTML语义化以及HTML5新增语义化标签
qq_40950549的博客
02-11 359
一、为什么要进行HTML语义化现在的页面通篇都是div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方W3C，也在HTML5给出了几个新的语义化的标签。二、什么是HTML语义化HTML语义化其实就是HTML标签语义化，根据文本的结构化，用正确的标签做正确的事情，便于开发者的阅读和写出更优雅的代码。三、为什么要进行语义化1、为了在没有css代码时，也能呈现很好...
HTML 语义化标签-新增标签介绍
weixin_30346033的博客
04-25 192
HTML 基础知识 版权声明：未经博主授权，内容严禁转载 ！ HTML语义化标签概念 如果没有语义化标签，上面这些 div 都是没有实际意义的，只是我们提供给浏览器的指令。 和 语义化 代码对比： 什么是语义化 　　1. 根据内容结构化（内容语义化）。 　　2. 选择合适的标签（代码语义化）. 　　3. 便于开发者阅读和写出更好的...
HTML5新增语义化标签练习
bigmeow_lyj的博客
04-12 623
经典的页面布局中，页面被分为 header、main、aside、footer 四个部分 传统都是用多个div盒子 新增的部分语义化： <article>定义文章 <figure> 标签规定独立的流内容（图像、图表、照片、代码等等） <figcaption> 定义 figure 的标题 <aside> 定义文章的侧边栏 <footer>定...
『HTML系列』语义化标签（H5）
老__L的博客
02-12 5462
本文主要介绍address、article、aside、footer、header、nav、section标签。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
HTML基础学习下（3）语义化注意事项
ACMerdsb的博客
12-26 233
前端面试题-HTML语义化标签
weixin_34236497的博客
03-22 387
一、HTML5语义化标签 标签 描述 <article> 页面独立的内容区域。 <aside> 页面的侧边栏内容。 <bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。 <command> 命令按钮，比如单选按钮、复选框或按钮 <details&g...
HTML5新增特性
l12345666777的博客
10-18 330
相较之前的HTML版本，HTML5新增了一些页面布局的语义化标签，音视频多媒体标签，还有一些表单控件、属性，他们可以帮助前端开发人员更高效的开发一个网页，新增的语义化标签使得页面结构化，便于浏览器和搜索引擎解析，也有利于开发人员阅读和维护。
HTML5新增标签详解：语义化标签、多媒体支持和浏览器兼容性
HTML5 新增标签 HTML5 是一项革命性的技术，它的出现改变了 web 开发的格局。HTML5 新增了许多标签，这些标签的出现使得 web 开发更加简洁、方便。下面我们来了解 HTML5 中的一些新增标签。 **语义化标签** 语义化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值