HTML5--(1)兼容前缀+结构性标签+语义化标签
一、兼容前缀+兼容写法
兼容前缀
1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑.
2.部分内容需要加兼容前缀
a) -webkit- 兼容谷歌
b) -moz- 兼容火狐
c) -o- 兼容欧朋
d) -ms- 兼容IE
e) 例子:-webkit-样式属性
3.兼容性查询网站: http://caniuse.com
兼容写法
IE版本:如果小于等于IE 9 就执行if语句里面的代码 ( It小于 lte小于等于)

二、结构性标签(带有语义化)
- <header></header>页眉,也可用与块头部
- <nav></nav>导航
- <section></section>页面上的板块 一个小区有
- <article></article>用来在页面中表示一套结构完整且独立的内容部分 页面中某一个完整的部分 <article>标签里面可以放</section>标签
- <aside></aside>侧边栏,广告,nav元素组,以及其它类似的内容部分aside的内容应该与artical的内容相关
- <footer></footer>页面的底部或者板块的底部
三、语义化标签
1.<hgroup></hgroup>一个标题和一个子标题,或者标语的组合

2. <figure></figure>用于对元素进行组合.一般用于图片或视频
3. <figcaption></figcaption>为元素添加标题

4. <time></time>用来表示时间或日期

5. <datalist></datalist>标签定义选项列表.请与input元素配合使用该元素,来定义input可能的值.请使用input元素的list属性来绑定datalist 的ID.

6. <details></details>用于描述文档或文档某部分的细节.该元素用于摘录引用等,与标签配合使用 默认关闭的 打开需要加open属性
7.<summary></summary>detailst元素的标题

8.<dialog></dialog>定义一段对话,默认是关闭的 展开需要添加open属性

9.<address></address>定义文章或页面作者的详细联系信息 字体是斜体 可以用font-style:normal 改正字体

10.<meter></meter>定义已知范围或数值内的标量测量.也被称为gauge(尺度).
max 最大值属性
min 最小值属性
value 当前值属性
low 下限
high 上限


11.<progress></progress>定义进度条
.
12. <mark></mark>需要标记的词或句子,默认黄色背景.
HTML5--(1)兼容前缀+结构性标签+语义化标签的更多相关文章
- HTML5学习之语义化标签(一)
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML html5 语义化标签
什么是语义化标签 语义化标签就是具有某种含义及结构的标签,让其更容易理解和使用. HTML5 新增了一些语义化标签,如下: article article 标签装载显示一个独立的文章内容.例如一篇完整 ...
- 让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- HTML5语义化标签总结
1.语义化标签总结 基础布局标签 <header></header> <nav></nav> <main></main> < ...
- HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性
1.知识点 lang = “en” 所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
随机推荐
- 【cocos2d-x 手游研发小技巧(3)Android界面分辨率适配方案】
先感叹一下吧~~android的各种分辨率各种适配虐我千百遍,每次新项目我依旧待它如初恋···· 每家公司都有自己项目工程适配的方案,这种东西就是没有最好,只有最适合!!! 这次新项目专项针对andr ...
- python网络编程--操作系统介绍
1.操作系统介绍 操作系统位于计算机硬件与应用软件之间,本质也是一个软件.操作系统由操作系统的内核(运行于内核态,管理硬件资源)以及系统调用(运行于用户态,为应用程序员写的应用程序提供系统调用接口)两 ...
- python中的列表和元组
1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求,列表存在索引和切片. 和字符串是一样的. 2.相关的增删改查操作 切片 列表和 ...
- DOS目录相关命令
MD----创建自目录命令 格式:MD[盘符:][路径名]<子目录名> 1)在C盘的根目录下创建名为FOX的子目录 C:\>MD FOX 2)在FOX子目录下创建USER子目录 ...
- php socket 简单理解
以下内容转自:https://www.cnblogs.com/loveyoume/p/6076101.html 和 https://www.cnblogs.com/WuNaiHuaLuo/p/6107 ...
- robot framework学习笔记之三—Scalar变量
一.变量赋值 1)Set赋值 通常使用Set Variable关键字对变量进行赋值,其他Set相关的带Variable的关键字也可以进行赋值 赋值的时候,变量后面写不写『=』都可以,如下: 如果${v ...
- 使用 Hexo + github 搭建个人博客
来自:http://www.cnblogs.com/fengzheng/p/8031518.html Hexo 是什么 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或 ...
- find查找文件命令 - Linux系统中的常用技巧整理
“find”在Linux系统中是比较常用的文件查找命令,使用方法有很多,可以拥有查找文件.文件目录.文件更新时间.文件大小.文件权限及对比文件时间.下面是整理的“find”常用方法,方便以后需要的时候 ...
- Luogu P1351 联合权值 题解
这是一个不错的树形结构的题,由于本蒟蒻不会推什么神奇的公式其实是懒得推...,所以很愉快的发现其实只需要两个点之间的关系为祖父和儿子.或者是兄弟即可. 然后问题就变得很简单了,只需要做一个正常的DFS ...
- kubernetes pod termination pending
在将k8s从1.7.9 升级到1.10.2 之后,发现删除pod一直处于terminating状态, 调查发现删不掉的pod都有一个特点就是pod yaml中command部分写错了,如下所示: ap ...