- h5新增的标签

新增元素 说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main  
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template  
section  
nav  
aside  
article  
footer  
header  

- css3 
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

  • 选择器

  • 框模型

  • 背景和边框 
    border-radius、box-shadow、border-image、 
    background-size：规定背景图片的尺寸 
    background-origin：规定背景图片的定位区域 
    background-clip：规定背景的绘制区域
  • 文本效果（常用） 
    text-shadow：设置文字阴影 
    word-wrap：强制换行 
    word-break 
    css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
  • 2/3D转换 
    transform：向元素应用2/3D转换 
    transition：过渡
  • 动画
  • @keyframes规则： 
    animation、animation-name、animation-duration等
  • 用户界面（常用） 
    box-sizing、resize 
    css3新增伪类 
    ：nth-child() 
    ：nth-last-child() 
    ：only-child 
    ：last-child 
    ：nth-of-type() 
    ：only-of-type() 
    ：empty 
    ：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。 
    ：enabled 
    ：disabled 
    ：checked 
    ：not

语义化标签：

从开发者角度提高代码的可读性和可维护性

从网站角度，SEO优化

语义化标签的兼容问题：IE9以下不支持h5/css3标签，部分h5的api（ie9以下只是把这些标签当做行内元素看待）

解决方式：

语义化标签需要动态创建出来document.creatElement()，同时将新创建的元素设置成块级元素

或者是使用插件 `html5shiv.js `（必须引入在头部，在页面结构加载之前）

对于高版本浏览器不需要判断，只需要判断低版本浏览器即可：js可以判断客户端浏览器版本可以做到，但是不能做到js提前加载（navigator.userAgent）

解决：条件注释：根据浏览器版本加载内容（HTML/CSS等）

<head>
　　<title></title>
　　<!--[if lt IE 9]>

	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>

　　<![endif]-->
</head>




　　




												


											
h5新增标签及css3新增属性的更多相关文章
	

    
								
  1. HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
		
    要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...
    
		
    2. 
						
  2. CSS3新增的选择器和属性
		
    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
    
		
    3. 
						
  3. 盒子模型，定位技术，负边距，html5 新增标签
		
    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...
    
		
    4. 
						
  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
		
    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
    
		
    5. 
						
  5. css3新增属性API
		
    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...
    
		
    6. 
						
  6. CSS3 新增的文本属性
		
    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
    
		
    7. 
						
  7. CSS3主要知识点复习总结+HTML5新增标签
		
    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...
    
		
    8. 
						
  8. H5和CSS3新增内容总结
		
    CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴影(text-shadow.) 边框: 圆角(border-rad ...
    
		
    9. 
						
  9. 高效开发之SASS篇     灵异留白事件——图片下方无故留白    你会用::before、::after吗    link 与 @import之对比    学习前端前必知的——HTTP协议详解    深入了解——CSS3新增属性    菜鸟进阶——grunt   $(#form :input)与$(#form input)的区别
		
    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 原创科幻短篇《VR》
			
    近些年VR很火,现在似乎又降温了,那么问题来了:VR到底有前景吗?我农村来的读书又少看不清楚哇.近些年房地产很火,现在似乎还是很火,那么问题来了:房价到底会降吗?我农村来的读书又少看不清楚哇. 以下正 ...
    
			
    2. 
						
  2. 星云STS 常用配置
			
    STS4  下载地址:https://spring.io/tools    (这个版本没有tomcat插件) STS3  下载地址:https://spring.io/tools3/sts/all ( ...
    
			
    3. 
						
  3. 【CFD之道】2017年原创文章汇总
			
    1 Fluent案例(21篇) [Fluent案例]01 空气流经障碍物 [Fluent案例]02:Tesla阀 [Fluent案例]03:RAE2822翼型外流场计算 [Fluent案例]04:多孔 ...
    
			
    4. 
						
  4. 【Spark深入学习 -15】Spark Streaming前奏-Kafka初体验
			
    ----本节内容------- 1.Kafka基础概念 1.1 出世背景 1.2 基本原理 1.2.1.前置知识 1.2.2.架构和原理 1.2.3.基本概念 1.2.4.kafka特点 2.Kafk ...
    
			
    5. 
						
  5. ffmpeg中AVBuffer的实现分析
			
    [时间:2017-10] [状态:Open] [关键词:ffmpeg,avutil,avbuffer, 引用计数] 0 引言 AVBuffer是ffmpeg提供的基于引用计数的智能指针的一个实现版本. ...
    
			
    6. 
						
  6. docker容器运行与退出
			
    #下载centos镜像,运行一个名为mycentos的容器,并在容器里运行/bin/bash docker run -ti --name mycentos centos /bin/bash #退出 e ...
    
			
    7. 
						
  7. 字符集之在UTF-8中，一个汉字为什么需要三个字节？
			
    (一)在UTF-8中,一个汉字为什么需要三个字节? UNICODE是万能编码,包含了所有符号的编码,它规定了所有符号在计算机底层的二进制的表示顺序.有关Unicode为什么会出现就不叙述了,Unico ...
    
			
    8. 
						
  8. 交换上的FLAPPING事件 (zhuan)
			
    今天在学校的一个三层交换上看到持续的日志信息: Host 00:E0:FC:09:BC:F9is flapping between fa0/x and fa0/y. 思科对此官方的解释是: Error ...
    
			
    9. 
						
  9. 集合（从本部分开始涉及API）
			
    集合(从本部分开始涉及API) 集合是指一个对象容纳了多个对象,这个集合对象主要用来管理维护一系列相似的对象. 数组就是一种对象.(练习:如何编写一个数组程序,并进行遍历.) java.util.*定 ...
    
			
    10. 
						
  10. Android多种格式的异步解压/压缩解决方案
			
    前言 最近由于项目需要,需要我谅解一下关于在移动平台的解压功能,在移动平台解压,我个人感觉是没有太大必要的,毕竟手机的性能有限.但是,不口否认,移动端的解压功能又是必备的,因为如果对于一些资源管理器类 ...
    
			
    11.