1.HTML5新特性

1.DOCTYPE及字符编码变简洁了
2.不分大小写
3.布尔值(看下边checked)
4.不分单双引号,也可以不加引号省略掉
5.可以省略标签
6.脚本和链接无需type
7.新增语义标签header、footer、nav、section、article、aside、figcaption、figure
8.Hgroup
9.标记元素 mark
10.图形元素figcaption、figure
11.占位符 Placeholder
12.必填属性 Required
13.自动聚焦 Autofocus
14.视频音频
15.视频预载 reload=”preload”
16.视频控制条 Controls
17.正规表达式 pattern=”[A-Za-z]{4,10}”

2.HTML5元素标记释义

标记类型意义介绍
文件标记
<html>根文件标记让浏览器知道这是HTML 文件
META标记
<head>开头提供文件整体信息
<title>标题定义文件标题,显示于浏览器顶端
<base>o基准标记可将相对URL转绝对及指定链接
<link>o外部资源连接必须带rel属性描述
<meta>o其它META数据不能被title, base, link, style, 和script元素描述的META数据
<style>嵌入文档风格信息
部件标记
<body>文档主体开始文档内容容器
<section>代表通用文档或应用部件
<nav>导航链接外部链接或文档内部链接
<article>页面模块类似文章、摘要或留言POST等形式的记录
<aside>孤立模块一般作为边栏广告、说明、引用、导航等,aside围堵部分一般与正文耦合较小
<h1>标题标记此外还有h2, h3, h4, h5, h6
<hgroup>群组标题用在一组h1-h6这样的元素集合时使用,用来区分主副标题??
<header>组说明或组导航也可叫页头标题
<footer>页脚标题作用范围跟最近部件元素有关
<address>地址或联系信息
分组内容标记
<p>段落标记
<hr>o水平分割线
<br>o换行
<pre>预格式化分本块
<blockquote>块引用
<ol>编号列表
<ul>项目列表
<li>列表项
<dl>定义列表
<dt>定义名称
<dd>定义说明
<figure>流内容区块说明多结合figcaption使用
<figcaption>figure内容属性
<div>定位标记无实际意义
文本层次语义标记
<a>链接标记
<em>强调标记
<strong>加重标记
<small>字体缩小
<cite>斜体标记
<q>引用标记内容原文是phrasing content,暂不清楚如何翻译
<dfn>术语定义
<abbr>缩略语
<time>日期时间
<code>程序代码
<var>变量
<samp>范例
<kbd>键盘字
<sub><sups>上标字/下标字
<i>斜体标记
<b>粗体标记
<mark>标记或高亮
<ruby>注解标记
<rt>ruby子元素结合ruby使用,比如:<ruby>天<rt>Tian</rt>缘<rt>Yuan</rt></ruby>
<rp>ruby子元素一般做rt元素注释使用
<bdo>
<span>自定义标记
编辑标记
<ins>
<del>
嵌入内容标记
<img>图片标记
<iframe>框架标记
<embed>嵌入标记
<object>对象标记
<param>参数标记
<video>视频标记
<audio>音频标记
<source>来源标记
<canvas>制图标记
<map>地图标记
<area>区域标记
表格标记
<table>表格标记设定该表格的各项参数
<caption>表格标题做成一打通列以填入表格标题
<colgroup>
<col>
<tbody>
<thread>
<tfoot>
<tr>表格列设定该表格的列
<td>表格栏设定该表格的栏
<th>表格标头相等于<TD>,但其内文字字体会变粗
表单标记
<form>表单标记决定该表单的运作模式
<fieldset>
<legend>
<input>输入标记
<label>
<button>按钮
<select>选择标记
<datalist>
<optgroup>
<option>选项
<textarea>
<keygen>
<output>
<progress>
<meter>
互动元素
<details>
<summary>
<command>
<menu>
其他标记
<script>
<noscript>

3.表格

1
2
3
4
<dl>(一级)
<dt>helloworld</dt>(二级)
<dd>每一门语言</dd>(三级)
</dl>
1
<thead>  //定义表格页眉
1
<tbody>          //定义表格主体
1
<tfoot>  //定义表格页脚
1
<col>    //定义表格的列属性-居中
1
<caption>  //这里是标题,显示在表格的居中
1
cellpadding=“10”   //这个是定义单元格边距的
1
cellspacing=“10”  //这是单元格的边距
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table summary="这里写一下这个表格的描述有利于收录">
<tbody>           //定义表格主体
<!--表格大的时候保证一次显示出来而不是一点一点的显示-->
<!--第一行:开始-->
<tr>                                                    
<th>班级</th>                                  <!--头行的列都是用th其实都是td-->
<th>学生数</th>
<th>平均成绩</th>
</tr>                                                   
<!--第一行:结束-->
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</tbody>
</table>

4.链接

