一、HTML5

1、新特性:
1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ...
2. 新表单元素引入
3. 新语义标签的引入
4. canvas标签(图形设计)
5. 本地数据库(本地存储)
6. 一些API
好处:
1. 跨平台
例如:比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。

缺点:
1. pc端浏览器支持不是特别友好,造成用户体验不佳


2、## 新语义标签

 

### 网页布局结构标签及兼容处理

```html
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....

布局结构标签 兼容IE处理方式:

a、document.createElement("nav");
display:block;


b、通过js插件——(语义标签兼容处理插件:html5shiv.js)
<script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>

c、(终极解决方案)快捷键:cc:ie6 + tab键
<!--[if lte IE 8]>
<script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>
<![endif]-->

 

### 多媒体标签及属性介绍

<video></video> 视频
属性:controls 显示控制栏
属性:autoplay 自动播放
属性:loop 设置循环播放

<audio></audio> 音频
属性:controls 显示控制栏
属性:autoplay 自动播放
属性:loop 设置循环播放


多媒体标签在网页中的兼容效果方式(巧用source兼容)

<video>
<source src="code/多媒体标签/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>

 

### 智能表单控件

<input type="email">

email: 输入合法的邮箱地址(省去写正则表达式的烦恼)
url: 输入合法的网址
number: 只能输入数字
range: 滑块
color: 拾色器
date: 显示日期
month: 显示月份
week : 显示第几周
time: 显示时间

 

### 表单属性

form属性:
autocomplete = on | off 自动完成(默认打开)
novalidate (= true | false) 是否关闭校验


input属性:
* autofocus 自动获取焦点
multiple 实现多选效果
* placeholder:"" 占位符 (提示信息)
* required 必填项

form = "id"

list = "id"
例: <input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>

 

posted on 2019-07-22 13:36  竹林听雪  阅读(222)  评论(0编辑  收藏  举报