HTML知识点汇总

前的技术总监喊我加入他们的接私活团队，说他们缺一个前端工程师，不缺后端。可我一直是做后端开发的，前端代码写的实在是很少，没有经验，写起来肯定很慢了，所以想对前端的HTML知识点做一个汇总。

HTML代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <br/>
    <h2>二级标题</h2>
</body>
</html>

<!DOCTYPE html>声明这是一个html文档；<html>元素是html页面的根元素；整个html文档包括两大部分：head头和body体。

meta元素提供了页面的元信息；title元素描述了文档的标题；body元素包含了可见的页面内容。

HTML元素概念

开始标签	元素内容	结束标签
<h1>	一个标题	</h1>
<br/>	换行
HTML 元素以开始标签起始，以结束标签终止。元素内容在其中间，如<h1>html元素概念</h1>。有些元素没有内容，没有结束标签，如<br/>。

HTML属性概念

下面是适用于大多数 HTML 元素的属性：

属性	描述
class	为元素定义一个或多个类名
id	定义元素的唯一id
style	设定元素的行内样式
实例：<a href="toutiao.com">头条</a>
HTML元素可以设置属性属性描述于开始标签属性以键/值对的形式出现

标题元素

<body>
    <!-- 一般用在标题上，利于seo优化-->
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>

段落与换行元素

<body>
    <!-- 这是注释 -->
    <!-- </p> 是块级元素、前后有空行-->
    <p>这个段落</p>
    <p>这<br>个<br>段落</p>
    <hr/>
</body>

基本格式化标签

<body>
    <b>加粗</b>
    <i>斜体</i>
    <small>更小的</small> <br><br>
    <strong>重要的</strong> <br><br>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup> <br><br>
    <del> 删除的文本
</body>

超链接（链接）

属性	值	描述
href	toutiao.com	链接的地址
target	_blank	在何处显示
id		文档书签

<body>
    <!-- 实例 -->
    文本：<a href="http://www.example.com/">文本</a> <br/>
    图像： <a href="http://www.example.com/">
        <img src="URL" alt="描述信息">
    </a> <br/>
    邮件： <a href="mailto:qq@example.com">发送e-mail</a> <br/>
    书签：
    <a id="tips">书签</a> <br/>
    <a href="#tips">跳到书签</a>
</body>

图像标签

属性	描述
src	图像的 URL 地址
alt	无法载入图像时，显示替换文本
width	指定宽度
height	指定高度

<body>
    <img src="meinv.jpg" alt="美女" width="280" height="180">
</body>

哈哈哈，调皮一下

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<body>
    <!-- 边框属性：如果不定义边框属性，表格将不显示边框-->
    <table border="1">
        <tr>
            <!-- 表头使用<th>标签定义。浏览器会把表头显示为粗体居中的文本-->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <th>女</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>21</td>
            <td>男</td>
        </tr>
    </table>
</body>

HTML列表

<body>
    <!-- 有序列表 数字进行标记-->
    <ol>
        <li>苹果汁</li>
        <li>草莓汁</li>
    </ol>
    <!-- 无序列表 粗体圆点标记-->
    <ul>
        <li>咖啡</li>
        <li>饮料</li>
        <li>茶
            <!-- 嵌套列表 -->
            <ol>
                <li>红茶</li>
                <li>绿茶</li>
            </ol>
        </li>
    </ul>
</body>

HTM区块

块级元素在浏览器显示时，会以新行来开始和结束。如<h1>,<p>,<ul>,<table>
内联元素在显示时不会以新行开始。如<b>, <td>, <a>, <img>

<div> 元素	<span> 元素
块级元素	内联元素
HTML 元素的容器	文本的容器
搭配css可对内容块设置样式属性	搭配css可为文本设置样式属性

HTML 布局

<body>
    <div style="width:500px">
        <div style="background-color: antiquewhite;">
            <h1 style="margin-bottom:0;">网页头部信息</h1>
        </div>
      
        <div style="background-color: aquamarine; height:200px;width:100px;float:left;">
            <b>网页左侧信息</b><br>
            中考资讯<br>
            高考资讯<br>
            成人自考
        </div>
       
        <div style="background-color: aqua; height:200px;width:400px;float:left;">
            主题内容
        </div>
       
        <div style="background-color:#FFA500;clear:both;text-align:center;">
            底部内容
        </div>
    </div>
</body>

HTML表单

form表单有两个属性：

action	method
定义了服务端的文件名	数据的提交方式
对接收到的数据进行处理	有POST与GET方法
post：表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。 get：默认值，表单数据会附加在action属性的URL中。

