Html5入门
HTML发展Expectation of the futureHTML5 ≈ HTML + CSS + JavaScript + APIWebAPPHTML5新增了离线存储，更丰富的表单，js，socket,扩展embed,css3流媒体与多媒体引擎(Audio，Video,Canvas,webgl等等)增强方便搜索引擎无障碍沟通（SEO）这些优点毫无例外地帮助H5可以兼容PC,M
·
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 边使用边下载离线缓存
费力气写了居然没人看，求意见，哪写的不好啊
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)