HTML发展
HTML5 是从Web Applications 1.0 项目发展而来的,由网页超文本技术工作小组
(WHATWG)发起,后被W3C 采纳。HTML5 规范的大部分内容都偏重于处理Web 应用
程序。
Expectation of the future
- HTML5 ≈ HTML + CSS + JavaScript + API
- WebAPP
- HTML5新增了离线存储,更丰富的表单,js,socket,扩展embed,css3
- 流媒体与多媒体引擎(Audio,Video,Canvas,webgl等等)增强
- 方便搜索引擎无障碍沟通(SEO)
这些优点毫无例外地帮助H5可以兼容PC,Mac,iPhone,Android(一次开发,多平台使用)
- 快速迭代(互联网产品大多免费,还有网络效应,后入者抢夺用户难度很大)
- 减低成本(Web APP 比 Native APP开发成本降低一倍)
- 导流入口多一些(H5 APP容易)
- 分发效率高
- 不过性能相比 Native APP 是差很多的(结合,组装,变形,Hybird APP)
- PC+移动=真正的互联网,AR,VR,智能硬件,视频变局,在线教育,泛娱乐
Real change
- 标签变化(DTD,Add,Delete,Redefine)
- 页面布局(flex)
- 属性变化(Input,Form Attr,Link Attr,Other Attr)
标签变化
定义和用法
沿用了HTML的语法(已往过去的语法,是SGML语法的一个子集),更简洁,更人性化。
早期的分严格,过渡(向下兼容),框架
DOCTYPE及字符编码
① DOCTYPE:<!doctype html> 必须是第一行html标签之前
② 字符编码:<meta charset="utf-8">
③ 给文档指定语言:<html lang="zh-CN">
快捷键:
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型
DTD(文档类型定义)为什么不再引用了呢?
HTML的DTD中,使用XML(语法)定义html标签规范,比如< a >是一个超链接
新增标签
结构标签
- (1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;
- (2)article:特殊独立区块,表示这篇页眉中的核心内容;
- (3)aside:标签内容之外与标签内容相关的辅助信息;
- (4)header:某个区块的头部信息/标题;
- (5)hgroup:头部信息/标题的补充内容;
- (6)figure:独立的单元(多媒体内容),例如某个有图片与内容的新闻块;
- (7)nav : 导航链接;
- (8)dialog : 对话框;
- (9)footer:底部信息。
建议:
- header,section,aside,article,footer不要自己嵌套自己
- header,section,footer优先级最高
- 第二级:aside,article,figure,hgroup,nav
- 第三级:div,figcaption
多媒体标签
- < video > 标记定义一个视频
- src
- autoplay
- loop
- controls
- width
- height
- < audio> 标记定义音频内容
- src
- autoplay
- loop
- controls
- < source > 标记定义媒体资源
- < embed >
HTML4时期embed并没有得到W3C的认可
<audio src="../Source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">您的浏览器也该退休了,是否考虑一下Chrome这样的新鲜血液呢?</audio>
<audio autoplay="autoplay">
<source src="../Source/passion.mp3" type="audio/mpeg">
</audio>
<video src="../Source/pal4.mp4" controls="controls"></video>
<video controls="controls" width="1024" height="768">
<source src="../Source/pal4.mp4" type="video/mp4">
</video>
<embed src="../Source/HappyBirthday.swf" width="1024" height="768"></embed>
Web应用标签
- meter(颜色:黄色,绿色)
- value 显示值
- min
- max
- low 最佳范围
- high
- optimum最佳值
- progress
- value
- max
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>
<progress value="30" max="100"></progress>
<progress max="100"></progress>
<input placeholder="请选择您喜欢的手机品牌" list="phoneList" />
<datalist id="phoneList">
<option value="iPhone">iPhone</option>
<option value="Samsung">Samsung</option>
<option value="Huawei">Huawei</option>
<option value="hTC">hTC</option>
<option value="Meizu">Meizu</option>
</datalist>
<details open="open">
<summary>树下的猫</summary>
<p>我是一只坐在树下的貓,每天我都坐在树下,看花花世界,人海茫茫……
我每天都会做相同的梦,梦里看到一位公子,身患重病,危在旦夕。公子身边有一名女子,她的眼里尽是关切和深深的依恋。</p>
</details>
- menuitem和command标签有可能被放弃,因为奇葩
- menu在HTML4.01的时候给否掉了
丑逼华丽升级高富帅
<meun type="toolbar">
<li>
<menu label="File">
<button type="button">New...</button>
<button type="button">Open...</button>
<button type="button">Save...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button">Cut...</button>
<button type="button">Copy...</button>
<button type="button">Paste...</button>
</menu>
</li>
</meun>
其他标签
<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>
<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>,需要很新鲜的那种。</p>
<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
<input type="text" id="price" value="5000">
*<input type="number" id="number" value="1">
=<output name="totalPrice" for="price number"></output>
</form>
放弃标签(不主张,别忘了是向下兼容的)
- 结构与表现分离
- iframe
- acronym首字母缩写
重定义标签
属性类型
新增属性
input
- input
- email (移动端输入界面猴头和点的出现)
- url
- number(电脑端智能识别数字0-9-+.e)
- range
- Date picker
- Datetime(S,O)和Datetime-local(S,O,C).火狐和IE都不支持
- search
- color
- tel
date:<input type="date" name="date"><br>
month:<input type="month" name="month"><br>
week:<input type="week" name="week"><br>
time:<input type="time" name="time"><br>
datetime:<input type="datetime" name="datetime"><br>
datetime-local:<input type="datetime-local" name="datetime-local"><br>
Date Pickers Input移动端
<input type="range" name="range" min="1" max="10">(流式数值选择器)
<input type="search" name="search">多了一个清空插符号
<input type="color" name="color"> 颜色选择框,适用文本编辑器
表单属性
- 表单属性
- autocomplete
- autofocus
- multiple
- placeholder
- required
链接属性
- < link > sizes
- < base > target
- < a > 超链接
<form action="up.html" autocomplete="on">默认就是on
<input type="text" name="text">
<input type="email" name="email" autocomplete="off">
<input type="submit">
</form>
其他属性
- script
- ol
- html
- style(嵌入式快发)
H5页面布局
H5展望
Video-API
- 六个方法
- 三十个属性
- 二十二个事件
重写播放器(js),使其更美观
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video-API</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script defer="defer" type="text/javascript" src="js/index.js"></script>
</head>
<body>
<video id="video" controls="" preload="none" poster="images/poster.png">
<source id="mp4" src="trailer.mp4" type="video/mp4">
<p>你的用户代理不支持HTML5视频元素。</p>
</video>
<div id="buttons">
<button class="large awesome" onclick="load();">load()</button>
<button class="large awesome" onclick="play();">play()</button>
<button class="large awesome" onclick="pause();">pause()</button>
<button class="large awesome" onclick="currentTimePlusTen();">currentTime+=10</button>
<button class="large awesome" onclick="currentTimeMinusTen();">currentTime-=10</button>
<button class="large awesome" onclick="currentTimeFifty();">currentTime=50</button>
<br>
<button class="large awesome" onclick="playbackRatePlusPlus();">playbackRate++</button>
<button class="large awesome" onclick="playbackRateMinusMinus();">playbackRate--</button>
<button class="large awesome" onclick="playbackRatePlus();">playbackRate+=0.1</button>
<button class="large awesome" onclick="playbackRateMinus();">playbackRate-=0.1</button>
<br>
<button class="large awesome" onclick="volumePlus();">volume+=0.1</button>
<button class="large awesome" onclick="volumeMinus();">volume-=0.1</button>
<button class="large red awesome" onclick="volumeMuted();">muted=true</button>
<button class="large red awesome" onclick="volumePlay();">muted=false</button>
</div>
</body>
</html>
video { display: block; width: 1024px; height: 600px; margin: 0 auto; padding: 0; border: 1px solid black; background-color: black; }
#buttons { text-align: center; }
button { font-family: 'Arial', Helvetica, Verdana, sans-serif; }
.awesome { font-weight: bold; line-height: 1; position: relative; display: inline-block; padding: 5px 10px 6px; cursor: pointer; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .25); border-radius: 5px; background: #222; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); text-shadow: 0 -1px 1px rgba(0, 0, 0, .25); }
.awesome:hover { color: #fff; background-color: #111; }
.large.awesome { font-size: 14px; padding: 8px 14px 9px; }
.red.awesome { background-color: #e33100; }
.blue.awesome { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome:hover { background-color: #872300; }
function init() {
document._video = document.getElementById("video");
};
document.addEventListener("DOMContentLoaded", init, false);
function load() {
document._video.load();
};
function play() {
document._video.play();
};
function pause() {
document._video.pause();
};
function currentTimePlusTen() {
document._video.currentTime += 10;
};
function currentTimeMinusTen() {
document._video.currentTime -= 10;
};
function currentTimeFifty() {
document._video.currentTime = 50;
};
function playbackRatePlusPlus() {
document._video.playbackRate++;
};
function playbackRateMinusMinus() {
document._video.playbackRate--;
};
function playbackRatePlus() {
document._video.playbackRate += 0.1;
};
function playbackRateMinus() {
document._video.playbackRate -= 0.1;
};
function volumePlus() {
document._video.volume += 0.1;
};
function volumeMinus() {
document._video.volume -= 0.1;
};
function volumeMuted() {
document._video.muted = true;
};
function volumePlay() {
document._video.muted = false;
};
- Local Storage离线缓存
- 在线APP 边使用边下载离线缓存
- 离线 APP 下载完离线缓存使用
- 在线APP 边使用边下载离线缓存
费力气写了居然没人看,求意见,哪写的不好啊