<body>
    <!-- 表单是一个包含表单元素的区域
    允许用户在表单中输入内容-->
    <form action="" method="">
        <!-- input 输入标签 类型是由type属性定义-->

        <!-- 文本域 type="text" -->
        年龄: <input type="text" name="age"><br>

        <!-- 密码字段 type="password" -->
        密码: <input type="password" name="age"><br>
        
        <!-- 单选框 type="radio" -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br>
        
        <!-- 复选框 type="checkbox" -->
        <input type="checkbox" name="like" value="Coffee">喜欢咖啡
        <input type="checkbox" name="like" value="tea">喜欢茶<br>

        <!-- 提交按钮 type="submit" -->
        <!-- 将表单的内容传送到服务器 -->
        <input type="submit" value="提交">
    </form>
</body>

HTML框架

<body>
    <!-- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 -->
    <iframe src="test.html" width="200" height="200"></iframe>
</body>

height 和 width 属性用来定义iframe标签的高度与宽度

HTML <head> 元素介绍

<head> 元素定义了文档的信息，包含了所有的头部标签元素。常用的标签元素如下所示。

<meta>	文档的元数据
<base>	页面链接标签的默认地址
<title>	文档的标题
<link>	外部样式资源
<style>	客户端脚本文件
<script>	文档样式文件

<meta> 标签详解

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 定义关键词 -->
    <meta name="keywords" content="生活梦想家, 科技爱好者, 新手剪辑师, 记录生活, 分享美好">
    <!-- 定义描述内容 -->
    <meta name="description" content="我是一个生活梦想家, 科技爱好者, 新手剪辑师, 记录生活和分享美好的一个人。">
    <!-- 定义文档作者 -->
    <meta name="author" content="小明">
    <!-- 每10秒钟刷新当前页面 -->
    <meta http-equiv="refresh" content="10">
    <title>Document</title>
</head>
<body>
</body>  
</html>

这只是HTML的基本内容，后续还会总结HTML5的知识点。

选框（Checkbox）是设计中常用到的组件，在B端表单设计中用得尤其频繁。看起来虽然很简单，但复选框的尺寸、颜色和位置仍值得我们仔细考虑，以确保让用户更容易理解和使用。

我们首先来介绍最基础的复选框样式，其次分析复选框+描述/icon/数值/图像等多种类型的复选框形式，最后总结设计复选框时的五点注意事项，全面掌握复选框的设计～

01 基础复选框

最基础的复选框由复选框+文本标签组成。点击选中，会有一个复选框选中的效果，取消选中时复选框显示为灰色描边的方块。

状态

复选框常见的三种基本状态是：未选中、选中和不确定状态。

不确定状态常用的场景是在级联选择器中，例如一级复选框能控制所有二级复选框的内容。如果有的二级勾选了，有的没勾选，那么一级复选框的状态就会判定为不确定。

尺寸

在用一个产品中，建议页面中的所有复选框都使用相同的尺寸，这样有助于保持设计一致性。当然在某些特殊的场景下，也可以更改复选框的尺寸来灵活适应。

例如，某些页面的复选框比其他页面的复选框更重要或者更频繁使用，就可以将它们放大来吸引用户的注意力。

是否需要设计不同尺寸的复选框取决于复选框的数量、标签的长度、选项的重要性等因素。

将以上提到的复选框的不同状态和尺寸混合起来，可以组合成基础的复选框组件。

02 带有描述的复选框

复选框下方的描述通常用来解释说明该复选框的功能，或者为复选框提供功能说明。

这种额外的描述性文字尽量控制在两行以内，为用户带来更清晰的体验。

设计分析

如果对这种类型的复选框采用左居中对齐方式，将复选框位于中心，看起来就会很奇怪：

复选框应该始终保持与主文字左对齐，可以在距顶行几个像素的地方对齐复选框。

03 带提示icon的复选框

复选框上的信息图标也用来解释说明关于复选框的附加信息。当鼠标悬停在信息图标上时，显示对应的信息提示。

设计分析

这里的对齐方式与基础复选框的对齐方式相同，保持水平对齐所有内容。

04 带附加文本的复选框

这里的附加文本常用来展示数量。例如在产品列表的过滤器中，在左侧显示属性(颜色、尺寸或品牌)，在右侧显示具体的数量。

又或者在CRM系统中，用来过滤不同状态的任务量。

05 带图片的复选框

通过复选框+图片相结合的展示方式，用户更容易理解他们正在选择什么。例如看到有同事照片和信息的复选框，就更容易将任务分配给他。

设计分析

这种类型的复选框中，首先要保持复选框与图像水平居中对齐。如果有两行字段，需要将字段与图像保持上下对齐，让整体更协调。

06 复选框设计注意点

