HTML5学习记录

字数统计: 3.9k字   |   阅读时长≈ 17分

一个问题想了很久，HTML5为什么会比HTML高端很多。在那些地方做了巨大改变。

这个方向是没错的，重视现有行业重要技术的同时，关注新技术。

高洛峰2015版 HTML5视频教程
HTML5_form新特性

属性名 说明
form 可书写在页面任何位置，只要给该元素制定一个form属性，属性值为该表单id即可，给页面元素添加样式更方便
formaction 可以给所有的提交按钮增加不同的formaction属性，点击不同的按钮，将表单提交到不同的页面
formmethod 对每个表单元素分别指定不同提交方法
placeholder text、textarea提示文字
autofocus 自动获取光标焦点
list 在页面中的datalist元素(HTML5新增)配合，list属性值就是datalist的id，中间选择值用option。类似select，输入值存在的时候就会提示，不存在就手动输入
autocomplete HTML5之前，谁都可以看见输入的值，存在安全隐患。可以指定”on”,”off”和””三种值，不指定时使用浏览器默认

以下代码包含上表具体样例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form id="login" action="test.php" method="get">
</form>

<input form="login" autofocus autocomplete="off" type="text" name="username" placeholder="please write your name here">
<br>
<input form="login" type="submit" name="dosubmit" value="登陆">
<br>
<input form="login" formaction="php.php" type="submit" name="dosubmit" value="php">
<br>
<input form="login" formaction="a.html" type="submit" name="dosubmit" value="a">
<br>
<input form="login" list="list" formaction="b.htm" formmethod="post" type="text" name="eeee">
<br>
<input form="login" list="list" autocomplete formaction="d.htm" formmethod="post" type="text" name="ddd">

<datalist id="list">
    <option>asdfasdf</option>
    <option>b</option>
    <option>cdddddd</option>
</datalist>

改良的input元素的种类

简单的使用新特性实现js的功能。
不同浏览器对新增input特性不一定都支持，不支持就默认为text类型，外观形式也没有规定。

search
搜索关键词的文本框，与text仅在外观上（输入值的时候会出现叉号）有区别，Safari支持较好(默认样式圆角矩形文本框)，chrome等都还不支持，但可以用css样式进行改写。

1
2
3
4
<style>
    input[type="search"]{-webkit-appearance: textfield;}
</style>
<input type="search" name="keywords">


这个特性用的不多，不太在意。

tel
电话号码专用文本框，没有特殊的校验规则，不强制输入数字，因许多电话号码通常带有其他文字，但开发者可以通过pattern属性来指定电话号码验证(正则)。

1
tel:<input type="tel" name="telephone" title="请输入10数字" pattern="^\d{10}$">

url
提交URL地址专用文本框，非URL不允许提交。
若要强制输入，用required。

1
url:<input type="url" required name="url">


Email
并不检查该Email是否存在，文本框可以为空，除非加required属性。还有multiple属性，允许在该文框中输入一个串以逗号分隔的Email地址。并不强制要求用户输入该Email地址列表。

1
email:<input type="email" name="email" required>

另外常用:Datetime,date,month,week,time,datetime-local。下面除Datetime都添加了默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
Datetime:<input type="datetime" name="datetime">
<br><br>
date:<input type="date" value="2015-12-08" name="date">
<br><br>
month:<input type="month" value="2015-12" name="month">
<br><br>
week:<input type="week" value="2015-W50" name="week">
<br><br>
time:<input type="time" value="22:10" name="time">
<br><br>
datetime-local:<input type="datetime-local" value="2015-12-08T23:59" name="local">
<br><br>
<input type="submit" value="提交">

time: 2015/12/08

名称 特性
number 最小值min，最大值max，step间隔。
range 最小值min，最大值max，step间隔。默认0-100
output 只是为显示，可用其他标签替代目前只有opera10支持。必须从属于某表单。下面例子与range联动，使用了原生js，并换成了number，因H5新特性浏览器不支持。
color 颜色选择器
file 文件选择，multiple可选择多个文件，value属性值为用逗分隔的一个或多个文件名。如下accept限制文件只能是图片

代码段：

1
2
3
4
5
6
7
8
number:<input type="number" max="100000" min="10" step="3" name="num">
    <br><br>
range:<input id="ran" type="range" min="0" max="100" onchange="document.getElementById('num').value=this.value" value="50" name="range">
<input id="num" type="number" value="50" min="0" max="100" onchange="document.getElementById('ran').value = this.value" >
    <br><br>
color:<input type="color" name="color">
    <br><br>
file:<input type="file" multiple accept="image/*" name="file">

效果：

HTML5多媒体播放元素

H5新增元素将取代Flash，不需要再安装插件，只要浏览器支持HTML5。

audio
主要有.mp3,.wav,.ogg三种格式的音频文件。各浏览器支持情况如表：

IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0
ogg √ √ √
mp3 √ √ √
wav √ √ √

video

媒体元素audio与video常用属性

属性名 值 说明
src url 媒体数据地址
autoplay autoplay 是否自动播放
preload none,metadata,auto(默认) 预加载,metadata只预加载媒体的元数据(媒体字节数,第一帧,播放列表,持续时间等)
poster 图片url video独有，当视频不可用时替代图片
controls controls 播放控制条
width/height pixels video独有,设置宽高,单位像素

另外一些属性方法和事件需结合js才能实现效果。例如，error属性可以处理出现的错误等，使networkState属性读取当前网络状态。使用play播放媒体，使用load方法重载入媒体进行播放，通过timeupdate事件来通知当前播位置的改变，再结合js来现实当前的播放进度等。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<audio controls autoplay>
    <source src="Perfect.mp3" type="audio/mp3" />
    <source src="Perfect.ogg" type="audio/ogg" />
    <source src="Perfect.wav" type="audio/wav" />
    你的浏览器不支持多媒体格式！
</audio>
    <br><br>

<video controls autoplay loop poster="img/no_video.png" width="500" height="400">
    <source src="test.mp4" type="audio/mp4">
    <source src="test.avi" type="audio/avi">
    <source src="test.rm" type="audio/rm">
</video>

效果:

HTML5新增标签

  • 语义化标签的增多，有利于搜索引擎的索引整理、小屏幕装置视障人使用。
  • HTML4一些标签将取消，包括纯粹用作显示效果的标记，如<font>,<center>,被css取代。

新增的结构元素发展历程
1.舍弃<table>这些没有任何予以的布局，接受相对语义化的<div>布局，并开始调用外部样式表。
2.大量使用<div>标记又太单一，复杂的网页设需要大量不同的标签结构代码，称作"<div>-soup"综合征。
3.如今，HTML5和CSS3新增了和布局相关多种语义标签。

常用标签:

元素名 说明
section 内容区块，如章节、页眉、页脚或其他部分
article 一块与上下文不相关的独立部分,如博客中一篇文章。
aside article之外内容，与article相关的辅助信息。
header 标题
footer 脚注
nav 导航链接
figure 独立流内容，使用figcaption元素为figure元素添加标题.

html5.js使IE9以下也支持语义化标签。放到head里。

1
2
3
4
5
<head>
<!--[if lt IE9]>
    <script src='html5.js'></script>
<[endif]-->
</head>

time: 2015/12/09 21:46 aielab

HTML5废除的元素

1.纯展示服务的标签
可以用css代替的，如basefont,big,center,font,s,strike,tt,u。
2.frame框架，影响网页可用性，所以frameset、frame、noframes已废弃，只支持iframe。
3.一些只有部分浏览器支持的也废除，想bgsound和marquee只有IE支持，applet可用embed和object替代。
4.rb可用ruby代替，acronym由abbr代替，以及常用dir、isindex、listing、xmp、nextid、pliantext都有替代。

前端站点开发(HTML5+CSS3)

饥人谷课件

第一课 手机站点开发

1
2
3
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">

上面三个meta大部分手机网站都会有。
user-scalable=no,用户触摸空白不会放大。

ios会把数字自定义电话号码

1
2
3
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://www.qiyipic.com/20130423143600/fix/H5-57x57.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.qiyipic.com/20130423143600/fix/H5-72x72.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.qiyipic.com/20130423143600/fix/H5-114x114.png">

为了iPhone和iPad，图标大小。

学到一个本地手机调试的技巧
第一步，下载安装anywhere，模拟静态服务器

1
npm install anywhere -g

第二步，cd到文件所在目录

1
cd ../path/yourfile.html

第三步，启动anywhere服务器

1
anywhere

第四步，就可以在网页总看到,你的ip加默认8000端口打开本路径

1
your_ip:8000/

第五步，可以在页面中点击你的文件，如test.html
第六步，手机(需在同一局域网中，本地WiFi即可)，打开上述网址，即看到效果。

端 移动 点击 离开
PC mouseover mouseenter mouseleave
MOBILE touchstart touchmove touchend

了解到可以用UC:开发版浏览器进行手机调试

下载UC浏览器，相关配置做好，即可USB或WiFi连接电脑进行调试。

IOS： Safari
window: fiddler（强大的抓包工具，看有哪些网络请求）
Mac: Charles sharks

###真实环境

1.业务逻辑(HTML5/CSS3/JS)
2.统计日志系统(统计用户信息)
3.打包部署系统

HTML5新增标签

分类 标签名
语义化 nav,aside,header,footer,progress,time
移动 tel,sms,调用硬件
多媒体 audio,video,canvas,svg
表单 type=date,email,search
网络请求 async/defer,prefetch/dns-prefetch

CSS3

1.动画相关