1
<a href=”连接地址” title=”鼠标滑过文字” target=”_blank” >需要连接的文字</a>
1
2
//跳转到当前页id为tips位置
<a href="#tips">跳转到</a>
1
2
<a href=”mailto:445138773@qq.com?cc=445@qq.com&bcc=138@qq.com& subjet=主题名&body=内容”  >需要连接的文字</a>
<!–发邮件给445138773@qq.com抄送给445@qq.com密送给138@qq.com–>
1
<img src=”图片地址” alt=”图片没有显示出来显示的问题” title=”提示文字”>

5.表单

表单元素

1
<form>  //表单
1
<input>  //输入域
1
<textarea>  //文本域
1
<lable>  //控制标签,做说明用
1
<fieldset>  //定义域
1
<legend>  //域的标题
1
<select>  //选择列表
1
<optgroup>  //选项组
1
<option>  //下拉列表中的选项
1
<button>  //按钮
1
2
//会自动跳转到action页
<form method="传送方式分为post和get" action="服务器文件名,和这个文件进行对话">交互内容</form>
1
2
<!--定义输入框大小-->
<textarea rows="行50" cols="列10">在这里输入文字</textarea>
1
2
<!--定义  确定  按钮 name是给后台程序用-->
<input type="submit" value="确定" name="submit">
1
2
<!--定义重置按钮-->
<input type="reset" value="重置" name="reset">
1
2
3
4
5
6
7
8
9
10
//datalist 定义选项列表
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
//这个input的list必须存在而且要和datalist的id是相同的

//keygen 当提交表单时,会生成两个键,一个是私钥,一个公钥

1
2
3
4
5
<form action=”demo_keygen.asp” method=”get”>
用户名: <input type=”text” name=”usr_name”>
加密: <keygen name=”security”>
<input type=”submit”>
</form>

1
2
3
4
5
6
7
8

//output 用于不同类型的输出,比如计算或脚本输出:
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<input type=”range” id=”a” value=”50″>100 +
<input type=”number” id=”b” value=”50″>=
<output name=”x” for=”a b”></output>
</form>
//output里的for=“a b”写不写都可以,还有这里的name可以用id替代

表单类型

text文本类型
password密码类型
radio 单选类型
checkbox 多选类型
file 文件类型
submit 提交按钮
reset重置按钮
button定义按钮
image 定义图片按钮
hidden定义隐藏域
下边是HTML5新增的
email邮件类型
number数字类型
range数字滑动条
date日期类型
url地址类型
search搜索类型
用法参考:http://www.w3school.com.cn/html5/att_input_type.asp

新的 form 属性

autocomplete
novalidate

新的 input 属性

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple //多选
pattern (regexp)
placeholder
required

用法参考:http://www.w3school.com.cn/html5/html_5_form_attributes.asp

使用范例

例:单选或者多选

1
2
3
4
5
6
7
8
9
10
11
12
<form name="iForm" method="post" action="save.php">
你喜欢运动吗?
<!--单选选中喜欢,name必须相同-->
<input type="radio" value="喜欢" name="radiolove" checked="checked">喜欢
<input type="radio" value="不喜欢" name="radiolove">不喜欢              
<input type="radio" value="无所谓" name="radiolove">无所谓
喜欢什么运动呢?
<!--多选中篮球和乒乓球,name不能相同,也可以相同,留作js调用用-->
<input type="checkbox" value="篮球" name="checkbox1" checked="checked">篮球
<input type="checkbox" value="足球" name="checkbox2" >足球    
<input type="checkbox" value="乒乓球" name="checkbox3" checked=checked>乒乓球
</form>

例:下拉菜单的单选和多选(多选要按Ctrl+鼠标左键)

1
2
3
4
5
6
7
8
<form name="iform" method="post" action="save.php">
  <!--现在是多选,要按ctrl才能选中多个,去掉multiple="multiple"就是单选-->
<select multiple="multiple">             
<option value="看书">看书</option>
<option value="画画">画画</option>
<option value="写字">写字</option>
</select>
</form>

例:lable···for

1
2
3
4
5
6
7
8
9
<!--for必须和id是相同的而且如果有一个被标注了,两个就都要标注,缺一不可。name可相同也可不同,label也可以放到input的前边-->
<form action"#" method="post" name="List">
<label for="xiao">这里输入显示文字香蕉<label>
<input type="checkbox" name="typeList" id="xiao">
<label for="xiao">这里输入显示文字苹果<label>
<input type="checkbox" name="typeList" id="xiao">
<label for="xiao">这里输入显示文字草莓<label>
<input type="checkbox" name="typeList" id="xiao">
</form>

例:html5新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--accesskey是键盘快捷键,支持它的标签有<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>-->
<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a>

