HTML5基础HTML 就是一种为了表现网页的展示形式而制定的一种标记语言。通过标记的形式在网页中将图形、文本、多媒体等

HTML5 简介

1.什么是 HTML

HTML 就是一种为了表现网页的展示形式而制定的一种标记语言。通过标记的形式在网页中将图形、文本、多媒体等展示出来。它不是传统意义上的编程语言，而是由各种标签组成的标记型语言。

2.HTML 标准

HTML5 就是指万维网联盟 W3C 制定的 HTML 的第五代标准
为什么要制定 HTML 标准：因为 HTML 这种脚本语言是通过浏览器来解释执行的，浏览器有不同的厂商，如果不定制统一的标准每个浏览器执行之后的呈现结果可能有千差万别，兼容不同的浏览器成本太大。所以就有了 W3C 组织制定的统一标准。

3.新增特性

新的标签
增强表单
视频音频
Canvas
SVG
地理位置
拖放 API
多线程
离线存储
Websocket 主要增加了多媒体处理、地理位置获取和多线程的支持。

4.扩展

浏览网页时遇到跟 HTML 长得很像但是又不是 HTML 的后缀，例如 xhtml、shtml 等。看似差不多，其实是完全不同的技术类型。

XHTML 是 HTML 的严谨版，它集结了 XML 和 HTML 的优点，比如强制使用标签
shtml 是基于 ssi 技术的网页。通俗的说就是简化版的 CGI，就是说网页需要服务器预处理之后再呈现给浏览器解析

IDE 前端开发工具

1.为什么使用 IDE

IDE 是一种提高编程效率的代码编辑软件

代码高亮
函数提示
代码结构
...

2.主流 IDE 介绍

webstorm
- web 前端神器，如果只做 HTML 开发，webstorm 应该是比较好的选择，体积轻量，功能健全
VS code
- 具有良好的跨平台性，同时支持 Windows、 Linux、 OS X 操作系统
- 但是 vs code 并非像传统的 IDE 一样开箱即用，而是需要配置额外的插件，例如 Git、代码高亮、语法提示等等，才能用的比较舒心
IntelliJ IDEA
- 使用 Java 开发的一个 IDE，对于 Java 开发者比较友好

HTML 语法

本章概括介绍 HTML 的标签语法，以及 HTML 语言和传统语言的差异

1.HTML来历

HTML 和 XML 派生于 SGML，XML 可以被认为是它的一个子集，而 HTML 是它的一个应用。为了告诉浏览器我们需要展示什么内容，HTML 定义了一整套符号标记规范

2.标准

HTML3.2 以前的标准是由 IETF 制定
HTML 3.2 开始，由 W3C 制定标准。W3C 万维网联盟

3.HTML和编译型语言的区别

计算机怎么把代码翻译成计算机能看得懂的语言（翻译成机器码）

计算机 CPU 的集成电路中，除了电容、电阻、电感就是晶体管了，每个晶体管相当于一个开关，理论上 CPU 只能存储识别两个标识符，那就是 0 和 1，所以说 CPU 识别的指令集只能由 0 和 1 组合。那么所有的计算机语言想要 CPU 能看得懂，必须翻译成 0/1 代码才行，这个由 0/1 组成的代码叫做机器码。
但是机器码相对于人来说过于繁琐，所以就有人发明了高级语言、低级语言等等，这些语言的分级是根据它的语法是贴近人还是贴近机器来区分的，越贴近人它就越高级，越贴近机器它就越低级，但是最终想要 CPU 可以识别都需要翻译成机器码
典型的低级语言包括刚刚提到的机器码、汇编语言、c 等，高级语言包括 PHP、c#、JavaScript、Java、Python 等等

计算机语言分成解释型语言和编译型语言两种，什么是编译型语言和解释性语言

刚刚我们提到翻译成机器码，这个翻译的过程就叫做编译或解释。
编译型语言是指通过编译器翻译成完整的机器码，然后通过 CPU 去执行。
而解释型语言是指通过一个虚拟机的方式一行行的翻译，翻译一行执行一行
还有一种方式是混合型，介于两者之间。
常见的编译型语言包括 c++、c、rust等，解释型语言包括 JavaScript、PHP、HTML 等等，混合型包括 Python、Java等。

4. 标签语法和属性

4.1 HTML文档扩展名

HTML 以文档的形式存储，文档的后缀可以是 .html .htm .xhtml，有时也会看到 php/asp/jsp 等类型的网页后缀，这种是通过服务器的 CGI 动态解析过的网页，网页内容也是 HTML 格式，只不过网页后缀是根据服务器的 CGI 网关的不同来定义的。不同的后缀形式可能在浏览器的解释结果不相同。

4.2 HTML标签

闭合型标签：<标签>内容</标签>
自闭合标签： <标签 />或者<标签>

标签不区分大小写

<div>这是一个闭合标签</div> <!-- 闭合标签 -->
<DIV>跟上边等价</DIV> <!-- 标签不区分大小写 -->
<input type='text' name='test' /> <!-- 自闭合标签 -->

自闭合标签通常是一些不需要包含具体 HTML 内容的的标签，例如表单、图片、换行符、css 样式等等,通常是用来引入文件、图片、样式等作用

<input type='radio' /><!-- 表单 -->
<img src='https://www.baidu.com/img/bd_logo1.png' /><!-- 图片 -->
<br>
<link rel="stylesheet" type="text/css" href="theme.css" /><!-- 引入css样式 -->

闭合标签是包含内容，既然包含内容所以后边的闭合标签相当于起到一个结束符的作用。实际开发中，如果忘记将标签闭合，通常来说日常的浏览器（例如在 chrome v81）中不会报语法错误，而是自动闭合，但是不建议这么做，因为浏览器并非完全的智能，有可能会引起排版错误

<p style='color:red'>我是红色的段落</p><!-- 正确的写法 -->
<span>我是默认的文本</span>

4.3 属性

属性是控制元素的第二个维度，通过属性的设置，可以让元素展现出不同的表现风格。属性包含属性名称和属性值，通常在元素标签中用 name = value 的方式设置，多个属性之间使用空格隔开。例如表单中的是否只读，可以用

<input readonly=true type='text' />

属性值通常需要使用引号隔开，并非强制性，但是一旦属性值中包含空格的话不使用引号隔开则会解析异常

<input name="one style" type='text'><!-- 定义表单的name为 one style -->
<input name=one style type="text"><!-- 未使用引号， 显然与预期不符，但是浏览器并不会报错 -->

一个标签内可以包含多个属性，属性名称不能重复，属性名称不区分大小写

<input type='text' type='file' ><!-- 这种写法是错误的， 浏览器会解析错误，不同的浏览器会呈现不同的效果，但是一般不会报错 -->

除了可以在标签内定义元素的属性之外，还可以使用 JavaScript 动态控制属性，这种方式在项目开发中经常使用

<input type='text' id = 'num1'> + <input type='text' id='num2'> = <input type='text' id='res'>
<button onclick='count()'>计算结果</button><!-- 点击按钮实现计算 -->
<script>
function count(){
    if(isNaN(document.getElementById('num1').value) || isNaN(document.getElementById('num2').value)) return alert("请输入正确的数字");//判断输入数字是否合法
    document.getElementById('res').value = parseFloat(document.getElementById("num1").value) + parseFloat(document.getElementById("num2").value);//将结果输出
}
</script>

上述代码，通过使用 JavaScript 设置表单元素的 value 属性，实现了一个简单的加法计算器。

4.4 注释

注释内容在浏览器中不做解释，只用于开发者记录代码用途等信息 css 和 HTML 都只有一种注释方式 js有两种注释方式

< !-- 这是在HTML的注释内容，支持多行注释 -->

// 这是JavaScript的单行注释
/*
这是JavaScript的多行注释
*/

/* 这是css的注释，支持单行注释和多行注释 */

4.5 HTML代码结构

符合HTML标准的网页代码结构大致格式如下

<!DOCTYPE >  <!-- 控制w3c格式 -->
<html> 
<head> 
<meta charset="utf-8"> <!-- 告诉浏览器使用的是utf-8字符集 --> <title>我的网站</title><!-- 这里用来编写网站的标题 -->
</head>
<body> <!-- 只有body标签的内容，才能真正显示在浏览器的窗口 --> 
</body> 
</html>

上述内容是一个大致符合 w3c 标准的 HTML 代码框架，其中包含文档描述头标签、HTML标签、头标签和 body 标签，但是实际开发者可能不会包含这么完整的标签框架，例如可以只声明 body 内的标签

<a href="http://www.baidu.com">百度搜索</a>

这样的话，浏览器的展示效果并未有什么变化，但是当打开浏览器调试工具可以发现,浏览器帮我们补齐的缺失的标签。

4.6 在浏览器中查看源码

开发过程中需要调试、查看代码，在浏览器中可以通过开发者工具方便的查看源码，这里以 Chrome 举例，在网页中点击右键->查看网页源代码/检查，即可查看源码。

HTML 属性

属性是 HTML 标签内提供的附加信息，一般用于描述标签或者控制标签的展现形式。属性大部分情况下以键值对方式出现，比如 key='value'。

下面介绍 HTML 通用的 8 个属性，以及 HTML5 新增的 8 个通用属性。通用的属性一般对大部分元素标签都支持，但是 HTML5 目前是新标准，所有有些属性不能百分之百兼容所有的浏览器。因为浏览器更新迭代速度较快，所以在此没有对浏览器兼容性做深入讲解

1. 全局属性

全局属性是大部分标签都可以使用的属性

accesskey
class
id
lang
style
tabindex
dir
title

1.1 accesskey

accessKey 属性定义了使元素获得焦点的快捷键。

<input type="text" accesskey='h' value="按下alt+h"/><br/>
<a href='http://www.baidu.com' accesskey="a">按下alt+a</a><br/>
<button accesskey="b">按下alt+b</button><br/>
<label accesskey="c">按下alt+c</label><br/>
<legend accesskey="d">按下alt+d</legend><br/>
<textarea accesskey="g">按下alt+g</textarea>