1) 复选框和单选按钮视觉上有差异

在产品设计中，方块通常表示复选框，圆圈用来表示单选按钮。这种视觉上的区别有助于用户理解两种控件之间的区别，并正确地使用它们。

2）对单个复选框进行右对齐

如果字段文字较多出现折行的情况，复选框应该始终与第一行字段保持对齐，而不是跟随整个文本框居中对齐。

否则就会产生类似右图的效果，看起来很奇怪。

3）尽量垂直对齐复选框

在设计中，尽可能使用垂直对齐复选框的原因：

可以让选项更易于阅读和理解；让复选框组更加紧凑，节省空间；垂直对齐能让每个复选框在视觉上区分更加明显。

当然在某些场景中，也可以采用水平对齐的方式，具体用法需要灵活选择。

4）超过7个选项使用多选标签

多选标签能够很好地替代具有七个以上选项的复选框(5±2规则)。允许用户轻松点选和取消选择多个选项，而不需要在复选框列表中再次去选择并取消。

5）扩大可点击区域

这可能是新手设计师和开发最常犯的错误之一。可点击区域应该比带有复选框和文本的区域要大得多，这样能方便用户操作和选择。

最后

以上是「复选框」的类型+用法设计分析，希望这些学习能帮助大家更快更好地进行表单设计！

专栏作家

作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。

本文原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

错误处理对于web应用开发至关重要，任何javascript错误都有可能会导致网页无法使用，因此作为开发人员，必须要及时处理有可能出现的错误；

从IE4.0之后，几乎所有的浏览器都包含了一些基本的错误处理功能，但并没有统一，后来，由ECMAscript添加了异常处理机制，也就是try…catch…finally结构以及throw操作；

错误处理的重要性: 好的错误处理技术可以让脚本的开发、调试和部署更加流畅，能对代码进行更好的控制；另外，JS缺乏标准的开发环境；

错误类型：

语法错误（syntax error）：也称为解析错误，发生在传统编程语言的编译解释时；发生语法错误时，就会发生阻塞，也就是不能继续执行代码，但只是同一个线程中的代码会受影响，其他线程中的代码不受影响；

// Uncaught SyntaxError: Invalid or unexpected token
// 未捕获的语法错误：无效或意外的标记
document.write("zeronetwork;

运行时错误（Runtime error）：也称为exception异常, 其发生在编译期/解释期后，此时，问题并不出现在代码的语法上，而是在尝试完成一个非法的操作；

<input type="button" value="单击" onclick="handleClick()" />
<script>
// Uncaught ReferenceError: openMy is not defined
// 未捕获的引用错误：未定义openMy
function handleClick(){
    openMy();
}
</script>

错误报告：

因为每个浏览器都有自己的内置Javascript解释程序，所以每种浏览器报告错误的方式都不同；有些是弹出错误信息，有些是把信息打印在控制台中；

IE(windows): 默认情况下，会弹出包含错误细节的对话框，并询问是否继续执行页面上的脚本；如果浏览器有调试器(如：Microsoft Script Debugger) ，此对话框会提供一个是调试还是忽略的选项；如果在IE设置中取消了”显示错误”，那么会在页面左下角显示一个黄色的图标；

注：如果JS代码就在HTML里，显示错误行是正确的，如果是外部的JS文件，则行号往往差一行，如第5行则为第4行；

Mozilla(所有平台): 在控制台中打印错误信息，并发出警告；其会报告三种类型的消息：错误、严格警告和消息等的；

Safari (MacOS)：是对JavaScript错误和调试的支持最差，默认情况下，它对终端用户不提供任何javascript错误报告；

错误处理：

Javascript提供了两种处理错误的方式：

BOM包含一个onerror事件处理函数，该函数通常被绑定在window对象或image对象上；
ECMAscript定义了try…catch结构来处理异常；

onerror事件处理函数:

window对象的onerror属性是一个事件处理程序，页面上出现异常时，error事件便在window对象上触发，并把错误消息输出到Javascript控制台上，这种方式也称为全局错误捕获；如：

window.onload = function(){
    show(); // 在onload事件中调用了一个不存在的函数
}
window.onerror = function(){
    alert("出现错误");
    return true;
}

获取错误信息：

window.onerror事件处理程序在调用时可以传5个参数，由这5个参数可以获取详细的错误信息；

message：错误信息，描述错误的一条消息；
URL：引发错误的Javascript所在的文档的URL；
line：文档中发生错误的行数；
column：发生错误的列数；
error：错误对象，这个error也称为全局错误对象；

window.onerror = function(sMessage, sUrl, sLine, sColumn, error){
console.log("Error:" + sMessage + " URL：" + sUrl + " Line：" + sLine + " Column：" + sColumn);
console.log(error);
    return true;
}

onerror处理程序的返回值：

如果返回true，则阻止执行默认的事件处理程序，也就是将通知浏览器，事件处理程序已经处理了错误，不需要其他操作，反之会显示错误消息；

某些元素也支持onerror; 但其处理函数没有任何关于error信息的参数，如:

document.images[0].onerror = function(event){
console.log(event);  // Event
console.log(event.type);  // error
}

这里的event参数是一个类型为Event事件对象，其存储的信息除了type返回了error，并没有其他和错误相关的信息；

全局错误处理window.onerror通常不能恢复脚本继续执行，但会给开发者发送错误信息；

window.onerror = function(error){
  console.log(error);
}
show();
console.log("中止，不会被执行");
window.onload = function(){
  console.log("也不会被执行");
}

可以是简单的打印，也可以把错误保存到日志记录里；

window.onerror就是绑定在window对象的error事件，也可以使用标准的添加事件侦听的方式window.addEventListener(eventtype, handler)，其需要两个参数，eventtype为事件类型，在此为error，handler是事件处理函数，其需要一个参数event，一个ErrorEvent类型的对象，其保存着有关事件和错误的所有信息，如：

window.addEventListener("error", function(event){
  console.log(event);  // ErrorEvent
  console.log(event.error);  // Error对象
  console.log(event.error.name);
  console.log(event.error.message);
  console.log(event.error.stack);
  console.log(event.lineno);  // 行
  console.log(event.colno);  // 列
  console.log(event.filename);
});

在实际的开发中，这两种方式都会被使用，只不过addEventListener有定的兼容必问题，所以要兼顾所有的浏览器且不太关注事件对象本身的话，就使用window.onerror；

当加载自不同域的脚本中发生语法错误时，为避免信息泄露，语法错误的细节将不会报告，只会返回简单的"Script error."；

<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
  console.log(msg);  // Script error
  console.log(url);  // ""
  console.log(lineNo);  // 0
  console.log(columnNo);  // 0
  console.log(error);  // null
}
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>

