1.常用的前端开发软件
(1)小型软件：小巧启动快，功能简单
Editplus、Notepad++、VIM、Emacs
(2)中型软件：
SublimeText
(3)中型软件：体积大启动慢，功能强大
Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver
2.HTML5新特性 —— 十大新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)WebWorker
(9)WebStorage
(10)WebSocket
3. HTML5表单新特性之——新的input type —— 了解
<input type="">
HTML5之前已有的input type：
text、password、radio、checkbox、file、submit、reset、button、image、hidden
HTML5新增加的input type：
(1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)
<input type="email">
(2)url：URL地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口(可定制内容不能定制样式)
<input type="url">
(3)number：数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口(可定制内容不能定制样式)
<input type="number" min="" max="" step="">
(4)tel：电话号码输入域，在手机浏览器中弹出数字输入键盘
<input type="tel">
(5)search：搜索输入域，在手机浏览器中右下角呈现搜索按键
<input type="search">
(6)range：范围选择控件，帮助用户在一定范围内选择一个数字
<input type="range" min="" max="" step="">
练习：实现一个调色板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 200px;
height: 100px;
border: 1px solid #aaa;
}
input[type="range"] {
vertical-align: middle;
}
</style>
</head>
<body>
<h3>练习：新的input type——range</h3>
<div id="box"></div>
红色：<input type="range" max="255" value="255" id="red"><span>255</span><br>
绿色：<input type="range" max="255" value="255" id="green"><span>255</span><br>
蓝色：<input type="range" max="255" value="255" id="blue"><span>255</span><br>
<script>
var list = document.querySelectorAll('[type="range"]');
for(var i=0; i<list.length; i++){
range = list[i];
range.onchange = function(){
//修改range后面的span的内容
this.nextElementSibling.innerHTML = this.value;
//修改上方div#box的背景颜色
setBoxBG();
}
}
function setBoxBG(){
var r = red.value;
var g = green.value;
var b = blue.value;
box.style.background = `rgb(${r},${g},${b})`;
}
</script>
</body>
</html>(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件
<input type="color">
(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等
<input type="date">
(9)month：月份选择控件，FF没有实现
<input type="month">
(10)week：星期选择控件，FF没有实现
<input type="week">
4.HTML5新特性之表单新特性——新的表单元素
HTML5之前FORM可以有的标签——用于数据提交：
INPUT、TEXTAREA、SELECT/OPTION、BUTTON
HTML5新增表单元素——用于信息提示，不能用于数据提交：
(1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表
<datalist id="l"><option>XXX</option></datalist>
<input type="text" list="l">
(2)progress：进度条，未指定value属性则显示为“进行中”样式；若指定了value（默认在0~1之间）就可以控制其显示的进度
<progress value="0.5"></progress>
练习：使用定时器让进度条不断前进，到100%就要停止
(3)meter：刻度尺/度量衡，用红黄绿三色表示出一个数值所处的范围：不可接受/可以接受/最优范围
<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"></meter>
(4) output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。
<output>xxx</output>
5.HTML5新特性表单新特性——表单元素新的属性——重点
HTML5之前表单元素可用的属性：
id、class、title、style、type、name、value、checked、selected、disabled、readonly
HTML5之前表单元素新增的属性：
(1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议
<input autocomplete="off">
(2)placeholder：站位符，用于在输入框中显示提示性文字，与value不同，不能被提交
<input placeholder="提示性文字">
(3)autofocus：false/true，自动获得输入焦点
<input autofocus>
(4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email）就允许输入用逗号分隔的多个值
<input type="email" multiple>
(5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部
<form id="f"></form>
<input form="f">
========上述五个属性是新的通用属性===========
=======上述六个属性是输入验证相关属性========
(6)required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息
<input required>
(7)maxlength：最大长度，在有输入的情况下，限定输入域中字符的个数
<input maxlength="9">
(8)minlength：最小长度，在有输入的情况下，限定输入域中字符的个数，不是HTML5标准属性，仅部分浏览器支持（如Chrome）
<input minlength="6">
(9)min：限定输入的数字的最小值
<input min="">
(10)max：限定输入的数字的最大值
<input max="">
(11)step：限定输入的数字的步长，与min属性连用
<input step="">
(12)pattern：指定一个正则表达式，对输入进行验证
<input pattern="1[3578]\d{9}">
注意：上述正则表达式可以省略^和$
6.总结：HTML5表单新特性：
(1)新的input type——10个
email、url、number、tel、search、range、color、date、month、week
(2)新的表单元素——4个
datalist、progress、meter、output
(3)表单元素的新属性——12个
autocomplete、autofocus、placeholder、multiple、form
required、maxlength、minlength、min、max、step、pattern
7.如何定制表单2.0中的错误提示消息内容——难点&掌握
HTML5为每个标签对应的JS对象添加了新属性，以标识用户输入的有效性：
input.validity {
badInput：false，无效的输入，如email输入无效
typeMismatch：false，类型不匹配，如number中出现字符
valueMissing：false，值缺失，如required验证失败
tooLong：false，输入的内容超过maxlength限制
tooShort：false，输入的内容不满足minlength限制
rangeOverflow：false，输入的数字超过max
rangeUnderflow：false，输入的数字不满足min
stepMismatch：false，步长不匹配
patternMismatch：false，正则表达式不匹配
customError：false，是否存在自定义错误
valid：true，输入值是否有效
}
注意：
(1)最后的validity.valid属性，只有其它属性都为false（没有任何错误），valid值为true；否则只要任何一个其它属性为true（说明有某方面的错误），valild值为false。
(2)上述属性的值会随着输入域中值的改变而立即改变，无需等到表单提交。
(3)使用input.setCustomValidity('XXX')可以生成一个自定义错误消息，使得validity.customError属性变为true；若执行input.setCustomValidity('')可以删除自定义错误消息，使得validity.customError属性变为false
(4)自定义错误消息的优先级高于任何系统自带的错误消息优先级。
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