在浏览器中，当你同时按下 ALT+h 键，焦点会自动切换到上边的表单标签。目前有 <a> <area> <button> <input> <label> <legend> <textarea>元素支持accessKey 属性。

1.2 class

class 属性规定了元素的类名，类名命名必须以字母为开头，内容中可以包含大小写字母和下划线("_")或者横杠("-")，类名是区分大小写的，类名可以定义多个，以 “ ” 空格隔开，例如定义了段落元素。相当于给 p 元素定义了 class1 class2 class3 3个类。

<p class="class1 class2 class3"></p>

给元素定义类相当于给元素打了个标签，在 JavaScript 中操作 DOM 提供了便捷，例如下例，基于操控对应 DOM 的 class 来控制按钮的显示与隐藏：

<p class="class1 class2 class3">我是一个段落</p>
<button onclick='hideTest()'>点击隐藏</button>
<button onclick='showTest()'>点击显示</button>
<script>
function hideTest(){
    var a = document.getElementsByClassName("class1"); //这样可以获取所有 class 包含class1的标签
    a[0].style.display = 'none';
}
function showTest(){
    var a = document.getElementsByClassName("class1"); //这样可以获取所有 class 包含class1的标签
    a[0].style.display = 'block';
}
</script>

1.3 id

id 属性类似于 class，不同的是 id 是唯一标签，不能重复

<div id='test'></div>

类似于class，id 也是用于操作 dom 的标记,如下例基于操控对应 dom 的 class 来控制按钮的显示与隐藏:

<p id='test' class="class1 class2 class3">我是一个段落</p>
<button onclick='hideTest()'>点击隐藏</button>
<button onclick='showTest()'>点击显示</button>
<script>
function hideTest(){
    var a = document.getElementById("test"); //这样可以获取所有 class 包含test的标签
    a.style.display = 'none';
}
function showTest(){
    var a = document.getElementById("test"); //这样可以获取所有 class 包含test的标签
    a.style.display = 'block';
}
</script>

1.4 lang

lang 属性定义了网页或者元素的语言，是否定义 lang 属性对网页或者标签的展现影响不大，但是可以帮助搜索引擎或者浏览器区分出网页的语言。ISO 639-1 为各种语言定义了缩略词。

<p lang="fr">Ceci est un paragraphe.</p><!-- 表示语言是法语 -->

语言可参考表格（此表格内容不全）

1.5 style

style 属性定义了元素的行内样式（也叫内联样式），行内样式优先于任何其他形式定义的样式。

<p style='color:#ccc'>这是一个行内样式示例</p> <!-- 行内样式 -->

其他两种定义元素样式的方式是：

style 标签；
引入 css 样式文件。

<style>
.test{
}
</style><!-- 使用标签的方式 -->

<link href="/css/test.css" /> <!-- 使用引用的方式 -->

其中 css 样式的优先级是： 行内样式 > 标签方式 > 引用文件 方式。

1.6 tabindex

tabindex 属性用于定义元素的 tab 键的控制顺序，即焦点的顺序。
tabindex 的值可以在 1 到 32767 之间的任意数字。当用户使用 tab 键在网页中移动控件时，将首先移动到具有最小 tabindex 属性的控件上，然后依次按从小到大移动。
如果两个元素的 tabindex 的属性值相等，浏览器会按照代码出现的顺序移动。当一个元素的 tabindex 设置为 -1，那么这个元素会排除在 tab 的移动顺序之外。
tabindex 设置为 0，则最后一个获取焦点在下述示例中，通过点击键盘的 tab 键可以看到焦点依次按顺序通过链接标签。

<a href="http://www.baidu.com.cn/" tabindex="1">焦点1</a>
<a href="http://www.baidu.com.cn/" tabindex="2">焦点2</a>
<a href="http://www.baidu.com.cn/" tabindex="3">焦点3</a>
<a href="http://www.baidu.com.cn/" tabindex="4">焦点4</a>
<a href="http://www.baidu.com.cn/" tabindex="5">焦点5</a>

1.7 dir

dir 属性定义元素内文本的方向

ltr 默认值。文字按从左到右的方向；
rtl 文字按照从右到左的方向。

<p dir="rtl">这是一个文字从右到左展示的方式</p>

1.8 title

title 属性用于指定元素的备注信息。这些信息通常是指，鼠标移动到元素上并且停留一段时间时，浏览器的提示框内的文本。

<p title="test123456789" style="word-wrap:break-all;width:30px;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;">test123456789</p> <!-- 定义一个段落 -->

上面的代码实现的功能是：当段落文字超出段落宽度时，显示省略号，并且鼠标移上去可显示全部内容：

2. HTML5 新增全局属性

2.1 contentEditable

这个属性是用来将一个标签变成可编辑的类型，可能了解的人并不太多，在加入 HTML5 标准以前，浏览器也有部分支持。比较通用的创建一个可编辑标签的方式是，使用表单 input 或者 textarea 的方式，不过都有一定的局限性。

会跟随 form 表单提交内容，有时候你可能并不需要；
展现样式比较单一。使用 div + css + contentEditable 可以解决以上的问题，例如：

<p contenteditable="true">这是一个可编辑的段落。</p>

以上定义了一个段落，如果没有加 contentEditable 属性的话，段落只是展示作用，当加了 contentEditable 属性之后，鼠标点击此段落之后可以编辑段落文字。

2.2 contextmenu

contextmenu 属性用于制定 div 元素的右键单击菜单，需要配合 menu 标签使用，例如：

<div contextmenu='test'>
<menu type="context" id="test"> 
<menuitem label="刷新"></menuitem> <!-- 菜单1 --> 
<menuitem label="回退"></menuitem> <!-- 菜单2 --> 
</menu>
</div>

这个功能类似于桌面应用的右键菜单功能，但是目前只有 Firefox 浏览器支持 contextmenu 属性，不支持的浏览器可以使用 div + css 模拟实现。

2.3 data-*

这个属性是 HTML5 中用于存储自定义属性值，自定义属性值用于方便开发者存储一些简单的数据内容，而不需从服务器端获取。在 HTML4 中自定义属性的方式很有可能会跟系统关键字冲突，而 data-* 会被客户端忽略。

data- 后边必须至少有一个字符，不要包含大写字符；
JavaScript 可以用 getAttribute 函数获取自定义属性；
HTML5 原生函数支持使用 dataset / setAttribute 来获取/操作自定义属性。下面是 JavaScrip t使用 getAttribute 函数获取自定义属性的例子：以下示例通过 data-type 保存了无序列表中每个条目的类型值，通过点击列表条目可以弹出类型值。

<script>
function show(animal) {
    var type = animal.getAttribute("data-type");
    alert(animal.innerHTML + "是一种" + type + "。");
}
</script>
<ul>
  <li onclick="show(this)" id="owl" data-type="标记语言">html</li>
  <li onclick="show(this)" id="salmon" data-type="脚本语言">JavaScript</li>  
  <li onclick="show(this)" id="tarantula" data-type="层叠样式表">css</li>  
</ul>

2.4 draggable

这个属性用来标识元素是否支持被拖动，如果没有被设置则按照浏览器默认的方式来执行，属性可选值有 true/false/auto 。默认情况下，只有图片、链接是可以拖动的。需要配合定义 ondragstart 事件来实现拖动之后的响应机制。

<p id="drag1" draggable="true" >这是一段可移动的段落。</p>

上述标签，当鼠标点击段落且移动时，呈现出可拖动样式：

如果未定义 draggable 属性，鼠标点击段落且拖动会选中文本：

2.5 dropzone

dropzone 属性是指在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。目前所有主流浏览器暂不支持该属性。

2.6 hidden

hidden 用来设置元素是否应该被隐藏，当该属性设置为 hidden 或者 true 时，浏览器将不再渲染该元素。在早期的 HTML4 中，通过设置 css 样式 display:none 可以实现相同的效果

<input type=hidden id='test' />

上述表单在浏览器不显示任何效果，只有当提交表单时数据才会提交到服务器端。

2.7 spellcheck

spellcheck 属性定义是否对元素进行拼写检查，目前该属性支持非密码的 input 标签、textarea 中的文本，可编辑元素中的文本。spellcheck 的值有 true 和 false。

<p  spellcheck="true">这是一个段落。</p>

2.8 translate

translate 属性定义渲染元素时是否需要对内容进行翻译，目前所有主流浏览器都不支持该属性

文本段落列表

本章介绍文本段落等控制文字章节显示的标签。这些标签通常只起到展示排版作用（当然还有 SEO[搜索引擎优化] 的作用），其他的用途不多。

本章主要介绍了几种文本段落列表的控制标签以及属性，这些标签大部分用于文本排版。其实在HTML5 中，通过 css3+div 可以实现绝大多数效果，只不过需要对css非常熟悉才行，所以在不是非常熟悉 css 的情况下可以使用一些快捷的标签来实现相同的效果

1. 标题

用于标题的 HTML 标签包括<h1> - <h6> 来定义。标题类似于 Word 中的标题，其作用是为了对文章进行排版，而不是只为了放大字号。良好的标题排版对搜索引擎比较友好。标题标签元素在 HTML5 使用较少，一般使用 css 样式控制文字大小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

展示效果如下：

2. 文档标题

title 用于定义文档的标题，通常嵌入到 header 头里边，其作用是：

定义在浏览器中显示的文档标题
当网页被添加到收藏夹时，显示在收藏夹的标题
显示在搜索引擎中的标题

<title>HTML 页面的标题</title>

title 标题显示在浏览器左上角

3. 段落

p 标签用于定义段落，它是一个块级元素，浏览器会自动在其前后换行

<p>麻叶层层苘叶光，谁家煮茧一村香。</p>
<p>隔篱娇语络丝娘。</p>
<p>垂白杖藜抬醉眼，捋青捣麨软饥肠。</p>
<p>问言豆叶几时黄。</p>

上述代码段使用 p 段落标签分隔了一首宋词浣溪沙，使用 div+css 可以实现相同效果

4. 列表

4.1 有序列表