可以针对同域和不同域的错误分开处理，如：

<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
  var str_error = msg.toLowerCase();
  var sub_string = "script error";
  if(str_error.indexOf(sub_string) > -1)
    alert("脚本发生错误，详情请在控制台查看");
  else{
    var message = [
      '消息：' + msg,
      'URL：' + url,
      '行：' + lineNo,
      '列：' + columnNo,
      '错误对象：' + error
    ].join(" - ");
    alert(message);
  }
}
show();
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>

从上在的执行结果来看，error事件执行了两次，原因是使用了两个script，也就是当一个script有错误发生时，它只会阻止当前的script块，而不会阻止其他的script块；如：

<script>
show();  // 会捕获
console.log("不会被执行");
myshow();  // 不会捕获
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>
<script>
console.log("执行了");
demo();  // 会捕获
console.log("不会被执行");
</script>

body元素的onerror特性，也可以充当事件处理函数，如：

<body onerror="alert('出现了错误');return true;">

注意，先注释掉window.onerror等代码；

此时，可以直接使用event、source、lineno、colno、error等属性；

<body onerror="alert(event + '\n' + source + '\n' + lineno + '\n' + colno + '\n' + error);return true;">

当然了，也可以为body绑定error事件，此时各属性，必须明确指定，如：

document.body.onerror = function(msg, url,lineno,colno,error){
  alert(msg + '\n' + url + '\n' + lineno + '\n' + colno + '\n' + error);
  return true;
}

try-catch语句：

try语句中为期待正常执行的代码块，当在try语句中发生错误，其余代码会中止执行，catch语句就处理该错误，如果没有错误，就跳过catch语句；try和catch必须成对出现；

try{
    //code
    [break]
}catch([exception]){
    //code
}[finally]{
    //code
}
// 如
try {
    show();
    alert("不能执行");
} catch (error) {
    alert("出现一个错误:" + error);
} finally{
    alert("管你呢");
}

try语句块内的错误只会中止try语句块中发生错误之后的逻辑代码，并不会中止整个脚本的运行；执行try-catch语句，必须是运行时，运行时错误，也被称为异常；try-catch语句中指定只能有一个catch子句；try-catch语句适合处理无法预知、无法控制的错误；finally常被用于无论结果是否有异常，都要执行的代码，如：

try{
  alert("try");
  show();
  alert("no exec");
}catch(error){
  alert("catch");
}finally{
  alert("finally");
}
alert("continute");

代码执行的两条路径：如果没有异常，执行路径为：try->finally，反之为：try的部分->catch->finally；

一般用于关闭打开的链接和释放资源；

