H5新增特性之语义化标签

  语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么。在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。

一、根据页面的结构。

  section元素 表示页面中的一个区块

  article元素 表示一块与上下文无关的独立的内容

  aside元素 在article之外的,与article内容相关的辅助信息

  header元素 表示页面中一个内容区块或整个页面的标题

  footer元素 表示页面中一个内容区块或整个页面的脚注

  nav元素 表示页面中导航链接部分

  hgroup标题的一个分组

二、媒体元素组合

  figure元素 表示一段独立的内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

    <figure>和 <figcaption>:<figure>为父元素,用于图片的外层,其子元素<figcaption>用来对内容进行说明。

  embed 标记定义外部的可交互的内容或插件 比如flash

三、time时间

  <time>标签,专门用来表示时间

四、文档内容

  mark定义高亮显示的文本(span)

    <mark> 标签,定义带有记号的文本。在需要突出显示文本时使用 该 标签,默认加黄色背景。

  main元素 表示页面中的主要的内容(ie不兼容)

  dialog标记定义一个对话框(会话框)类似微信

注意:语义化标签只是标签的语义化,和div使用地方法并没有多大区别,只是在使用的过程中省去了一些命名的麻烦。在家逆战学习努力成就更好的自己!!!

 

H5新增特性之语义化标签的更多相关文章

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

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

  2. HTML html5 语义化标签

    什么是语义化标签 语义化标签就是具有某种含义及结构的标签,让其更容易理解和使用. HTML5 新增了一些语义化标签,如下: article article 标签装载显示一个独立的文章内容.例如一篇完整 ...

  3. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  4. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  5. HTML 语义化标签-新增标签介绍

    HTML 基础知识 版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念 如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和 语义化 代码对比: 什 ...

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

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

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

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

  8. H5中的语义化标签

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

  9. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

随机推荐

  1. React 通过注释自动生成文档

    最近找了一些文档的生成工具,结果发现了这个 React Styleguidist 可以通过注释,自动生成对应的文档,对于 react 库来说十分方便 安装 npm i -D react-stylegu ...

  2. Eova 怎么放在 Docker中,使用阿里云流水线构建Eova!!

    Eova 快速开发框架不做过多解释,使用起来超级爽提高了我们的开发效率. 有要了解的可以去官网看下http://www.eova.cn/ 最近我们想在docker中运行并且使用阿里云的云效工具去构建部 ...

  3. C# 使用 HttpPost 请求调用 WebService (转)

    转自 https://www.cnblogs.com/Brambling/p/7266482.html 之前调用 WebService 都是直接添加服务引用,然后调用 WebService 方法的,最 ...

  4. day58-mysql-视图,触发器

    一. 视图 .1创建视图 create view p_view as select name,age from person; 视图的作用是隐藏数据,例如上面语句没有查询工资,是为了隐藏它,这样就避免 ...

  5. 初识数据库MySQL

    一.认识数据库  1:什么是数据(Data) 描述事物的符号记录被称为数据,这个符号可以是数字,文字,图片,声音,语言等 2:什么是数据库(DataBase,简称DB) 数据库是存放数据的仓库,库一般 ...

  6. 网络安全与CTF在线学习资源网站

    http://www.sec-wiki.com/skill/ 安全技能(里面渗透逆向编程都有介绍) http://blog.knownsec.com/Knownsec_RD_Checklist/ 知道 ...

  7. ubantu中的mysql命令

    查看mysql的安装目录:which mysql 进入mysql的运行状态:mysql -uroot -p 56..a_

  8. Socket设置超时时间

    主要有以下两种方式,我们来看一下方式1: Socket s=new Socket(); s.connect(new InetSocketAddress(host,port),10000); 方式2: ...

  9. python后端面试第六部分:git版本控制--长期维护

    ################## git版本控制 ####################### 1,git常见命令作用 2,某个文件夹中的内容进行版本管理:进入文件夹,右键git bash 3, ...

  10. A 小石的签到题

    题目链接:https://ac.nowcoder.com/acm/contest/949/A 思路: 这题明确的说了是个签到题,但是一直怀疑不是签到题,是唬我的,结果仔细想了想真是这么回事. 每个人必 ...