<!--contenteditable 这是一个可编辑段落,看着都可以替代input这种表单了-->
<p contenteditable="true">这是一个可编辑段落。</p>

<!--contextmenu 这个是鼠标右键出现菜单-->

<!--hidden="hidden" 在xhtml中是禁止简写的-- >

<!-- item条目列表-->
document.body.childNodes[0];

<!--item来写-->
documetn.body.childNodes.item(0);

<!--tabindex TAB切换键切换顺序-->
<a href="http://www.pengweb.net/" tabindex="2">2</a><br />
<a href="http://www.pengweb.net/" tabindex="1">1</a><br />
<a href="http://www.pengweb.net/" tabindex="3">3</a>

例:与PHP交互

1
2
3
4
5
6
7
<form action="这里放交互的PHP文件地址" method="get/post(get地址栏会显示用户名和密码)" name=“typelist”>
用户名:
<input type="text" name=“name” >     <!--输入表单-->
密码:
<input type="password" name=“password”>
<input type="submit" value="提交">
</form>

PHP的写法:

1
2
<?php
echo "用户名:"$_GET['name'].“密码:”$_GET['password'];

6.窗口(框架)

1
2
3
4
<frameset cols="20%,30%,50%" noresize>    //禁止调大小,不能将这个写在body内,上一级是html
<frame src="要引入网页地址1"></frame>
<frame src="要引入网页地址2"></frame>
</frameset>

内联框架:

1
2
<iframe src="要引入网页地址" iframeborder="0" width="400" height="400">
</iframe>

7.视频插入(音频只是将video换成audio)

1
2
3
4
5
<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>

autoplay //如果出现该属性,则视频在就绪后马上播放。
controls //如果出现该属性,则向用户显示控件,比如播放按钮。
height //设置视频播放器的高度。
loop //如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload //如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
src //要播放的视频的 URL。
width //显示宽度

通过dom控制事例

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
29
30
31
32
33
34
<div style=”text-align:center;”>
<button onclick=”playPause()”>播放/暂停</button>
<button onclick=”makeBig()”>大</button>
<button onclick=”makeNormal()”>中</button>
<button onclick=”makeSmall()”>小</button>
<br />
<video id=”video1″ width=”420″ style=”margin-top:15px;”>
<source src=”/example/html5/mov_bbb.mp4″ type=”video/mp4″ />
<source src=”/example/html5/mov_bbb.ogg” type=”video/ogg” />
Your browser does not support HTML5 video.
</video>
</div>
<script type=”text/javascript”>
var myVideo=document.getElementById(“video1”);
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>

8.Canvas

单提出来做了一篇文章

9.内联SVG

单提出来做了一篇文章

10.拖放(Drag 和 drop)

1.设置元素为可拖放

1
<img draggable=”true”>

2.拖动什么
ondragstart 和 .dataTransfer.setData()
3.放到何处
ondragover
4.进行放置
ondrop
例:

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
29
30
31
32
33
 <!--
先设置draggable="true"声明这个对象是可以拖放的
ondragstart="drag(ev)"这是说调用一个函数drag(ev)
ev.dataTransfer.setData是设置被拖拽的数据类型和值,例子中数据类型是text,值是拖拽id (“drag1”)记得加引号
ondragover是放置目标,默认是不无法将数据放到其他元素中的,所以这里给他一个事件,将他设置允许,
需要event.preventDefault();
ondrop是放置动作,触发事件
ev.target.appendChild(document.getElementById(data));这句话中的ev.target是指的当前被放置的目标位置,
document.getElementById(data)是拖动的元素,其中data可以改写成“drag1”记得双引号
-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://www.gbtags.com/gb/laitu/336x69" draggable="true" ondragstart="drag(event)"
id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>

11.语义元素

12.WEB存储–应用程序缓存–WEB worker–indexed DB

这些内容将在javascript高级程序设计进行总结,分别为第23章和第25章
webSQL 2011 年 11 月声明已经不再维护 Web SQL Database 规范
indexed DB 更类似于 NoSQL 的形式来操作数据库 , 其中最重要的是 Indexed Database 不使用 SQL 作为查询语言。其数据存储可以不需要固定的表格模式,也经常会避免使用 SQL 的 JOIN 操作,并且一般具有水平可扩展性。

13.HTML5浏览器兼容问题

第一种:调用js文件来解决(支持IE9以下版本)

1
2
3
4
//写在head内
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

注意:html5shiv.js 引用代码必须放在元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

第三种方法:分别给新标签设置成块级元素

1
2
3
header, section, footer, aside, nav, main, article, figure {
display: block;
}

14.HTML属性书写顺序-推荐不强制

class → id,name → data → src,for,type,href → title,alt → aria → role

15.块状元素和内联元素


块状元素

内联元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易,也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

16.相近元素区分

1、em 把文本定义为强调的内容

em 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。