var connection = {open: function(){},close: function(){},send: function(data){}}
// var data = "大师哥王唯"; // 注释这一行，让它产生异常
connection.open();
try{
    connection.send(data);
}catch(exception){
    console.log("出现一个错误");
}finally{
    connection.close();
    console.log("关闭了");
}

还有一个典型的应用，读写文件，如：

function openFile(){};
function writeFile(data){};
function closeFile(){};
openFile();
try{
  writeFile();
}catch(error){
  console.log(error);
}finally{
  closeFile();
}

在try-catch-finally语句块中的变量是全局变量：

try{
  var name = "王唯";
  show();
  var city = "蚌埠";
}catch(error){
  var age = 18;
  console.log(name);
}finally{
  var sex = "男";
  console.log(name);
  console.log(age);
}
console.log(name);
console.log(city);
console.log(age);
console.log(sex);

try-catch-finally与return：

如果直接在try-catch-finally语句块中执行return，会抛出异常，如：

try {
  console.log("try");
  // return;  // Illegal return statement 非法返回语句
  console.log("try agin");
} catch (error) {
  console.log(error);
  // return;  // Illegal return statement
}finally{
  console.log("finally");
  // return;  // Illegal return statement
}

如：

function foo(){
  try {
    console.log("try");
    return 1;
    show();
    console.log("try agin");
  } catch (error) {
    console.log(error);
    return 2;
  }finally{
    console.log("finally");
    return 3;
  }
}
console.log(foo());  // 3

try-finally：

没有catch从句，只有try-finally也可以，目的是，只确保执行开始和最终的过程，而不处理错误，如：

try{
  console.log("try");
  show();
}finally{
  console.log("finally"); // 会执行
}
console.log("over"); // 不会执行，已中止

但此时，还是会抛出异常的，但此时，会在执行完finally后中止执行，并会查找外部的catch语句;

嵌套try-catch语句：

在catch子句中，也有可能会发生错误，所以就可以使用嵌套的try-catch语句，如：

try {
    show();
    console.log("不能执行");
} catch (error) {
    console.log("出现一个错误:" + error);
    try {
        var arr = new Array(10000000000000000);
        arr.push(error);
    } catch (error) {
        console.log("又出现了一个错误：" + error);
    }
} finally{
    console.log("管你呢");
}

也可以在try中嵌套try-catch-finally语句，如：

try{
  try{
    console.log("try");
    show();
  }catch(error){
    console.log("error");
  }finally{
    console.log("finally");
  }
}catch(error){
  console.log(error);
}

一个比较典型的应用，就是处理json数据，如：

// var json = '{"name":"wangwei", "age": 18, "sex": "男"}';
var json = '{bad json}';  // Uncaught SyntaxError
var data = JSON.parse(json);
console.log(data.name);
console.log(data.age);
console.log(data.sex);

一量json数据发生错误，整个应用都会崩溃，所以应该使用try-catch，如：

<div id="msg">您的信息：</div>
<script>
window.onload = function(){
  var msg = document.getElementById("msg");
  try{
    // var json = '{"name":"王唯", "age": 18, "sex": "男"}';
    var json = '{bad json}';  // Uncaught SyntaxError
    var data = JSON.parse(json);
    msg.innerHTML += "姓名：" + data.name + "，年龄：" + data.age + "，性别：" + data.sex;
  }catch(error){
    msg.innerHTML = "开小差了，找不到你的信息";
  }
}
</script>

当使用了try-catch语句，就不会将错误提交给浏览器，也就不会触发error事件，如：

window.onerror = function(error){
  console.log(error);  // 不会触发
}
try{
  show();
}catch(error){
  console.log(error);
}

Error错误对象：

在catch中会捕获一个Error错误对象；该对象在Javascript解析或运行时，一旦发生错误，引擎就会抛出这个对象；如果没有相关联的try-catch捕获该对象，就由浏览器输出这个对象；

// ...
console.log("错误：" + error + " name:" + error.name + " message:" + error.message);

也可以通过Error的构造器创建一个错误对象，这个Error对象也可用于用户自定义的异常；语法：new Error([message[, filename[, lineNumber]]]);

message：可选，错误描述信息；
fileName：可选，非标准，被创建的Error对象的fileName属性值，默认是调用Error构造器代码所在的文件的名字; 但大部分浏览器没有实现；
lineNumber：可选，非标准，被创建的Error对象的lineNumber属性值，默认是调用Error构造器代码所在的文件的行号；但大部分浏览器没有实现；

实例化Error对象，也可以不使用new关键字，如：

var error = new Error("自定义错误对象");
var error = Error("不使用new");
console.log(error);
console.log(error.name);  // Error
console.log(error.message);  // 自定义错误对象