有序列表类似于 Word 中的有序列表，使用 ol 标签定义， li 标签定义列表项

<h2>HTML手册</h2>
<ol start='5'> <!-- 定义一个有序列表 -->
<li>第一章.语法介绍</li> <!-- 列表项1 -->
<li>第二章.标签</li> <!-- 列表项2 -->
<li>第三章.属性</li>
</ol>

在浏览器中展示如下,其中有序列表中可以定义 start 属性，用于设置列表序号的起始值

4.2 无序列表

ul 无序列表不同于有序列表的是-列表中的编号使用粗体原点表示，而不是数字，其可以通过定义 compact 和 type 来设置编号的样式，type 的可选值有 disc、square、circle。但是一般建议通过 css 统一控制样式。

<h2>世界有几大洲：</h2>
<ul>
    <li>亚洲</li>
    <li>欧洲</li>
    <li>大洋洲</li>
    <li>南极洲</li>
</ul>

上述代码展现的列表：

4.3 自定义列表

自定义列表通过 dl 标签定义，使用 dt 定义标题， dd 定义内容。自定义列表可以实现类似 table 的效果。

<h3>自定义列表</h3>
        <dl>
            <dt>一级</dt>
                <dd>二级</dd>
                <dd>二级</dd>
            <dt>一级</dt>
                <dd>二级</dd>
                <dd>二级</dd>
        </dl>

HTML 链接

本章节介绍 HTML 页面与页面，文档与文档之间的媒介-链接，链接为客户和服务器提供了主要的交互的手段。这是一个比较常见的标签类型，几乎在所有的网站中都能看到它的身影。

本章节介绍了 a 标签的用途，以及各个属性的功能，其中有些已经在 HTML5 废弃了，例如，控制样式的属性。a 标签是 HTML 中用途非常广泛的标签，需要掌握。

1. 样式

使用标签<a>设置超文本链接，链接可以是图形或者文字，当鼠标移动到链接上时，会出现一个小手的形状。

未访问的链接显示蓝色，带有下划线；
访问过的链接显示紫色，带有下划线；
点击时，链接显示红色，带有下划线。以上是浏览器的链接的默认的样式，在实际的项目开发中，通常网页的风格需要重新设计，那么链接的默认样式也会随网页的风格而改变，要改变链接的样式需要用到 css 伪类，伪类是 css 的一种定义方式，可以和 css 的类搭配使用，以下是几种伪类的使用实例：

