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新增特性之语义化标签相关推荐
- html标签:表格、列表、图片、文字、表单、以及h5新增特性
文章目录 前言 一.表格 二.列表 三.图片 四.文字 五.表单 六.h5新增特性 1.语义化标签 2.表单新增input属性 3.datalist 4.filedset 5.mark标记标签 6.多 ...
- html5语义化标签 加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...
- 什么是HTML语义化标签?为什么要用H5语义化标签?HTML5语义化标签有哪些
对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标 ...
- HTML5新增的标签语义标签,HTML5新增的语义化标签解析
HTML5 新增了许多语义化标签 语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 作用 : 1.为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为 ...
- HTML语义化标签:
1.HTML语义化标签: 语义化标签,就是让标签有语义的含义,让浏览器或搜索引擎直观的认识这个标签所传达的信息,是干什么的有什么作用. 过去采用的DIV+CSS的方式布局的页面,让DIV标签没有独特意 ...
- h5的语义化部分_Html5新增的语义化标签(部分)
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...
- (12)H5新增语义化标签布局案例
一.标签语义化 以前制作网页布局,我们基本用div来做.div就是一个普通的块级标签,对于搜索引擎来说,是没有语义的. <!DOCTYPE html> <html lang=&quo ...
- H5新增语义化标签以及属性
结构标签 (1)<section></section> 独立内容模块 ,可以h1-h6组成大纲 ,表示文档结构,有章节.页眉.页脚或其他部分.(2)article (文章) 文 ...
- H5新特性(四)——语义化标签
语义化标签 什么是语义元素? 语义是指对一个词或者句子含义的正确解释.很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息.例如,当浏览器解析到 标签时,它将该标签 ...
最新文章
- jmeter操作练习
- iOS - 数据的归档和反归档
- scrapy-redis 分布式学习记录
- 网站安全编程 黑客入侵 脚本黑客 高级语法入侵 C/C++ C# PHP JSP 编程
- 阿里首推的“SpringBoot+Vue全栈项目”有多牛X?
- java 蓝桥杯训练 数的统计
- MSSQL-Server On Docker
- 转换onnx_模型转换工具X2Paddle操作大全
- DELPHI基础教程 第七章 剪贴板和动态数据交换
- 0基础入门VTD—前言
- 关于COM类工厂80070005和8000401a错误分析及解决办法
- NW.js开发环境搭建
- 物联网智能家居基本方法实现之经典
- 计算机考试的知识要记忆背,2019年3月计算机等级考试这样复习才更有效率
- Linux目录一个点.和两个点..的区别
- FASTX-Toolkit
- Windows系统 gpedit命令详解,Windows系统使用命令行查看组策略
- 使用Bcrypt进行密码加密
- Android注解之从入门到并没有放弃
- GSMA宣布了首批2017世界移动大会-上海主题演讲嘉宾名单
热门文章
- linux: chmod,chown命令详解
- python——Web服务开发(二)分布式缓存
- 【AI视野·今日CV 计算机视觉论文速览 第201期】Wed, 19 May 2021
- 【AI视野·今日CV 计算机视觉论文速览 第183期】28 Apr 2020
- Linux—vi/vim全局替换
- 自定义异常 java
- 1106 数组的复习 随堂笔记 c103
- 谷歌浏览器安装过程 0911
- mysqld: [Warning] World-writable config file ‘/etc/my.cnf‘ is ignored.问题解决
- 作为一枚学生党,如何快速通过拉好友赚取生活费!