Error错误对象属性：

name：表示错误类型的字符串；
message：实际的错误信息；

Error类还有6个子类，其可以通过错误对象的name属性返回具体异常类的名称：

EvalError：错误发生在eval()函数中；
RangeError：数值超出javascript可表示的范围；；
ReferenceError：使用了非法或不能识别的引用；
SyntaxError：发生了语法错误；
TypeError：操作数的类型不是预期所需的；
URIError：在encodeURI()或decodeURI()函数中发生了错误；

// EvalError
try{
  throw new EvalError("Eval异常");
}catch(error){
  console.log(error);
  console.log(error instanceof EvalError);  // true
  console.log(error.name);  // EvalError
  console.log(error.message);  // Eval异常
}
// RangeError
var num = 1;
try{
  num.toPrecision(500);  //  [prɪˈsɪʒn] 精度
}catch(error){
  console.log(error); 
}
// ReferenceError
var x;
try {
  x = y + 1;
} catch (error) {
  console.log(error);
}
// SyntaxError
try{
  eval("alert('wangwei)");
}catch(error){
  console.log(error);
}
// TypeError
var num = 1;
try{
  num.toUpperCase(); // 无法将数字转为大写
}catch(error){
  console.log(error);
}
// URIError (malformed [ˌmælˈfɔːmd]格式不正确，畸形的)
try{
  decodeURI("%%%"); // 使用了非法字符
}catch(error){
  console.log(error);
}

Error对象的message属性是浏览器生成的用于表示错误描述的信息，因为这个属性是特定于浏览器的，所以不同的浏览器上可能产生不同的错误信息，如：

try {
    eval("a ++ b");
    show();
    console.log("执行了吗？");
} catch (error) {
    // SyntaxError:Unexpected identifier或
    // SyntaxError:unexpected token: identifier
    console.log(error.name + ":" + error.message);
}

使用name属性判断错误类型：

try {
    eval("a++b");
} catch (error) {
    console.log(error instanceof SyntaxError); // true
    if(error.name == "SyntaxError")
        console.log(error.name + ":" + error.message);
    else
        console.log("未知错误：" + error.message);
}

抛出异常：

throw语句的作用是手动中断程序执行，抛出一个错误，一般用于有目的的抛出异常，也就是允许开发者可以创建自定义错误；

throw可以抛出任何类型的值，也就是说，它的参数可以是任何值；语法：throw error_object；error_object可以是字符串、数字、布尔或对象；

throw "出现一个错误";
throw 50666;
throw true;
throw new Object();
throw {
    toString:function(){
        return 'Error!';
    }
}
function getRectArea(width, height){
  if(isNaN(width) || isNaN(height))
    throw '参数应该是number类型';
  return width * height;
}
getRectArea("wangwei",10);

对于Javascript引擎来说，只要遇到throw语句，程序就会终止；

也可以抛出一个Error错误对象；Error对象的构造函数只有一个参数,

throw new Error("请再次尝试");

其他Error子类对象也可以抛出：

throw new SyntaxError("...");
throw new TypeError("...");
throw new RangeError("...");
throw new EvalError("...");
throw new URIError("...");
throw new ReferenceError("...");

对于Error类和其子类来说，错误对象的name就是其构造函数的名称，message是其构造函数的参数；

当抛出异常后，throw之后的语句将不会执行，并跳到相关联的catch语句中进行处理，如：

<h1>请输入18-99之间的数字</h1>
<input id="txtInput" type="text" />
<button id="btn">确定</button>
<p id="msg"></p>
<script>
function myFun(){
  var msg,x;
  msg = document.getElementById("msg");
  msg.innerHTML = "";
  x = document.getElementById("txtInput").value;
  try{
    if(x == "") throw "空的";
    if(isNaN(x)) throw "不是数字";
    x = Number(x);
    if(x < 18) throw "太小";
    if(x > 99) throw "太大";
    msg.innerHTML = "输入的值正确：" + String(x);
  }
  catch(error){
    msg.innerHTML = "输入的值不正确：" + error; 
  }
}
var btn = document.getElementById("btn");
btn.onclick = myFun;
</script>

也可以在某个语句块的外部捕获throw异常，如：

function sum(a,b){
    if(arguments.length < 2)
        throw new Error("需要两个参数");
    else
        return a + b;
}
try{
    console.log(sum(18));
}catch(error){
    // Error:需要两个参数
    console.log(error.name + ":" + error.message);
}

可以通过instanceof判断异常的类型来特定处理某一类的异常，例如可以区分浏览器抛出的异常和开发人员抛出的异常，如：

