H5新增特性之语义化标签
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新增特性之语义化标签的更多相关文章
- H5新特性之语义化标签
一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...
- HTML html5 语义化标签
什么是语义化标签 语义化标签就是具有某种含义及结构的标签,让其更容易理解和使用. HTML5 新增了一些语义化标签,如下: article article 标签装载显示一个独立的文章内容.例如一篇完整 ...
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- Html5新增的语义化标签(部分)
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...
- HTML 语义化标签-新增标签介绍
HTML 基础知识 版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念 如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和 语义化 代码对比: 什 ...
- H5的语义化标签(PS: 后续继续补充)
头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...
- 笔记二:常用的h5语义化标签
0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...
- H5中的语义化标签
H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...
- html5新增的语义化标签极其作用
在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...
随机推荐
- Mac电脑没声音了怎么办?苹果电脑没声音的解决方法
在使用Mac电脑的过程中,偶尔会出现电脑没声音?发出奇怪的声音?连接外部音频设备出问题等音频故障,遇到这种情况该怎么办呢?小编有妙招! 检查音量 首先检查Mac是否被静音,按住F12快捷键或滑动菜单栏 ...
- Utf8BomRemover
// // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler ...
- 吴裕雄--天生自然 pythonTensorFlow图形数据处理:windows操作系统删除tensorflow
输入:pip uninstall tensorflow Proceed(y/n):y
- 14 微服务电商【黑马乐优商城】:day04-项目搭建(一)
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...
- Educational Codeforces Round 80 (Rated for Div. 2)D E
D枚举子集 题:https://codeforces.com/contest/1288/problem/D题意:给定n个序列,每个序列m个数,求第i个和第j个序列组成b序列,b序列=max(a[i][ ...
- Opencv笔记(十一)——图像模糊(平滑)
学习目标: 使用自定义的滤波器对图像进行卷积(2D 卷积) 学习使用不同的低通滤波器对图像进行模糊 一.2D卷积 卷积不是很了解的可以看我上一篇博客,与语音信号一样,我们也可以对 2D 图像实施低通滤 ...
- PhpMyadmin各版本漏洞合集
1.PhpMyAdmin存在PREGREPLACEEVAL漏洞 影响版本: 3.5.x < 3.5.8.1 and 4.0.0 < 4.0.0-rc3 利用模块: exploit/mult ...
- 腾讯云 Serverless 首发 1ms 计费粒度,立省 70% 费用
云函数 SCF 采用按需付费的方式,并首次发布 1ms 计费粒度,真正实现按使用多少计算能力来计费. 云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的 ...
- Contiguous Repainting
题目描述 There are N squares aligned in a row. The i-th square from the left contains an integer ai. Ini ...
- 吴裕雄--天生自然python学习笔记:爬取我国 1990 年到 2017年 GDP 数据并绘图显示
绘制图形所需的数据源通常是不固定的,比如,有时我们会需要从网页抓取, 也可能需从文件或数据库中获取. 利用抓取网页数据技术,把我国 1990 年到 2016 年的 GDP 数据抓取出来 ,再利用 Ma ...