1.旋转，位移，缩放，动画等
2.阴影，文字描边，图片滤镜等

2.弹性布局

1.flexbox等
2.字体截断

3.移动

1.iOS滚动 -webkit-overflow-scrolling:touch;
2.禁止选中等 -webkit-user-select:none等

4.工程化 less/sass

5.其他

1.iconfont
2.webp

JS

1.存储相关

1.增加ls,session,websql,app cache

2.移动设备关联的

1.屏幕旋转
2.地理定位
3.video/audio
4.调app

3.js语法

1.ES6
2.开放了性能相关的API

4.其他
1.websocket
2.postmessage(消息通信)
3.dd,file
4.xhr2,history等
5.数据可视化(svg,convas.如d3.js,icharts)

###打包部署：

1.将开发的源文件合并为一个文件，并进行代码压缩
2.生成版本号，对线上代码进行管理，有效地利用缓存
3.文件按需加载，使用bigpipe等，webpack

根据代码不同，常见打包工具：

1.符合AMD规范的，可使用webpack,browserify
2.使用seajs做加载器的可以选择spm
3.使用FIS
4通grunt自己实现(jQuery源码->打包)
5.原始的shell脚本

###统计日志

1.性能相关统计
2.逻辑相关统计
3.错误日志统计

####系统统计实现
日志一般通过img来发送1*1

1.性能相关一般埋点在domready，load，firstScreen
2.逻辑相关根据不同的逻辑埋点
3.错误日志可以通过try catch或onerror来实现，或重写console的4个函数

第二课 H5进阶-手机开发

1.手机页面开发知识点

基础篇

1.HTML5
2.CSS3
3.JS基础，包括HTML5的canvas、video和ls等
4.网络请求(ajax以及网络相关

2.中级篇

1.less/sass
2.js amd/cmd 等模块化工具
3.性能优化
4.组件开发

3.高级篇

1.性能优化
2.react/angular
3.gulp/grant/bower/fis等常见的构建工具

2.一个活动页面开发

从零写代码
css布局，多个class，通过class添加删除，来控制样式。
js用jQuery
先布局，后控制。层层嵌套，环环相扣。
自己写的js，一般不是布局所依赖的类库，写在body最下边，js加载阻塞DOM加载，影响性能。
在页面布局有一点不熟悉，位置，自适应需要再熟悉一点。
css3的新特性用到了阴影，旋转，动画。。挺强大的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
text-shadow: #f6c833 1px 2px 2px;
-webkit-transform: rotateZ(-6deg);
display: -webkit-box;
-webkit-animation:scale 2s 0s infinite;
animation:scale 2s 0s infinite;

@-webkit-keyframes scale{
	0{
		-webkit-transform:scale3d(1,1,1);
	}
	50%{
		-webkit-transform:scale3d(1.2,1.2,1.2);
	}
	100%{
		-webkit-transform:scale3d(1,1,1);
	}
}
@keyframes scale{
	0{
		-webkit-transform:scale3d(1,1,1);
	}
	50%{
		-webkit-transform:scale3d(1.2,1.2,1.2);
	}
	100%{
		-webkit-transform:scale3d(1,1,1);
	}
}

less后面学习学习
fis，百度的自动化工具，优化工作不用自己手动做。
AMD规范，js模块化，之间的通信是怎么建立的，需要弄清楚。

3.页面打包编译

主要用了百度工程构建工具fis。

time:2015/12/13 19:15 aielab

第三课 性能优化值内存泄露

1.什么是内存泄露

并费内存在物理上的小时，而是应用程序分配某段内存后，由于涉及错误，失去了对该段内存的控制，因而造成了内存浪费。
js内存由于是虚拟机自动清理的，内存泄露很大一部分是由于引用清掉了，内存没清除掉。
具体体现在页面停留时间长，会卡或者机器发热厉害。

堆 栈
内存空间 指针 
1
2
function person(){}
var p = new person();

js垃圾回收机制

内存泄露原因：

1.循环引用(Circular References)，IE的com组件产生的对象实例和网页脚本引擎产生的对象实例相互引用。

破解之道，把其中一个引用置为空，断掉这条链。

1
document.getElementById('id') = null;

2.内部函数引用(Closures),即闭包-Closures可看成目前引起大量问题的循环引用的一种特殊形式。由于依赖指定的关键字和语法结构，Closures条用是比较容易发现的。
3.事件绑定，dom插入顺序，eval等

2.如何防止内存泄露

1.避免使用eval(作用域挂在windows下，应禁用)
2.谨慎使用全局变量，尤其是全局变量存在DOM引用
3.绑定事件注意和un配合使用
4.闭包和循环引用容易出问题，注意排查

感觉这一课对我目前来说还是难了点，因为日常学习还涉及不到优化，做的项目都太小了。但是这种思想一定要形成习惯。

time: 2015/12/13 20:56 aielab

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true