function sum(a,b){
    if(arguments.length < 2)
      throw new Error("需要两个参数");
    if(isNaN(a) || isNaN(b))
      throw "参数是不是Number类型";
    return a + b;
}
try{
    console.log(sum(18,12));
}catch(error){
  if(error instanceof SyntaxError)
    console.log("语法错误：" + error.name + ":" + error.message);
  else if(error instanceof Error)
    console.log(error.name + ":" + error.message);
  else
      console.log(error);
}

注：判断Error类型要放到if的最后一个条件；

即使在catch语句中，还可以根据实际情况，再次抛出异常，此时，其可以被外部的try-catch语句块捕获（如果存在的话）；

当发生异常时，代码会立即停止，仅当有try-catch语句捕获到异常时，代码才会继续执行；其背后运行的原理是，当发生异常，JavaScript解释器会立即停止执行的逻辑，并跳转到就近的try-catch异常处理程序，如果发生异常的代码块中没有相关联的catch从句，解释器会检查更高层的闭合代码块，看它是否有相关联的异常处理程序，以此类推，直到找到一个异常处理程序为止；如果发生异常的函数中没有处理它的try-catch语句，异常将向上传播到调用该函数的代码，如此，异常就会沿着Javascript的语法结构或调用栈向上传播；如果没有找到任何异常处理程序，JavaScript将把异常当成程序错误来处理，并通过浏览器报告给用户；

自定义错误类型：

可以基于Error类来创建自定义的错误类型，此时可以使用throw抛出自定义的异常类，或通过instanceof来检查这个异常类的类型，新类型需要实现name和message属性；

function CustomError(message){
  this.name = "CustomError";
  this.message = message || 'Default Message';
  this.stack = (new Error()).stack;
}
// CustomError.prototype = new Error();
// 或者
CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;
try{
  var name = "jingjing";
  if(name !== "wangwei")
    throw new CustomError("自定义的错误类型");
}catch(error){
  console.log(error.message);
}

小示例：

function UserException(message){
  this.name = "UserException";
  this.message = message;
}
function getMothName(m){
  m = m - 1;  // 调整月份数字到数组索引（1=Jan,12=Dec）
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  if(months[m] != undefined)
    return months[m];
  else
    throw new UserException("Invalid Month No");
}
try{
  var myMonth = 15;
  var monthName = getMothName(myMonth);
}catch(error){
  var monthName = "未知";
  console.log(error.name + ":" + error.message);
}

小示例：验证电话号码，如：

function Telephone(num){
  num = String(num);
  var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
  if(pattern.test(num)){
    this.value = num.match(pattern)[0];
    this.valueOf = function(){
      return this.value;
    };
    this.toString = function(){
      return String(this.value);
    }
  }else{
    throw new TelephoneFormatException(num);
  }
}
function TelephoneFormatException(value){
  this.name = "TelephoneFormatException";
  this.message = "电话号码格式不正确";
  this.value = value;
  this.toString = function(){
    return this.value + ":" + this.message;
  }
}
// 应用
var TELEPHONE_INVALID = -1;
var TELEPHONE_UNKNOWN_ERROR = -2;
function verifyTelephone(num){
  try{
    num = new Telephone(num);
  }catch(error){
    if(error instanceof TelephoneFormatException)
      return TELEPHONE_INVALID;
    else
      return TELEPHONE_UNKNOWN_ERROR;
  }
  return num.toString();
}
console.log(verifyTelephone("010-66668888"));
console.log(verifyTelephone("13812345678"));
console.log(verifyTelephone("138123456")); // -1
console.log(verifyTelephone("wangwei")); // -1

常见错误：

由于javaScript是松散类型的，也不会验证函数的参数，因此错误只会在运行时出现；一般来说，需要关注三种错误：类型转换错误、数据类型错误、通信错误；

类型转换错误：

一般发生在使用某个操作符，或者使用其他可能自动转换值的数据类型的语言结构时；

function output(str1,str2,str3){
  var result = str1 + str2;
  if(str3)
    result += str3;
  return result;
}
console.log(output(1,2,3));
console.log(output(1,2));
console.log(output(1,2,0));
console.log(output(1,2,"wangwei"));

这就是一个非常典型的与期望不一致的方式；

数据类型错误：

在流控制语句中使用非布尔值，是极为常见的一个错误来源，为避免此类错误，就要做到在条件比较时确定传入的是布尔值，例如，把if语句改成：if(typeof str3 == 'number')；

所以在使用某个变量或对象时，一定要适当地检查它的数据类型，如：

