使用语义话标签的意义
  语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时 候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
  除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合 搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升
  网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。

对于语义标签的态度是:“用对”比“不用”好,“不用”比“用错”好。

常用标签集合:

  1.   header 通常出现在前部,表示导航或者介绍性的内容
  2. nav 定义导航链接的部分
  3. footer 通常出现在尾部,包含一些作者信息、相关链接、版权信息等。
  4. section: 代表某一个区域,分区,页面或者文档的一部分区域,有独立的内容,但结构相近,就可以用section,范围比div大,语义比div更强,可以包含headerh1-h6……凸显语义的标签
  5. hgroup 用于对网页或区段(section)的标题进行组合
  6. eg:
  7. <section>
  8. <hgroup>
  9. <h1>this is h1 of my article</h1>
  10. <h2>this is h2 of my article</h2>
  11. </hgroup>
  12. <p>The rest of the content...</p>
  13. </section>
  14. article:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章、或者来自 blog 的文本、或用户评论、或者是来自论坛的文本。亦或是来自其他外部源内容。
  15. aside 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容,很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是 asideaside 不一定是 侧边栏。
  16. time: 定义日期或时间,或者两者。
  17. video: 定义视频,比如电影片段或其他视频流.
  18. canvas: 定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
  19. audio: 定义声音,比如音乐或其他音频流。
  20. address:表示“文章(作者)的联系方式“
  21. datalist:定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
  22. details 用于描述文档或文档某个部分的细节
  23. summary 包含 details 元素的标题,”details 元素用于描述有关文档或文档片段的详细信息。”summary 元素应该是 details 元素的第一个子元素

h5 语义话标签的意义的更多相关文章

  1. 笔记二:常用的h5语义化标签

    0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...

  2. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

  3. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  4. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  5. H5的语义化标签(PS: 后续继续补充)

    头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...

  6. H5新特性之语义化标签

    一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...

  7. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  8. H5 语义化、基本事件 浅析 (含file对象、drag拖拽等)

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  9. HTML5 结构性标签 行内语义性标签

    结构性标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

随机推荐

  1. powershell编程实例-001-生成指定大小的null/zero文件或随机文件

    NULL文件,也有的称为zero文件,即全是二进制/十六进制的0文件 在powershell 中可以按如下方法生成指定大小的zero文件: 只需要修改大小即可,格式如3MB,或者2GB $tempFi ...

  2. Git【常见知识点速查】

    文章更新时间:2020/06/17 一.基础知识点解析 Git工作流程 以上包括一些简单而常用的命令,但是先不关心这些,先来了解下面这4个专有名词. Workspace:工作区 Index / Sta ...

  3. MyBatis学习(三)日志输出环境配置

    一.编写日志输出环境配置文件 在开发过程中,最重要的就是在控制台查看程序输出的日志信息,在这里我们选择使用 log4j 工具来输出: 准备工作:将[MyBatis]文件夹下[lib]中的 log4j ...

  4. Python-装饰器中保留被装饰函数元数据

     函数的元数据包括哪些呢? 1. 函数名 .__name__ 2. 函数注释 .__doc__ ... 那,如何保留被装饰函数元数据,通过wraps装饰器保留被装饰函数的元数据 import time ...

  5. CS:APP配套实验 Data Lab

    刚刚完成注册博客,想写一篇随笔,方便以后自己回顾.如果恰好也能帮助到你,是我的荣幸. 这次随笔是记载我的计算机系统(CS:APP,Computer Systems:A Programer's Pers ...

  6. 【小白学PyTorch】20 TF2的eager模式与求导

    [新闻]:机器学习炼丹术的粉丝的人工智能交流群已经建立,目前有目标检测.医学图像.时间序列等多个目标为技术学习的分群和水群唠嗑的总群,欢迎大家加炼丹兄为好友,加入炼丹协会.微信:cyx64501661 ...

  7. c++中CString:: Find , ReverseFind, Left, Right

    CString 是在MFC中的头文件 非MFC加上afx.h头文件 直接上代码: // ConsoleApplication1.cpp : Defines the entry point for th ...

  8. Visual Studio中Debug与Release以及x86、x64、Any CPU的区别 &&&& VS中Debug与Release、_WIN32与_WIN64的区别

    本以为这些无关紧要的 Debug与Release以及x86.x64.Any CPU 差点搞死人了. 看了以下博文才后怕,难怪我切换了一下模式,程序就pass了.... 转载: 1.https://ww ...

  9. Android高级控件(下)

    计时器(Chronometer) getBase() 基准时间 setFormat() 设置显示格式 start() 开始计时 stop() 停止计时 setOnChronometerListener ...

  10. Activity的常用控件

    TimerPick(时间控件)public Integer getCurrentHour() //返回当前设置的小时public Integer getCurrentMinute()//返回当前设置的 ...