<style>
.divcss:link{ color:#F00}/* 链接默认是红色 */
.divcss:hover{ color:#000}/* 鼠标悬停变黑色 */
.divcss:active{ color:#03F}/* 鼠标点击时蓝色 */
.divcss:visited{ color:#F0F}/* 访问过为粉红 */
</style>
<a class="divcss" href="http://www.baidu.com">百度</a>

从上面代码可以看到，伪类包括链接默认（:link）、鼠标悬停（:hover）、鼠标点击时（:active）、链接访问后（:visited）这几种样式定义方式，这些都是专门针对于链接。

2. 语法

a 标签的语法如下：

<a href="url">内容</a>

链接 a 是一种闭合标签，一个最基础的链接定义包括链接标签 a 标签、标签内容、链接地址 href 属性，其中 href 是链接中最重要的一个属性，如果未定义 href 浏览器也不会报错，但是这就失去了标签的意义，变得跟普通文本标签没有区别了。

2.1 target 属性

由于链接是 HTML 中重要的交互介质，当用户点击一个链接跳转的目标界面并非是当前的界面，这时候就需要一个重要的属性 target 来定义所要跳转的目标界面。 target 属性的可选值有以下几个：

_blank：在新窗口打开链接；
_self ：默认方式，在当前窗口载入链接内容；
_top：在包含当前文档的最顶层的窗口载入链接内容。（一般用在有 frame 框架标签的页面中。）
_parent：在当前文档的父窗口载入链接内容。（一般用在有 frame 框架标签的页面中。）其中_top 和 _parent 不太好理解，看下面一个例子：

<iframe name="baidu"></iframe><!-- 定义一个iframe -->
<a href="http://www.baidu.com" target="baidu">搜一搜</a><!-- 定义一个链接 -->

以上代码实现：点击链接（搜一搜）后，在当前页面的 iframe 中嵌入搜索框页面。 该功能在 IE10 版本以下不兼容。 其中顶层窗口和父窗口针对在网页中嵌套 iframe 或者 frameset 有效，当嵌套框架时被嵌套框架是嵌套框架的 _parent，最外层的 HTML 称为 _top。

新的 HTML 标准中关于 target 属性的存在有一定的争议，主要是因为可以使用 JavaScript 的方式替代 target，例如：

<a href="javascript:window.open('https://www.baidu.com')" target="_blank">点击在新窗口打开</a>
<a href="javascript:location.href='https://www.baidu.com'">点击在当前窗口打开</a>
<a href="javascript:top.location.href='https://www.baidu.com'">点击在顶层窗口打开</a>
<a href="javascript:parent.location.href='https://www.baidu.com'">点击在父窗口打开</a>

以上代码使用 JavaScript 函数的方式实现各种打开链接的方式。

2.2 id 属性

id 属性是 html 的通用属性，主要是用于给元素设置事件或者设置样式时用到，以下代码实现点击链接跳转之前弹框提示：

<a href='https://www.baidu.com' id='test'>百度</a> <!-- 定义一个链接 -->
<script>
document.getElementById("test").onclick = function(){  //点击链接跳转前弹框提示
    alert("即将跳转到百度");
}
</script>

2.3 charset 属性

设置编码，在 HTML5 不支持，在主流浏览器中几乎不支持，所以定义了没有什么作用

<a charset="gb2312" href="http://www.baidu.com">百度</a>

2.4 coords 属性

定义链接的坐标，HTML5 不支持。

2.5 download 属性

有时用户点击一个链接的时候，这个链接的内容有可能包含 word、pdf、png、jpg 或者 MP4，zip 等内容，用户需要的仅仅是下载而不是跳转链接，那么这时候我们只需要定义一个 download 属性，这个属性包含下载时的文件名称。

<a href="https://img01.sogoucdn.com/app/a/07/57d9e1c69332c8da692c3ec5c0e1466b" download="图片">点击下载图片</a>

以上代码定义了一个下载图片链接，download 属性不支持 IE 浏览器

2.6 href 属性

定义超链接的跳转目标，可以是：

绝对 URL：例如 www.baidu.com；
相对 URL：例如 /index.html；
锚点： dom 的 id；
JavaScript 表达式：例如 javascript:void(0) 阻止链接跳转。

<a href="https://www.baidu.com" id="test">百度</a>
<a href="/index.html">主页</a>
<a href="javascript:void(0)">普通按钮</a>
<!-- 请注意：向下滚动页面，可看到下面这个向上跳转的链接。单击它，会让页面跳到网页的顶部-->
<a href="#test" style="margin-top:2000px;display:block">跳转到首部</a>

以上代码定义了几种链接的方式，其中锚点主要应用于当页面滚动条比较长时，用户可以点击跳转到首部。

2.7 hreflang 属性

定义被链接的文档的语言, 主流的浏览器暂不支持该属性。

<a href="http://www.baidu.com" hreflang="zh">百度</a>

2.8 name 属性

通用属性，HTML5 不支持。

2.8 rel 属性

定义当前文档，主要用于搜索引擎搜集网页内链接的集合以及链接与链接之间的关系，没有实际功能用途。 rel 是英文单词 relationship 的缩写，意味着虽然这个属性本身对网页视觉效果而言没有什么本质性的用途，但是它是串联网页与搜索引擎的桥梁，搜索引擎通过这个属性可以获取到链接的一些简介，从而了解到该网页的用途，进而对网页进行归类，方便用户搜索。

2.10 shape 属性

定义链接的形状，HTML5 不支持。

2.11 type 属性

定义链接文档的 mime 类型，mime 是指描述内容类型的因特网标准，以下罗列最新的标准项：如下图，此表格内容不全

3. 其他链接因特网标准

除了通过a链接标签的方式，还可以通过下面三种方式：

JavaScript
iframe 标签
script 标签等方式与服务器交互。

head 头部

本章节讲解 HTML 中的 head 标签，以及 head 内包含关于 HTTP 协议的标签-meta。

<head> 定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

1. head

head 标签是 HTML 标准框架中的头部分，前边章节我们讲到 HTML 的标准框架中提到一个标准的 HTML 中包含 HTML标签、head标签、 body 标签以及 w3c 文档标准头。所以说 head 标签是必须的标签，它本身没有视觉展示效果，仅仅是作为容器标签，其中可以包含的标签包含：

base
link
meta
script
style
title 例如：

<html>
<head>
  <title>标题</title>
</head>
<body>
  内容... ...
</body>
</html>

所有主流的浏览器都支持 head 标签。

2. meta

2.1 meta标签的作用

优化搜索引擎
定义页面使用语言
控制页面缓存
网页定义评价
控制页面显示窗口
…… 例如

<meta name="keywords" content="HTML,PHP,SQL"> <!-- 定义文档关键词，用于爬虫搜索引擎 -->
<meta http-equiv="charset" content="iso-8859-1"> <!-- 定义文档的字符集 -->
<meta http-equiv="expires" content="31 Dec 2020"> <!-- 定义文档的缓存过期时间 -->

2.2 meta 的属性

name 描述网页
content 方便搜索引擎查找和分类
http-equiv http文件头设置

3. header

header 标签定义文档的页眉，与 head 类似，它也是仅仅起到容器作用，不同的是 header 非网页必须标签，而且是 HTML5 的新增标准，放到 header 标签的内容大都是一些文档的介绍信息，例如：

<header>
<h1>本章介绍HTML头</h1>
</header>

4. 其他

head 内还可以包括 link、script 等标签，用于引用 css JavaScript 文件等作用，例如:

<head>
<link href='/css/1.css' type="text/css" /> <!-- 定义层叠样式表 -->
<script src="/script/1.js" type='text/javascript'></script><!-- 定义JavaScript脚本 -->
</head>

在实际项目开发中，为了更好的扩展性和可维护性，一般会把 head 标签以及其中的内容放到一个全局 include 文件，因为这个文件一般改动不太频繁且每个文件都必须引用，所以由框架在加载的时候自动引用，这样的设计方式符合 MVC 以及面向对象开发的思想。

HTML 图像

图片标签

1. img 图像

img 是英文单词 image 的缩写，意思是图像，它是 HTML 中最通用的定义图片的方式，是一个闭合标签，定义方式如下：

<img src = "url" alt = "" /> <!-- 定义一个图片 -->

其中 src 属性是必须属性，用来指定图片所对应的 URL 地址。

1.1 src 属性

src 的全称是 source，表示图片的 URL 地址源。源就是表示图片的地址路径，这个路径可以是相对路径，也可以是绝对路径,绝对路径指的是一个包含网络协议头的完整路径，常用的网络协议是 HTTP 协议，例如https://www.baidu.com/img/bd_logo1.png；相对路径是指这个图片文件跟当前的网页在同一个服务域，例如：/img/bd_logo1.png

<img src = "../_nuxt/img/be6bf0d.png" /> <!-- 这是一个相对路径 -->
<img src = "https://www.baidu.com/img/bd_logo1.png" /><!-- 这是一个绝对路径 -->

有时当图片过大时或者过多时，网页加载可能会比较慢，这时需要针对图片使用懒加载的方式（图片懒加载），懒加载的原理就是将图片的 src 先设置为空，网页其他内容加载完之后，再通过 JavaScript 将 src 属性赋值，例如：

<div class="container">
  <img src="img/loading.png" alt="1" data-src="photo-1.jpeg">
  <img src="img/loading.png" alt="2" data-src="photo-2.jpeg">
  <img src="img/loading.png" alt="3" data-src="photo-3.jpeg">
</div>
<script>
window.onload = function (){//页面加载完之后再加载图片
    var a = document.getElementsByTagName("img");//获取图片DOM
    for(var i in a){ 
        a[i].src = a[i].getAttribute("data-src")
    }
}
</script>

以上代码通过定义 onload 事件，将图片延后加载。

1.1.1 Base64 方式加载图片

我们都知道 exe、jpg、pdf 这些格式的文件是使用二进制方式保存的，其中包含很多无法显示和打印的字符，如果要让文本处理软件能处理二进制数据，需要将其编码成一种明文显示的安全格式，Base64 是一种最常见的二进制编码方法。有时为了方便处理，图片并非使用二进制流方式保存，而是使用 Base64 方式编码之后保存在数据库，img 标签的 src 属性可以识别 Base64 格式的编码图片格式,直接在src属性设置base64编码的图片即可

1.2 alt 属性

当出现网络或者图片路径存在问题时，图片展示可能会出问题，这时网页中图片占位的地方会出现一张裂图，如果不做任何说明时，可能会影响用户体验。这时，如果在裂图上有一段文字说明的话，会适当的增加友好度，alt 属性就是图片加载失败时的替代文本，意思是当图片加载失败时使用 alt 定义的文本显示在图片当前的位置上，例如：

<img src=""  alt="这是一张测试图片" />

1.3 align

定义图片的排列对齐方式，在 HTML5 中推荐使用 css 替代。

<h2>设置对齐</h2>
<p>图像 <img src ="https://www.baidu.com/img/bd_logo1.png" align="middle" border=1> 在文本中</p>
<h2>未设置对齐</h2>
<p>图像 <img src ="https://www.baidu.com/img/bd_logo1.png" border=1> 在文本中</p>

以上定义居中的方式可以使用 css 的方式实现相同的效果，例如:

<p>图像<img src ="https://www.baidu.com/img/bd_logo1.png" style="vertical-align: middle;border:1px solid">在文本中</p>

1.4 border

定义图片的边框，在 HTML5 中推荐使用 css 的 border 样式替代

<img src="https://www.baidu.com/img/bd_logo1.png" border="2" />

上述定义了一个 border 是 2 的图片，同样可以使用 css 的方式替代：

<img src="https://www.baidu.com/img/bd_logo1.png" style="border:2px solid" />

1.5 height

定义图片的高度，在 HTML5 中推荐使用 css 的 height 样式替代：

<img src="https://www.baidu.com/img/bd_logo1.png" width="50" height="50">
<br />
<img src="https://www.baidu.com/img/bd_logo1.png" width="100" height="100">

上述定义了一个 height 分别是 50 像素和 100 像素的图片，如果使用 CSS 定义的话，是这样的：

<img src="https://www.baidu.com/img/bd_logo1.png" style="width:50px;height:50px;">
<br />
<img src="https://www.baidu.com/img/bd_logo1.png" style="width:100px;height:100px;">

1.6 width

定义图片的宽度，在 HTML5 中推荐使用 CSS 替代。

1.7 ismap

属性定义图像为服务器端图片映射，就是定义图片中可以点击的区域，并且将对标发送到服务器，需要配合 a 标签使用。

<a href="http://www.baidu.com">
<img src="https://www.baidu.com/img/bd_logo1.png" ismap />
</a>

上述代码，当用户点击图片时，浏览器会将点击的坐标点以 x，y 作为参数，以 GET 的方式请求服务器，例如当用户点击图片的坐标点（8,8）时，服务器会受到一条 HTTP 请求 http://www.baidu.com?8,8，此坐标点是相对定位坐标点。

1.8 hspace

定义图片左右侧的空白，在 HTML5 中推荐使用 CSS 替代。

<h3>带有 hspace 和 vspace 的图像：</h3>
<p>
<img border="1" src="https://www.baidu.com/img/bd_logo1.png" height=100 width=100 align="middle" hspace="30" vspace="30" />
这是并排的文字信息
</p>

1.9 vspace

定义图片上下区域的空白，在 HTML5 中推荐使用 CSS 替代。

1.10 longdesc

定义图片描述文档的 URL ，这个属性和 alt 类似，只不过可以描述更多的文字-超过 1024 字符，但是目前还没有浏览器支持这个属性。

1.11 usemap

定义图片在客户端的可点击区域，需要配合 map 和 area 标签使用。

<img src="https://wiki-code.oss-cn-beijing.aliyuncs.com/html5/img/area.jpg"  usemap="#planetmap" />
<map name="planetmap">
  <area href="https://pro.jd.com/mall/active/3ZYfZKGRAhbHzJySpRriJoGWo8v6/index.html?innerAnchor=46246884002&focus=3" shape="rectangle" coords="25,290,175,337">
</map>

上述案例运行是，一个大的页面，只有中间的按钮可以点击，别的位置不可以点击

2. css 定义背景图

可以结合 div 和 css 的 background-image 属性来定义背景图的方式显示一张图片，例如：

<div style="background-image: url('https://www.baidu.com/img/bd_logo1.png');width:500px;height:300px"></div>

上述代码的也可以实现一张图像效果。

3. 注意事项

由于 HTML 中的元素中，图片相对于别的文本类型的元素所占用的网络空间较大，所以图片加载可能会比较慢，而且 HTML 中的元素网络请求是同步进行的，所以当定义了一些较大的图片或者图片元素较多时，网页本身会出现卡顿的情况，所以针对图片的加载需要做出一些优化：

尽可能少使用图片，或者使用体积较小的图片;
压缩图片体积;
通过懒加载的方式异步加载图片;
通过设置 HTTP 缓存时间，防止图片重复请求服务器资源;
通过使用 CSS 背景图的方式，将所需图片压缩到一张图片，减少请求图片次数。

HTML 表格

除了图像、多媒体这种丰富的交互效果之外，网页中还经常会用到通讯录、统计报表这种格式化的交互效果，这时候就用到了表格元素。

在HTML5 中 css 的功能已经非常强大和完善了，所以几乎无需使用 HTML 中的样式设置方式，总的来说基本上只需要掌握上述的几种标签即可。

1. 创建一个简单的表格

网页中定义表格使用 table 标签，它是一个闭合标签，所有内容都放在 table 的起始标签和结束标签内。在表格中定义一行数据使用 tr 标签，表格的单元格内容放在 tr 标签内，单元格又分为表头 th 和表格单元格 td。基本表格结构如下。

<table>
<thead>
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td>action</td><td>调用控制器类的操作</td></tr>
    <tr><td>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

2. 相关的标签和属性介绍

2.1 table 标签

table 用于声明一个表格，它本身不显示任何内容，例如：

<table border="1"></table>
<!--只显示一个像素点。-->

代码解释：上述定义了一个只有边框而没有内容的表格，由于没有任何内容，它在网页中只显示一个像素点。

2.1.1 bgcolor 属性

这个属性可以应用于表格的任意元素，用来定义元素的背景颜色，其内容可以用 rgb 值表示。实际项目中通常用于在表头设置背景，为了方便和单元格区分开来，例如：

<table>
<thead bgcolor="#ccc">
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td>action</td><td>调用控制器类的操作</td></tr>
    <tr><td>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

代码解释：上述代码将表头单元格设置为灰色背景。HTML 中颜色值可以使用 3 种表示方式：

RGB；
16 进制；
英文代码（部分颜色可用）例如：

<table bgcolor="#FF0000"></table><!--16进制表示法表示“纯红色”-->
<table bgcolor="rgb(255,0,0)"></table><!--RGB表示法表示“纯红色”-->
<table bgcolor="Red"></table><!--英文法表示“纯红色”-->

注意，在实际项目中，这个属性建议使用 css 的方式替代。

2.1.2 align 属性

定义表格元素的对齐方式，一般建议使用 css 替代，可选项有 left、center、right，例如：

<table>
<thead bgcolor="#ccc">
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td align='center'>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td align='center'>action</td><td>调用控制器类的操作</td></tr>
    <tr><td align='center'>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

代码解释：上述代码中，将左边列设置为居中对齐。表格中的表头 th 元素默认是居中对齐，而单元格元素默认是靠左对齐（跟浏览器相关），所以实际项目中一般会将类别列设置为居中对齐，实际项目建议使用 css 的方式替代。

2.1.3 border 属性

表格默认是没有边框的，通过这个属性可以给表格设置边框，但是一般情况下使用 css 设置边框样式比较常见。

<table border=3><!--设置3个像素的边框-->
<thead bgcolor="#ccc">
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td align='center'>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td align='center'>action</td><td>调用控制器类的操作</td></tr>
    <tr><td align='center'>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

代码解释：如果给 table 元素设置 border 属性，表格内部的单元格都会继承这个属性，但是如果 border 设置值超过 1 的话，单元格的边框还是只有 1，但是表格外部边框会显示 border 值对应的宽度；如果 border 设置 0 的话表示隐藏边框。

2.1.4 cellpadding 属性

通过这个属性可以设置单元格内容到边沿之间的空隙，这个值设置的越大则单元格越大，不设置的话默认是 2 个像素。如下，我们设置一个较大空隙的单元格：

<table border=1 cellpadding=10><!--10个像素的内间隙-->
<thead bgcolor="#ccc">
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td align='center'>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td align='center'>action</td><td>调用控制器类的操作</td></tr>
    <tr><td align='center'>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

2.1.5 cellspacing 属性

与上个属性不同的是，cellspacing 指的是单元格与表格外边框之间的空隙，如果不设置的话默认是 2 个像素，设置为 0 表示没有空隙，例如：

<table border=1 cellspacing=0><!--没有外间隙-->
<thead bgcolor="#ccc">
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td align='center'>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td align='center'>action</td><td>调用控制器类的操作</td></tr>
    <tr><td align='center'>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>
<br/>
<table border=1 cellspacing=10><!--间隙为10-->
<thead bgcolor="#ccc">
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td align='center'>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td align='center'>action</td><td>调用控制器类的操作</td></tr>
    <tr><td align='center'>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

2.1.6 frame 属性

定义外侧哪个边框是可见的，实际项目中很少用到。

2.1.7 rules 属性

定义内侧边框哪个是可见的，实际项目中很少用到。

2.1.8 summary 属性

定义表格摘要。这个属性对表格的外观没有任何作用，相当于对表格做了一个备注，可能对搜索引擎有帮助，例如：

<table  summary="这个表格用于演示">
  <tr>
    <th>month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

2.2 th 标签

th 用于定义表头类型单元格，他和内容单元格的区别主要在于样式上，表头默认显示粗体居中的文本，例如：

<table border=1>
<thead>
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td>action</td><td>调用控制器类的操作</td></tr>
    <tr><td>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

2.2.1 colspan 属性

colspan 设置单元格横跨的列数，这个属性相当于 Word 表格的合并单元格，例如：

<table border=1>
<thead>
	<tr><th colspan=2>thinkPHP</th></tr><!--定义一个横跨2列的单元格表头-->
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td>action</td><td>调用控制器类的操作</td></tr>
    <tr><td>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

如果 colspan 的值超过当前单元格列数的话，默认只能横跨最大列数。

2.2.2 rowspan 属性

与上述属性类似，这个是用于横跨单元行，例如：

<table border=1>
<thead>
    <tr><th></th><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td rowspan=3>函数类别</td><td>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td>action</td><td>调用控制器类的操作</td></tr>
    <tr><td>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

2.2.3 valign 属性

这个属性用于设置单元格内的内容在垂直方向的对齐方式，目前支持上对齐、下对齐、居中对齐、文字基线对齐。

2.3 tr 标签

tr 用于定义表格中的行，行内可以包含表头单元格 th 或者数据单元格 td, tr 标签表示一行，当中的内容可以是 th 或者 td，tr 标签支持所有的浏览器。

2.4 td 标签

表格中有两种类型的单元格，一种是上边介绍的表头单元格 th，一种是内容单元格 td。和 th 不同的是 td 的内容默认显示正常字体，使用左对齐方式。td 支持的属性基本上和 th 一致。td 必须包含在 tr 标签中才能生效。

2.5 非必须标签

除了表格、行、单元格之外，表格还有一些其他的标签可使用。这些标签是非必须的，但是可以增强表格的内容丰富度和视觉效果。

2.5.1 thead tbody tfoot 标签

thead 用于定义表格的表头，同样命名为表头，它和 th 表头单元格有本质的区别。

thead 实质上是用于对表格的内容进行分组，用于告诉开发者或者搜索引擎表格的哪部分是头，哪部分是内容，哪部分是尾部。所以说 thead 需要和 tbody 、tfoot 结合使用才有效果，正常情况下定义 thead 不会影响到表格的样式和布局，除非你强制定义 thead 的 css 样式。

目前主流的浏览器大都支持 thead、tbody、tfoot 标签，例如：

<table border=1>
    <thead>
        <tr>
            <th >Title</th>
            <th >ID</th>
            <th >Country</th>
            <th >Price</th>
            <th >Download</th>
        </tr>
    </thead>    
    <tbody>
        <tr >
            <th >Tom</th>
            <td>1213456</td>
            <td>Germany</td>
            <td>$3.12</td>
            <td>Download</td>
        </tr>
        </tbody>
    <tfoot>
        <tr>
            <th >Total</th>
            <td colspan="4">4 books</td>
        </tr>
    </tfoot>
</table>

2.5.2 col 和 colgroup 标签

col 标签用来为表格中的列统一设置属性值，使用它主要用来节省代码量。它是一个单标签，无需结束标签，colgroup 标签是 col 的升级版，不同于 col 的是 colgroup 主要以组合的方式对列设置属性样式，而且 col 可以嵌入到 colgroup 内部进行细化的设置。

<table width="100%" >
  <col align="center" />
  <tr>
    <th>title</th>
    <th>title</th>
    <th>title</th>
  </tr>
  <tr>
    <td>css</td>
    <td>HTML</td>
    <td>JavaScript</td>
  </tr>
</table>

例如以上代码使用 col 对列进行居中设置，由于 colgroup 和 col 这两个标签存在严重的浏览器兼容问题，如上图所示，在 Chrome、FireFox、Safari和 ie8+ 等浏览器中不再支持 COL 及 COLGROUP 元素的部分属性，所以建议最好不要使用。

2.5.3 caption 标签

caption 用于定义表格的标题。每个表格只能声明一个标题，默认显示在表格的正上方，仅仅起到一个展示的作用，实际上跟 table 关联不大，完全可以用一个文本类型的标签元素替代:

<table border=1>
<caption>系统为一些常用的操作方法封装了助手函数，便于使用，包含如下：</caption>
<thead>
    <tr><th>助手函数</th><th>描述</th></tr>
</thead>
<tbody>
    <tr><td>abort</td><td>中断执行并发送HTTP状态码</td></tr>
    <tr><td>action</td><td>调用控制器类的操作</td></tr>
    <tr><td>app</td><td>快速获取容器中的实例 支持依赖注入</td></tr>
</tbody>
</table>

3. 表格插件

实际项目开发中并非仅仅是单纯的展示一个表格，有可能需要动态的插入单元格数据、动态的删除行或者列、数据分页、异步加载、或者是动态的修改表格的内容等等的操作，以上这些操作需要通过 JavaScript 去操作进行。项目开发中崇尚对高度相同操作的函数进行封装打包，这也是面向对象的精髓（虽然 JavaScript 不是面向对象语言）。我们可以手动封装一个对 table 表格进行操作的类，也可以使用现成的表格插件，现在介绍一个表格插件 layui-table：

<html>
<head>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css" media="all"><!--引用css文件-->
<script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script><!--引用JavaScript文件-->
</head>
<body>
<table id="demo" lay-filter="test"></table><!--定义表格容器-->
<script>
layui.use('table', function(){//初始化表格控件
  var table = layui.table;
  table.render({//渲染表格
    elem: '#demo'//表格容器的ID
    ,height: 312//生成的表格的高度
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头设置
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
});
</script>
</body>
</html>

HTML 多媒体

多媒体是计算机中用于人机进行实时交互的媒介和互动方式，其中包括图片、文字、音频、视频、动画等。

1. object

object 元素用于定义一个网页插件，使用该元素可以在网页中嵌入多媒体，支持的插件类型有图形、音频、视频、java applets、ActiveX、PDF、flash。不过在 HTML5 标准之前，主流浏览器中只有 IE3.0 之后的版本支持

``` html
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

目前只有 IE 浏览器兼容性较好，所以未能实现初衷虽然兼容性不好，但是在 IE 低版本中 object 使用频率不低，主要用于 flash

1.1 archive 属性

定义对象相关的档案文件的 URL 列表

1.2 classid 属性

定义嵌入网页的插件的自身的 id 值，这个值可以是 flash 的对象id或者 Java 的类的classid

<object classid="clock.class"></object>

浏览器根据这个 classid 可以找到插件的源代码

1.3 codebase 属性

这是一个可选的属性，定义一个 URL 指向 classid 属性所引用的对象的代码

<object classid="clock.class" codebase="http://www.baidu.com/classes/">
</object>

codebase 相当于源代码的域名，根据 codebase+classID 浏览器可以准确定位插件的源代码。

1.4 codetype 属性

类似于 type 属性，用来标识 object/applet 插件的 mime 类型

<object codebase="clock.class" codetype="application/java">
</object>

上述代码定义了一个 Java 类型的插件。

1.5 data 属性

用于指定用于对象处理的 URL，该属性和 classID 类似，只不过是当 object 用于定义一个多媒体（例如图片）格式的时候，data 用于表示图片的源路径，等价于 img 标签的 src 属性，不同的是 img 标签的 src 属性只能用于图像类型，data 则可用于几乎任意的多媒体文件类型。

<object codebase="clock.class" codetype="application/jpeg" data=''>
</object>

1.6 declare 属性

通常用于当 object 插件是 flash 或者 applet 时，定义插件编程语言的前置声明，不参与展示效果。

1.7 form 属性

定义 object 元素对应的表单的id，目前没有主流浏览器支持 form 属性。

1.8 standby 属性

定义当 object 在加载的过程中，浏览器的 object 位置上显示的文本，此属性类似于 img 标签中的 alt 属性。

1.9 height width 属性

定义插件的高度和宽度。

1.10 hspace vspace 属性

定义插件的周围的空白。

2. embed

这个标签的作用基本上和 object 相似，都是用来嵌入插件，不同的是 object 只有 IE 内核的浏览器支持比较完善，而非IE内核的浏览器则对 embed 支持度较高。embed 可以嵌入到 object 标签内，当浏览器不支持 object 时会自动加载 object 内的元素来渲染。

<embed src="helloworld.swf" /> <!-- 定义一个flash -->

3. param

该标签用于为 object 插件定义运行时参数，控制插件的运行方式。

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="test">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

上述定义的每个 param 相当于一个插件的控制参数，name 对应参数的名称，value 对应参数的值，根据具体的插件的不同而不同。

4. audio

audio 是 HTML5 中的新标签，用于播放音频流，格式如下：

<audio src="test.wav">
您的浏览器不支持 audio 标签。 <!-- 定义浏览器不支持该标签时所展示的内容-->
</audio>

上述代码相当于在浏览器中定义了一个播放器，展示效果如下

4.1 autoplay属性

当定义了该属性时，音频会立即播放。

4.2 controls属性

该属性用于定义是否向用户展示播放按钮，如果未定义这个属性，则浏览器默认不显示任何播放器的控件（播放、音量、进度等）。控件可以通过 audio 提供的事件，通过 div+css+JavaScript 自定义实现。

4.3 loop属性

该属性定义时，表示音频是否会重复循环播放。

4.4 muted属性

当该属性被定义是，音频默认播放时是以静音方式播放。

4.5 preload属性

该属性定义音频加载的方式，有3个可选值（auto 自动加载 meta 只加载元数据 none 手动加载）。当设置了 autoplay 时，该属性不生效。

4.6 src属性

定义音频的 URL。

5. source

该标签用于定义音频/视频播放器的源文件，为了兼容不同的浏览器对不同的音频类型的支持，例如：

<audio>
   <source src="test.ogg" type="audio/ogg"> <!-- 定义Ogg类型的音频 -->
   <source src="test.mp3" type="audio/mpeg"> <!-- 定义MP3类型的音频-->
</audio>

上述音频播放器，放到不支持 Ogg 文件的浏览器时，会自动加载 MP3 文件。

6. video

这个标签用于定义视频播放器，大部分属性和 audio 类似，是 HTML5 中新增的标签。

<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

7. 兼容性

HTML中定义多媒体元素不是很复杂，但是难点在于各种浏览器的兼容性问题，例如：

iPhone iPad 不支持 flash 低版本 IE 不支持 embed 非 IE 浏览器不完全支持 object 音视频标签 audio video 仅支持 HTML5 标准多媒体文件格式在不同浏览器的支持程度不同多媒体文件格式在不同的硬件上的支持程序也不同所以说如果你需要大量使用多媒体技术，那么必须要非常熟悉多媒体技术在浏览器上的兼容性问题才行

HTML 结构化元素标签

网页是由一个一个的区域组成，就像房子中的房间一样，每个区域内可以放置 HTML 元素，然后可以对区域设置样式从而将其与别的区域区分开来。这个区域在 HTML 中由结构元素实现，又可以将其称之为容器元素。通过搭配 ID 属性使用，结构元素将会帮助我们构建结构化条理分明的网站逻辑。本章我们介绍一下结构元素的使用方式和场景。本章介绍 HTML 中特殊的标签-结构化标签，由于结构化标签在默认状态下不能呈现相关的视觉样式，所以通常不太起眼，但是想要写出一个结构分明、易扩展、易维护的网页代码，它是必不可少的。

1. div

1.1 适用场景

div 元素在 HTML 中用于定义一个区块，用于对区块内的元素统一布局或者隔离，它本身并不呈现视觉样式，也没有明确的语义，可适用于没有明确语义化的场景，例如：

<div class="AppHeader-inner">
    <ul role="navigation" class="Tabs AppHeader-Tabs">
        <li role="tab" class="Tabs-item AppHeader-Tab Tabs-item--noMeta">
        <a class="Tabs-link AppHeader-TabsLink is-active" href="//www.zhihu.com/" data-za-not-track-link="true">首页</a>
        </li>
        <li role="tab" class="Tabs-item AppHeader-Tab Tabs-item--noMeta">
        <a class="Tabs-link AppHeader-TabsLink" href="//www.zhihu.com/explore" data-za-not-track-link="true">发现</a>
        </li>
        <li role="tab" class="Tabs-item AppHeader-Tab Tabs-item--noMeta">
        <a class="Tabs-link AppHeader-TabsLink" href="//www.zhihu.com/question/waiting" data-za-not-track-link="true">等你来答</a>
        </li>
    </ul>
</div>

代码解释：上述代码将网页头部使用 div 区块定义，这样定义的好处在于，一旦网页需要隐藏头部，或者给头部设置一个特殊的样式（例如颜色、字体）只需要通过 JavaScript 或者 css 操控 div 即可。这样对 div 设置文字颜色，div 中包含的元素统一生效。div 内部可以包含任意元素，理论上可以配合 css 模拟成任何样式的元素，所以在 HTML5 之后原本跟样式相关的元素属性基本上不建议使用了，都可以用 css 替代。

1.2 避免滥用 div

div 作为一个没有特殊意义的标签，相比其它有明确用途的标签，它没有特殊属性，也没有特殊效果，实在想不出还没有什么可以掌握的。但这并不妨碍 div 被滥用。一个标签什么时候应该使用，是由这个标签本身的语义，以及使用者想要表现的内容决定的。

div 没有具体的语义 div 的语义是 division，一个很广泛的语义，在使用 div 之前应该先想想，还有没有更具语义的标签，尽量使用语义明确的标签。比如用 div 来标记文段（p）和列表（li）显然是不合适的。

事实上，为了更好地使用 div，你需要全面了解 HTML 标准提供了哪些标签，它们的语义是什么。如果你不知道 p、span、h1、h2、h3 的存在，只会用 div，必定写出糟糕的 HTML 代码。

<div class="container" id="header">
    <div class="header header-main"></div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">            </div>
        </div>
        <div class="article-section">
            <div class="article-header-level-2">            </div>
        </div>
    </div>
</div>
<div class="container" id="footer">
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com"></a>
        </p>
        <div class="street-address">        </div>
    </div>
</div>

代码解释：例如上述代码，完全使用 div 来定义网页区域，这样做虽然可以实现对应的效果，但是对于搜索引擎、爬虫，甚至网站维护人员来说是一个糟糕的代码，因为搜索引擎识别不出哪部分是头部哪部分是尾部。

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
    </article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com"></a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress"></p>
            <p property="addressCountry"></p>
        </address>
    </section>
</footer>

代码解释：这段代码使用 header 、nav、footer、section 等标签，详细且准确的根据语义化来定义网页的布局。

2. 其他语义化相关机构元素

2.1 span

和 div 的作用类似，span 是通常用来作为文本容器，它没有明确定义的语义，在没有其他合适的元素标签时，可以用 span 来包含文本，它是一个行内元素。例如：

<p><span>一些文字</span></p><!-- 定义一个段落 -->

2.2 header

header 元素通常用于包含头部介绍性相关的元素，是 HTML5 中新增元素。它可以使用全局属性。一个网页中可以使用多个 header 元素，也可以在每个独立的内容机构中使用 header 元素，例如：

<header>
  <h1>网站标题</h1>
  <img src="logo-sm.png" alt="logo">
</header>

注意： header 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器

2.3 nav

nav 是 Navigation 的简称，通常用于网页中的导航栏，使用 nav 将网页中导航栏相关的标签归拢在一个区域，这样结构更清晰明了，例如：

<nav><!-- 定义一个导航栏 -->
    <ul>
        <li><a href="#">首页</a></li> 
        <li><a href="#">新闻资讯</a></li>
        <li><a href="#">常见问题</a></li>
        <li><a href="#">更新日志</a></li>
        <li><a href="#">论坛</a></li>
    </ul> 
</nav>

注意： nav 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器

2.4 article

article 用于定义网页中文档、章节、段落相关的文本结构，一个网页中可以定义多个 article 标签。与 span 不同的是，article 具有明确定义的语义。每个 article 中通常包含 header、H1-H6、address 等和文章标题、作者等相关信息的标签。

<article>　<!-- 定义一篇文章 -->
    <header>
        <h1>article元素使用方法</h1>
        <p>发表日期：<time pubdate="pubdate">2017/2/9</time></p>
    </header>
    <p>此标签里显示的是article整个文章的主要内容</p>
</article>

注意： article 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器

2.5 aside

aside 元素用来定义当前页面或者文章的复数信息部分，它主要包含相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分，通常结合 article 标签使用。

2.6 section

section 元素用于对网页中的内容分块，与 div 不同的是它具有明确的分块语义，但是 HTML 没有对它定义更加细化的语义，所以说如果适用场景有比较明确的语义场景的话应该使用更加符合条件的标签，例如 nav、article、header 等。如果需要对块使用自定义的样式，请尽量使用 div 标签。使用 section 通常用于将一块内容细分成多个小块区域，例如：

<article>
    <h1>编程语言</h1>
    <p>编程语言常用的有 asp,asp.net,php,jsp </p>
    <section> 
        <h2>asp</h2> 
        <p>asp全称Active Server Page</p> 
    </section>
    <section>
        <h2>asp.net</h2>
        <p>asp升级版</p> 
    </section>
    <section>
        <h2>php</h2> 
        <p>简单、入门门槛低</p>
    </section>
</article>

注意： section 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器

2.7 footer

footer 元素用于定义网页的页尾，与 header 元素类似，除了可以定义网页的页尾，还可以用于 article 元素的尾部，例如：

<article>
    <header>文章目录</header>
    <p>文章内容</p> 
    <footer> 文章信息 </footer>
</article> 
<footer> 页面底部 </footer>

注意： footer 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器

HTML 表单

大部分情况下，网页中展示的数据或者图片或者多媒体效果都是静态的数据，但是有时用户需要通过网页跟服务器进行动态的数据交互，例如登录、注册等操作，这时需要用到表单。表单其实是由一些输入框、单选、复选框等元素组成，用户点击提交按钮，浏览器会将这些数据发送给表单设置的 URL ，URL 对应的服务器接收到数据并处理之后，再将数据返回给浏览器。

本章介绍了网页中客户与服务器交互数据的方式-表单，通过表单用户可以将数据发送到服务器，围绕这个功能浏览器定义了一系列的提交方式、认证方式、数据类型等功能，通过复杂的交互方式网页可以实现真正的互联网属性而不是单纯的视觉展现

1. form

form 是一个表单容器，其中包含需要提交的数据，和相应的提交按钮，例如

<form action="/user/login" method="post">
   <h3>登录</h3>
   <div>
      <label for="user_name">用户名</label>
      <input id="user_name" name="user_name" ><!-- 用户名表单 -->
   </div>
   <div>
      <label for="password">密码</label>
      <input id="password" name="password" type="password" ><!--密码表单-->
   </div>
    <div>
        <button  type='submit'>登录</button>
    </div>
</form>

代码解释：当用户点击登录按钮时，使用 post 方式把用户输入的用户名和密码这两项数据提交到，网站服务器的 /user/login 页面下，这时 /user/login 页面的程序会对用户提交过来的用户名和密码与服务器的数据库中用户注册时填写的用户名和密码进行比对，如果相同就登陆成功。

form 标签有很多的属性，下面分别来介绍。

1.1 accept-charset 属性

accept-charset 属性用于设定使用哪种字符集处理表单数据，常用值 utf-8、ISO-8859-1、GB2312 等。其中 utf-8、ISO-8859-1、GB2312 分别表示 Unicode 编码、拉丁字母字符编码、简体中文字符编码，如果需要使用多个字符编码，则需要使用逗号隔开。如果没有设置 accept-charset 属性，则默认使用与 HTML 文档一致的编码。

<form accept-charset='utf-8'><!--使用Unicode编码-->
</form>
<form accept-charset='ISO-8859-1'><!--使用拉丁编码-->
</form>
<form accept-charset="utf-8,ISO-8859-1"><!--同时支持两种编码-->
</form>

1.2 action 属性

用于设定表单提交的服务器的 URL，可以是相对路径和绝对路径。例如设置

<form action="https://www.baidu.com" method="post">
   <h3>登录</h3>
   <div>
      <label for="user_name">用户名</label>
      <input id="user_name" name="user_name"  ><!-- 用户名表单 -->
   </div>
   <div>
       <label for="password">密码</label>
       <input id="password" name="password" type="password" ><!--密码表单-->
   </div>
   <div>
       <button  type='submit'>登录</button>
   </div>
</form>

代码解释：上述代码使用 post 方式向百度首页提交数据。

1.3 autocomplete 属性

用于设定是否启用自动完成功能，这个功能类似于历史记录的功能，之前提交过的表单下次在此输入时，浏览器会记录下来历史记录，可用值 on/off。

<form autocomplete='on'><!--默认开启自动完成-->
<h2>开启自动完成</h2>
用户名:<input type="text" name="fname"><br>
邮箱: <input type="email" name="email"><br>
</form>

<form autocomplete='off'><!--关闭自动完成-->
<h2>关闭自动完成</h2>
用户名:<input type="text" name="fname"><br>
邮箱: <input type="email" name="email"><br>
</form>

注意：除了 Opera 其他主流浏览器都支持 autocomplete。

1.4 enctype 属性

enctype 用于定义表单数据提交到服务器的过程中如何对数据进行编码，可选值有：

application/x-www-form-urlencoded；
multipart/form-data；
text/plain

第一种：application/x-www-form-urlencoded 默认方式是第一种 application/x-www-form-urlencoded，当使用 form 表单提交数据时，需要对数据进行编码，因为 URL 的数据是通过 ?key=value&key=value& 的方式传输给服务器，这其中有一些作为功能性质的特殊字符例如 & ? =，如果数据中带有这些字符而且未进行编码的话，可能会导致传输数据发生错误，例如原本是 ?key=value ，如果 value 是 123&456 的话，那么结果服务器中接收到的 value 值变成 123，且多出一个 key=456，这种编码方式叫做 URI 百分号编码，其标准收录在 RFC3986 中。
第二种：multipart/form-data

当设置成 multipart/form-data 时，浏览器不对字符进行编码，这种编码方式通常适用于上传文件；

第三种：text/plain

使用第三种方式 text/plain 时，浏览器将请求参数放入 body 作为字符串处理，这种方式用于传输原生的 HTTP 报文，不适用任何格式化处理。

1.5 method 属性

使用表单提交数据时，实际上只发送一个 HTTP 协议的数据请求，HTTP 协议有很多种数据请求方式，这个 method 属性用于设定 HTTP 请求的方式。常用的方式有 post、get，当未设置时默认使用 get 方式。除了常用方式之外，根据服务器 HTTP 网关的设置，还可以支持：

options 客户端查看服务器的配置；
head 用于获取报文头，没有 body 实体；
delete 请求服务器删除指定页面；
put 请求替换服务器端文档内容；
trace 用于诊断服务器；
connect 将连接设置成管道方式的代理服务器，用于 HTTP1.1

1.6 novalidate 属性

当设置时，表单不会验证输入，否则的话当点击提交按钮时，浏览器会根据表单输入框的类型来验证输入内容是否合法，例如：

<form action="" method="post" novalidate><!--提交时不验证-->
<h2>提交时不验证</h2>
        <h3>登录</h3>
        <div>
            <label for="user_name">用户名</label>
            <input id="user_name" name="user_name"  autofocus="" required=""><!-- 用户名表单 -->
        </div>
        <div>
            <label for="password">密码</label>
            <input id="password" name="password" type="password" autocomplete="off" value="" required=""><!--密码表单-->
        </div>
        <div>
            <button  type='submit'>登录</button>
        </div>
</form>

<form action="" method="post"><!--提交时验证-->
<h2>提交时验证</h2>
        <h3>登录</h3>
        <div>
            <label for="user_name">用户名</label>
            <input id="user_name" name="user_name"  autofocus="" required=""><!-- 用户名表单 -->
        </div>
        <div>
            <label for="password">密码</label>
            <input id="password" name="password" type="password" autocomplete="off" value="" required=""><!--密码表单-->
        </div>
        <div>
            <button  type='submit'>登录</button>
        </div>
</form>

上述代码，当点击登陆按钮时，浏览器会验证用户名是否输入，密码是否输入，未输入的话浏览器会提示，并且提交不成功。novalidate 属性适用于：form，以及以下类型的标签：text, search, url, telephone, email, password, date pickers, range 以及 color，复杂的规则需要结合 required 属性验证。

1.7 target 属性

这个属性用户设置表单提交之后浏览器的跳转地址，默认是在当前页面打开新地址，可选值有：

_blank 新窗口；
_self 默认，当前窗口；
_parent 父窗口；
_top 最顶层窗口；
_framename 指定的框架例如:

<form action="https://www.baidu.com" method="post" target="_blank">
<h2>表单提交后跳转到新窗口</h2>
        <h3>	登录 	</h3>
        <div>
            <label for="user_name">用户名</label>
            <input id="user_name" name="user_name"  autofocus="" required=""><!-- 用户名表单 -->
        </div>
        <div>
            <label for="password">密码</label>
            <input id="password" name="password" type="password" autocomplete="off" value="" required=""><!--密码表单-->
        </div>
        <div>
            <button  type='submit'>登录</button>
        </div>
</form>

上述代码会在提交完数据之后，在一个新的浏览器界面中打开百度的首页。

2. input

表单内的标签，用于记录用户输入信息，可以是文本框、复选框、单选框、日期、数字、按钮、文件、密码、隐藏域等等。

2.1 文本框

文本框是表单中最常见的表单控件，没有设置样式的话，默认是一个长方形的输入框，获取焦点时外边框变蓝色，当设置 type=text 就定义了一个文本框，例如：

<form action="https://www.baidu.com" method="post" target="_blank">
        <h3>	登录 	</h3>
        <div>
            <label for="user_name">用户名</label>
            <input id="user_name" type='text' name="user_name"  autofocus="" required=""><!-- 用户名表单 -->
        </div>
        <div>
            <button  type='submit'>登录</button>
        </div>
</form>

2.2 复选框

复选框用于对多个选项进行复合选择，网站开发中让用户选择兴趣爱好、技能标签等可以使用复选框，使用 type=checkbox 定义复选框：

<div class="div_title_question_all">
    <div id="divTitle5" class="div_title_question">从未使用网约车的原因是：<span class="qtypetip"> 【多选题】</span></div>
</div>
<div class="div_table_radio_question" id="divquestion5">
    <ul class="ulradiocheck" style='list-style-type:none'>
        <li style="width:99%;"><input  id="q5_1" type="checkbox" name="q5" value="不熟悉叫车程序"><label>不熟悉叫车程序</label></li>
        <li style="width:99%;"><input  id="q5_2" type="checkbox" name="q5" value="习惯小汽车出行"><label>习惯小汽车出行</label></li>
        <li style="width: 99%;"><input  id="q5_5" type="checkbox" name="q5" value="担忧网约车安全性"><label>担忧网约车安全性</label></li>
        <li style="width: 99%;"><button onclick='formSubmit()'>结果</button></li>
    </ul>
</div>

<script>
    function formSubmit() {//点击按钮获取复选框结果
        var obj = document.getElementsByName("q5");
        var check_arr = [];
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked)
                check_arr.push(obj[i].value);
        }
        alert("您的选项是："+check_arr);
    }
</script>

上述代码示例中当用户点击结果按钮时，使用 JavaScript 获取已选中的复选框的 value 值，并打印结果。

2.3 单选框和复选框比较类似，单选框也是用来作为选项的，不同的是单选框只能选择一个，但是是在一个单选框组内才行，同一个组的 name 值必须相同，定义单选框的方式是设置 type=radio：

<div class="div_title_question_all">
<div id="divTitle2" class="div_title_question">您的年龄段：<span class="req">*</span></div>
</div>
<div class="div_table_radio_question" id="divquestion2">
    <ul class="ulradiocheck" style="
list-style-type:none">
        <li style="width: 19%;"><input  type="radio" name="q2" id="q2_1" value="1"><label for="q2_1">18岁以下</label></li>
        <li style="width:19%;"><input  type="radio" name="q2" id="q2_2" value="2"><label for="q2_2">18~25</label></li>
        <li style="width:19%;"><input  type="radio" name="q2" id="q2_9" value="9"><label for="q2_9">56~60</label></li>
        <li style="width:19%;"><input  type="radio" name="q2" id="q2_10" value="10"><label for="q2_10">60岁以上</label></li>
    </ul>
</div>

2.4 密码

密码是一种特殊的文本控件，主要用于登录注册时输入的用户密码，默认显示……，设置 type=password 可以定义一个密码控件，例如：

<div class="ui attached segment">
    <div class="required inline field ">
        <label for="password">密码</label>
        <input id="password" name="password" type="password" autocomplete="off" value="" required=""><!-- 密码表单 -->
    </div>
    <div class="inline field">
        <label></label>
        <button class="ui green button">登录</button>
    </div>
</div>

2.5 隐藏输入框

JavaScript 没有全局变量的功能，有时需要定义全局变量，可以用 cookie 来实现，但是浏览器可以关闭 cookie ，而且 cookie 在发送 HTTP 时会被带上，浪费数据传输，这时使用隐藏域的方式实现比较简单。例如：

<form action="https://www.baidu.com" method="post" onclick='beforeSubmit()'>
    <input type="hidden" id='_viewstate' name="_viewstate" /><!--隐藏域-->
    <input type="submit" value="click" />
</form> 
<script>
function beforeSubmit(){//提交表单前执行赋值函数
    document.getElementById("_viewstate").value = document.referrer;
}
</script>

上述代码通过定义隐藏域，当点击提交按钮时将该页面的上个页面的 URL 传输给表单的目标 URL，做到传输值的作用。

2.6 文件表单

有时需要做一个上传文件的功能，这时需要用到文件表单，通过设置 type=file 可以定义文件表单控件，还需要设置 enctype=multipart/form-data 编码方式，才能正确传输文件，例如：

<form  action="/user/settings/avatar" method="post" enctype="multipart/form-data">
    <div>
        <label for="avatar">选择新的头像</label>
        <input name="avatar" type="file">
    </div>
</form>

2.7 重置按钮

重置按钮 type=reset用于将表单内的控件的值重置为初始化状态，并非清空数据，表单中的初始化数据定义在 value 值中，而且重置按钮必须包裹在 form 表单标签中，例如：

<form  action="/user/settings" method="post">
    <div>
        <label for="username">用户名</label>
        <input id="username" name="name" value=""  autofocus="" required="">*<!--初始化表单是空-->
    </div>
    <div>
        <label for="full_name">自定义名称</label>
        <input id="full_name" name="full_name" value=""><!--初始化表单是空-->
    </div>
    <div>
        <input type="reset" value="重置"><button class="ui green button">更新信息</button>
    </div>
</form>

2.8 提交按钮

提交按钮相当于表单 form 的开关，点击这个开关相当于将表单中的数据提交给服务器。通过设置 type=submit 可以定义一个提交表单按钮，这个按钮必须包裹在 form 标签中才能生效，例如

<form class="ui form" action="/user/settings" method="post">
    <div class="required field ">
        <label for="username">用户名<span class="text red hide" id="name-change-prompt"> 该操作将会影响到所有与您帐户有关的链接</span></label>
        <input id="username" name="name" value="" data-name="jdhg" autofocus="" required=""><!--初始化表单是空-->
    </div>
    <div class="field">
        <input type="submit" value="提交">
    </div>
</form>

HTML 框架

框架可以理解为在网页中插入了一个独立的网页窗口元素，比较常用的框架元素是 iframe，iframe 有自己独立的窗口 window 以及上下文，iframe 元素自己内部的逻辑操作可以独立，当然在同域条件下，iframe 元素的窗口可以访问父级窗口，父级窗口也可以访问 iframe 窗口。

现在前端应用嵌入 iframe 的场景越来越少了，但是在大型的网站中也会经常利用 iframe 嵌入多个网页到一套网站系统中，方便用户在一个系统中去进行业务操作，而不需要在几个不同的系统中来回切换。

框架是 HTML 中引用外部网页的方式，本章介绍了 iframe 元素的使用方式，以及使用框的优缺点。在实际项目开发中需要结合网页设计中的网络加载时间、性能、代码可用性等因素考虑，决定是否需要使用 iframe。

1. iframe

1.1 定义方式

在网页中通过定义一个 iframe 标签即可引用另一个网页进来，例如：

<iframe  src="http://www.baidu.com" height=500 width=500 /><!-- 通过src设置iframe的地址 -->

1.2 height width 属性

通过设置 height 和 width 可以控制 iframe 的高和宽，但是实际项目中有时你并不知道所引用的 iframe 的宽高，或者说 iframe 的宽和高是动态不固定的，这时需要先获取到引用的 iframe 的宽高，然后将值设置给其属性，例如：

<iframe id="iframe" src="http://www.imooc.com/wiki/html5/forms.html?preview=d2269b100476b4b77b9ddc11242e85ab" frameborder="1"></iframe><!--src的域名需要和当前网页域名一直，否则跨域不能获取iframe的contentWindow-->
 <script>
var iframe = document.getElementById("iframe");//获取iframe的dom节点
iframe.onload = function(){
    var doc     =  this.contentWindow.document;
    this.height =  doc.documentElement.scrollHeight;//高度动态设置
    this.width  =  doc.documentElement.scrollWidth;//宽度动态设置
}
</script>

1.3 frameborder 属性

该属性表示是否显示 iframe 边框，默认为 1 表示显示边框，0 表示隐藏，例如：

<iframe src="https://www.baidu.com" frameborder=0></iframe><!--无边框-->
<iframe src="https://www.baidu.com" ></iframe><!--默认有边框（很细的一个框，仔细看）-->

1.4 scrolling 属性

该属性表示是否显示滚动条，默认根据 iframe 的尺寸来判断是否需要滚动条，设置为 yes 时将始终显示滚动条，设置为 no 时表示完全不显示滚动条：

auto 默认值,默认值 auto 表示，当内容超过 iframe 高或宽时，自动出现滚动条。
yes 有滚动条
no 无滚动条

<iframe src="https://www.baidu.com"></iframe><!--默认情下，在需要的情况下出现滚动条-->
<iframe src="https://www.baidu.com" scrolling='yes'></iframe><!--强制显示滚动条-->
<iframe src="https://www.baidu.com" scrolling='no'></iframe><!--强制不显示滚动条-->

1.5 srcdoc 属性

该属性定义在 iframe 展示的 HTML 描述代码，该属性不支持 IE 浏览器，例如：

<iframe src="https://www.baidu.com" srcdoc='<p>使用百度搜索</p>'></iframe>

如果浏览器支持 srcdoc 属性，会只显示 srcdoc 中的内容, 不支持的时候 ( IE ) 就显示 src 指定的内容。

1.6 sandbox 属性

该属性用于表示对 iframe 的权限限制，可选值有：

空，表示限制所有权限
allow-same-origin 允许相同源
allow-top-navigation 允许包含导航栏
allow-forms 允许表单提交
allow-scripts 允许脚本执行

<iframe src="https://www.baidu.com" sandbox="" width=600 height=600>
</iframe>

执行上述代码，会发现加载之后的百度首页虽然显示，但是并不能执行搜索，这是因为 sandbox 属性设置为空字符串时，iframe 会限制框内网页运行 JavaScript 脚本。

1.7 优缺点及建议

页面引用 iframe 元素，相当于引用一个完整的 HTML 网页。

这样做的好处是：

代码可复用性，相同的页面无需重复实现，只需要引用即可；
iframe 是一个封闭的运行环境，环境变量完全独立、隔离，不会污染宿主环境；
iframe 可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，提升网站的安全性

缺点是：

被引用的 iframe 如果过多的话，可能会产生过量的 HTTP 请求；
跨域问题；
样式不容易适配基于 iframe 的优缺点来看，在实际项目开发中，一般用来加载广告、播放器、富文本编辑器等非核心的或者需要格里运行的网页代码。

1.8 iframe 通信及跨域问题

1.8.1 iframe 通信

在使用 iframe 时难免会碰到需要在父窗口中使用 iframe 中的变量、或者在 iframe 框架中使用父窗口的变量，在 iframe 的域名和父窗口的域名完全一致的情况下，可以实现调用：

在父窗口中调用 iframe 元素的变量：可以使用 contentWindow 的方式调用,下述代码在父窗口中调用 iframe 元素的变量

<iframe src='index.html' id='test' />
<script>
    //父窗口调用 iframe 的window对象
	var obj = document.getElementById("test").contentWindow;
</script>

在 iframe 中调用父窗口的变量：

<script>
	var dom = window.top.document.getElementById("父窗口的元素ID");
</script>

兄弟 iframe 间相互调用变量：

<iframe src='index1.html' id='test1' />
<iframe src='index2.html' id='test2' />
<script>
	var dom2 = window.top.document.getElementById("test2").contentWindow.getElementById("");//这里是在test1调用test2中的某个dom
</script>

1.8.2 跨域问题

但是，JavaScript 出于安全方面的考虑，不允许跨域调用其他页面的对象。这样在安全限制的同时也给 iframe 元素上带来了不少麻烦，导致一个网页中如果出现与当前域名不相同的 iframe，就无法通过 JavaScript 调用 iframe 中的 DOM 结点了。

扩展知识：什么是跨域？简单地理解就是因为 JavaScript 同源策略的限制，a.com 域名下的 JavaScript 无法操作 b.com 或是 c.com 域名下的对象。

非原创，参考文章：www.imooc.com/wiki/html5