function reverseSort(values){
  // if(values){
  //   values.sort();
  //   values.reverse();
  // }
  if(arguments.length > 0){
    if(!Array.isArray(values))
      return [];
    else{
      values.sort();
      values.reverse();
      return values;
    }
  }
  return [];
}
var arr = [3,2,6,9,4];
// var arr = 100;  // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));

另一个常见的错误就是将参数与null值进行比较。与null进行比较只能确保相应的值不是null和undefined。要确保传入的值有效，仅检测null值是不够的；

function reverseSort(values){
  // if(values != null){  // 任何非数组值都会导致错误
  if(values instanceof Array) // 非数组值被忽略
    values.sort();
    values.reverse();
  }
  return values;
}
var arr = [3,2,6,9,4];
// var arr = 100;  // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));
// 或
function reverseSort(values, fun){
  if(values instanceof Array){
    if(fun != null && typeof fun === "function")
      values.sort(fun);
    else
      values.sort();
  }
  return values;
}
var arr = [3,2,6,9,4];
console.log(reverseSort(arr, function(a,b){
  return a > b ? -1 : 1;
}));

通信错误：最典型的就是Ajax应用，用其可以动态加载信息，但是，javascript与服务器之间的任何一次通信，都有可能会产生错误；

调试技巧：

使用警告框: 这是最简单、流行的方式，如：

function test(){
    alert("函数内");
    var iNum1 = 5, iNum2 = 10;
    alert(iNum1);
    var iResult = iNum1 + iNum2;
    alert(iResult);
}
test();

抛出自定义错误：

function assert(bCondition, sErrorMessage){
    if(!bCondition)
        throw new Error(sErrorMessage);
}
function divide(iNum1, iNum2){
    assert(arguments.length == 2, "divide需要两个参数");
    assert((!isNaN(iNum1) && !isNaN(iNum2)), "需要Number类型");
    return iNum1 / iNum2;
}
console.log(divide(10,2));
console.log(divide(10,"c"));  // 异常
// 或
try{
  console.log(divide(10,"c"));
}catch(error){
  console.log(error.name + ":" + error.message);
}

Javascript校验器：

jslint的主要目的是指出不合规范的js语法和可能的语法错误，包括一些不良代码；官网：http://www.jslint.com/

如以下，会给出警告：

语句未使用块标记；
一行的结尾未以分号结束；
用var声明一个已在使用的变量；
with语句；

调试器：

Javascript自身不具备调试器，但目前所有的浏览器可以使用自身的调试器；

IE调试：

启用IE的调试功能：

菜单“工具”|“Internet选项”命令，打开“Internet选项”对话框，在“高级”选项卡中，找到两个“禁用脚本调试”复选框并取消；开始调试，调试的主要工作是反复地跟踪代码，找出错误并修正；

设置断点：

在调试程序窗口中，将光标移动到需要添加断点的行上，按一次F9键或单击，当前行的背景色变为红色，并且在窗口左边界上标上红色的圆点，当程序运行到断点时就会暂停；

运行调试：

单击继续或按F5进行逐步运行调试；F10步进、F11步入，都可以继续向下执行；将鼠标移动到变量名上时，会显示变量当前时刻的值；或者在右侧的“监视”窗格中可以观察该变量的值；点击变量信息框中的变量值或右侧“监视”空格中的变量值可以修改变量的当前值；更多的调试操作：查看调用关系、监视特定变量的值等；

// 示例
var balance = 200.0;    //
var willPay = 20.0;
function pay(_balance, _pay){
    return _balance - _pay;
}
function showBalance(){
    debugger;
    var blnc = pay(balance,willPay);
    alert("当前余额:" + blnc);
}
showBalance();

日志输出：

程序运行时，有些中间数据需要记录，以便检查程序运行的状态；对于JavaScript记录中间数据通常是以日志的形式记录需要记录的数据，再发送到服务器上保存起来；日志记录的内容可以是任意的信息，根据开发者的需要而定；

在线咨询

上一篇：「原创」用Htmlhelp Workshop制作Windows 帮助文件
下一篇：企业网站策划书

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML知识点汇总

HTML代码结构

HTML元素概念

HTML属性概念

标题元素

段落与换行元素

基本格式化标签

超链接（链接）

图像标签

HTML表格

HTML列表

HTM区块

HTML 布局

HTML表单

HTML框架

HTML <head> 元素介绍

<meta> 标签详解

01 基础复选框

状态

尺寸

02 带有描述的复选框

设计分析

03 带提示icon的复选框

设计分析

04 带附加文本的复选框

05 带图片的复选框

设计分析

06 复选框设计注意点

1) 复选框和单选按钮视觉上有差异

2）对单个复选框进行右对齐

3）尽量垂直对齐复选框

4）超过7个选项使用多选标签

5）扩大可点击区域

最后

您的项目需求