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

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

常用标签集合:

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

    一.安装mysql 1.查看可用的 MySQL 版本 访问 MySQL 镜像库地址:https://hub.docker.com/_/mysql?tab=tags . 可以通过 Sort by 查看其 ...

  2. 【转】Locust性能-零基础入门系列(2) -重写wait_time

    在虚拟模拟的时候,可能对等待时间有更高的要求,比如假如有这么一个场景要求:某任务要求每被执行1次,那么下次的等待时间就1秒钟.这种情况,是可以实现的,这也就体现了Locust的灵活性.可编程性,很多比 ...

  3. SpringValid优雅校验入参

    一.简介 后台业务入口类Controller,对于入参的合法性校验,可以简单粗暴的写出一堆的 if 判断,如下: @RestController @RequestMapping("user& ...

  4. 详解如何使用koa实现socket.io官网的例子

    socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下利用 socket.io 实现消息实时推送 框架准备 1.确保你本地已经安装好了nodejs和np ...

  5. 详细分析 Java 中启动线程的正确和错误方式

    目录 启动线程的正确和错误方式 前文回顾 start 方法和 run 方法的比较 start 方法分析 start 方法的含义以及注意事项 start 方法源码分析 源码 源码中的流程 run 方法分 ...

  6. makefile实验四 编译本地的源文件 + 变量的高级主题一

    <一>编译本地的源文件 + 变量的模式替换    实验代码 root@ubuntu:~/Makefile_Test/5make_test# vim makefile target := t ...

  7. JavaScript函数报错SyntaxError: expected expression, got ';'

    故事背景:编写Javaweb项目,在火狐浏览器下运行时firebug报错SyntaxError: expected expression, got ';'或者SyntaxError: expected ...

  8. 实验 2:Mininet 实验——拓扑的命令脚本生成

    一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二.实验任务 通过使用命令行创建.Python 脚本编写生成拓扑,熟悉 Mininet 的基本功能. 三. ...

  9. linux下各种骚操作

    (备注:不定时更新) 1. ctrl+l  清屏快捷键,相当于clear 2. !+命令开头部分   执行最近执行的此条命令   ### 如!vi  编辑上一次用vi打开的文件, 3. echo $$ ...

  10. 《穷查理年鉴》金钱 & 生意 & 律师(关于金钱)

    金钱 025.钱还得快才会借得快. 030.钱和人有着复杂的友谊:人能让钱变坏,钱也能让人变坏. 034.绝望增加债务,勤奋偿还债务. 037.只有一无所有的人才会没有烦恼. 049.穷人为他的胃找食 ...