尽管现在 em 标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话,请使用 i 标签。除此之外,文档中还可以包括用来改变文本显示的级联样式定义。

2、i 显示斜体文本效果

i 标签和基于内容的样式标签 em 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

3、dfn 定义一个定义项目

dfn 标签可标记那些对特殊术语或短语的定义。
现在流行的浏览器通常用斜体来显示 dfn 中的文本。将来,dfn 还可能有助于创建文档的索引或术语表。
与其他许多基于内容的样式和物理样式标签一样,dfn 标签尽量少用为妙

17.绝对路径和相对路径

假设你的这个html文件的路径是www.example.com/path/to/html/a.html

绝对路径

1
src="/js/ibanner.js"

指向www.example.com/js/ibanner.js

相对路径

1
src="js/ibanner.js"

指向www.example.com/path/to/html/js/ibanner.js

下边这个是严格意义上的相对路径

1
src="./js/ibanner.js"

指向www.example.com/path/to/html/js/ibanner.js

相对路径(返回上一级目录)

1
src="../js/ibanner.js"

指向www.example.com/path/to/js/ibanner.js

相对路径(返回上二级目录)

1
src="../../js/ibanner.js"

指向www.example.com/path/js/ibanner.js

18.地理定位

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
29
30
31
32
33
34
35
36
37
38
<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (<span style="color: #008000;">navigator.geolocation</span>)
{
//getCurrentPosition可以换成watchPosition来实时更新位置,做导航用,清除的话用clearWatch()
<span style="color: #008000;">navigator.geolocation.getCurrentPosition(showPosition,showError);</span>
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
//这里的coords后边可以接的还有很多,具体参考手册
x.innerHTML="纬度: " + <span style="color: #008000;">position.coords.latitude</span> +
"<br>经度: " + <span style="color: #008000;">position.coords.longitude</span>;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>

19.data_*自定义属性

将在jacascript高级程序设计第11章进行详细解释

20.SSE

将在jacascript高级程序设计第21章进行详细解释

21.实践补充

checked=”checked” //简写成checked

22.自动刷新

1
2
//每格5秒刷新一次
<meta http-equiv="refresh" content="5">

23.禁止缩放,禁止手机自动识别号码,禁止识别邮箱

1
2
3
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>

24.自定义苹果图标

在网站文件根目录放一个 apple-touch-icon.png 文件,苹果设备保存网站为书签或桌面快捷方式时,就会使用这个文件作为图标,文件尺寸建议为:180px × 180px。

25.自定义favicon:

1
<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">

25.定义浏览器点击行为:

1
2
3
<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>

26.上传文件类型和格式

1
<input type=file accept="image/*">

accept 可以限制上传文件的类型,参数为 image/ 是所有图片类型,点击会弹出图库,也可以指定图片格式,参数设置成 image/png 则可以限制图片类型为png;
参数如果为 video/
则是选择视频的意思;
accept 还可以设置多个文件格式,语法为 accept=”image/gif, image/jpeg” ;
multiple可以同时上传多个文件(是通过CTRL+点击选中多个,而不是点击一次按钮之后再点击一次上传按钮)

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
//
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
//
function uploadFile() {
var fd = new FormData(); //这个是传送文件才用的
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
// 监听不同状态
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
}
//
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total); // evt.loaded已经上传了的 evt.total 总共大小
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
//
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>

formData上传文件有两种方式:

第一种:获取files[0],通过append来添加进formData
第二种:直接将form表单添加进formData
注:第一种方法添加多个图片信息的时候可以通过遍历来实现

1
2
3
uploadFileArr.forEach(function (item,index) {
data.append('uploadimages',item)
})

更多参考:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

27 上传图片预览功能

H5有两个可用的API:Filereaderwindow.URL.createObjectURL
Filereader用法:
参考:http://blog.csdn.net/a4307515/article/details/50505167
Filereader在有些手机上会获取不到图片类型,导致渲染失败的问题。
参考:http://www.jb51.net/article/87640.htm

window.URL.createObjectURL用法:转化后的值其实就是一个url地址
参考:https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

28.点击input弹窗反应缓慢的问题

1
accept="image/*"  //这个属性,通识符导致的

改为

1
accept="image/gif,image/jpeg,image/png"

29 history实现路由不带

主要属性有:pushState、replaceState、onpopstate
不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
修改掉了就没有了,后退不回去了,而pushState是新创建的,还可以退回去

30 设置地址栏颜色

1
<meta name="theme-color" content="#4DBA87">

31 常用转义字符

1
2
3
4
5
"		&quot;
& &amp;
< &lt;
> &gt;
空格 &nbsp;

更多转义字符参考

32 调起相机

1
2
3
4
5
<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,
比如:camera–照相机;camcorder–摄像机;microphone–录音。
accept表示,直接打开系统文件目录。

← Prev Next →