标签：html tran 转义字符 空格 view for 修改表 论坛 绑定
什么叫做互联网？
互联网就是通过网络(有线、无线，4G)将世界各地的计算机(手机、平板、PC、服务器)连接起来的结构。
随着互联网及其相关技术的不断发展，目前基于互联网的程序有B/S(Broswer/Server)架构和C/S(Client/Server)架构两种组成。
B/S也就是浏览器/服务器，用户只需要在浏览器中进行相关操作(通常是输入访问地址，或者提交表单数据)，便可访问对应的互联网服务。
C/S也就是客户端/服务器，用户需要在操作系统上安装特定的客户端(例如QQ、微信、钉钉)后才能访问互联网服务。
B/S和C/S两者的不同在于如果程序有新功能发布,C/S架构的程序需要相对频繁的升级客户端，而B/S通常只需要记住请求地址(例如 www.taobao.com , www.baidu.com)即可。
Web就是基于互联网的一种B/S应用程序，通常都是保存在服务器端(CentOS/Ubuntu)具体的页面,以.html或者.htm结尾的文本文件。Web应用是使用HTML5+CSS3+JavaScript开发的，而服务端应用主要是使用Java/Python/PHP语言做开发。
由于不同的浏览器引擎在渲染同样的HTML代码和js引擎执行JavaScript代码时可能会存在不同的执行效果。
因此W3C万维网联盟组织制定了Web标准，主要包含结构(Structure)、表现(Persentation)和行为(Behavior)三个方面组成。
结构标准:用于对网网页元素进行整理和分类，主要包括XML和HTML。
样式标准:用于设置网页的版式、颜色、大小等外观样式，主要指的是CSS
行为标准:用于网页模型的定义以及与服务端进行数据交互的实现，主要包含DOM和ECMAScript两部分
如果把Web标准类比成人的话，那么结构标准就类似于人的身体结构，样式标准类似与人的外观，行为标准类似于人的动作行为。
当用户在浏览器的地址栏中输入 www.taobao.com 这个URL时，将会发生很多操作。
首先浏览器会请求DNS服务器将域名(taobao.com)解析成对应的IP地址，然后根据这个地址在互联网中寻找对应的服务器，并向这个服务器发起一个get请求，由这个服务器返回默认的资源。
在服务器端实际上还有很复杂的业务逻辑，服务器通常是集群部署，到底由哪台服务器处理请求，这需要一个负载均衡设备(LVS)来平均分配所有用户的请求，还有请求的数据时存储在分布式缓存(Memcache,Redis)里还是在一个静态文件中，或者是数据库(MySQL,Oracle)里；当数据返回浏览器时，浏览器解析数据发现还有一些静态资源(如CSS,JS,图片)时又会发起另外的HTTP请求，而这些请求可能会在CDN上，那么CDN服务器又会处理这个用户的请求，大体上一个用户的请求会涉及到这么多操作，每一个细节都会影响到这个请求最终是否会成功，如下图所示，通过Chrome提供的开发者工具的Network选项，可以观察到请求的资源。
当使用浏览器输入https://www.taobao.com访问淘宝时，网页中包含了文字、图片、超链接以及各种动画效果描述的商品信息，如下图所示
而在浏览器中输入https://v.qq.com/访问腾讯视频时，网页中包含了各式各样的在线大片(视频),如下图所示
而当在浏览器的输入框中输入https://y.qq.com/访问QQ音乐时，网页中包含了大量的在线音乐，如下图所示
通过淘宝、腾讯视频和QQ音乐这三个典型的网站得出结论，网页中包含了文字、图片、超链接、Flash、音频、视频等元素组成，而它们的背后都是使用HTML,CSS,JavaScript来构建的，我们可以使用Chrome浏览器的查看源代码(Windows快捷键control+shift+i,macOS快捷键option+command+u)来查看那些代码,淘宝首页的代码片段如下所示。
而前端工程师正是编写这些内容，然后交由浏览器的渲染引擎渲染成我们看到的效果,以及执行JavaScript完成动画效果和服务端数据交互。
HTML(Hyper Text Markup Language)是超文本标签语言，通过一套文本标签来表示网页中的常见元素，例如文本、图片、表格、列表、音频、视频等等，常见的Web站点(例如百度、淘宝、京东)都是使用HTML来开发的。
这里通过一段代码(syntax.html)来体会下html标签的作用，代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理解HTML标签的作用</title>
</head>
<body>
我是一段普通文本
<H2>我是H2标题文本</H2>
</body>
</html>
先说明下项目的目录结构，在之前的D:/workspace/web文件夹中创建了四个文件夹，分别是module/html,css,js,images,分别用于存放html页面，css样式代码和javascript代码以及图片资源。
因此syntax.html存放在module/html目录下。
在启动Apache服务器后，默认Apache服务是随系统启动的，如果没有自动启动，可以在Windows搜索栏中输入services.msc打开系统服务，然后找到Apache24服务，设置为自动启动，如下图所示
使用浏览器访问地址http://127.0.0.1/module/html/syntax.html，可以看到如下效果
通过对比发现使用了html标签<h2></h2>包围的的文本字体被加粗，并且独占一行显示，因此不同的html标签有不同的语义。
W3C(Word Wide Web Consortium)万维网联盟组织定义了HTML5文档结构的标准
HTML文档结构的组成如下代码所示，采用Visual Studio Code生成的HTML5模板(template.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
任何事物都是从无到有，逐步发展壮大起来的，那么HTML也不例外，目前从W3C官网获知最新的HTML版本是HTML5.3,那么在此之前还有哪些主要的HTML版本呢？怎么知道当前网站使用的HTML版本呢？
文件第一行的<!DOCTYPE html>么，它实际上就是告诉了浏览器按照HTML5的规范来渲染网页，在这之前浏览器都是使用HTML4.01或者是XHTML1.0的规范渲染网页的，它们俩同时都有Strict,Transtional和Frameset三个版本。它们也和HTML5一样，通过DOCTYPE声明便可知道网站使用的HTML版本，如下图所示得知该网站使用了XHTML1.0 Transitional版本。
XML版本声明代码片段如下所示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html5和历史版本还有一点不同的就是html文档的字符集声明:
html5的字符集声明如下所示：
<meta charset="UTF-8">
html5版本之前的字符集声明
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
因为目前流行的Web站点(淘宝、京东、腾讯、百度、网易、搜狐、新浪、小米等等)纷纷采用基于HTML5构建，此处对历史版本不再赘述，后期所有案例均采用HTML5实现。
html标签是作为网页的根标签，主要包含head和body两对标签。
其中head标签中常见的是title和meta标签,title是描述网页的标题信息，Windows下的网页标题通常在网页的右上方,macOS下的网页标题在左上方。 meta用于描述网页的属性信息，例如这里指定了网页的字符集，为了正常显示中文，设置成了utf-8,该字符包含了全世界所有国家需要用到的字符。
body标签用于描述网页的主体元素，例如文本、列表、超链接、表格、表单、图片元素都是在body标签中。body标签还有两个属性，bgcolor用于指定网页的背景颜色，text用于指定网页文本的颜色（这俩属性都不太常用）
当然如果你想要这个页面部署到服务器后使用浏览器访问时只能看到网页的标题信息，因为body标签中不包含任何内容，而后期在编写页面上的元素(例如文本、图片、超链接、表单等等)都是包含在body标签内。
在学习具体的页HTML标签之前，先讨论HTML标签的作用、分类、HTML标签的属性。
在HTML网页中用于描述页面元素的符号称为标签，例如<p></p>,<hr/>等等，标记在使用时必须使用<>也就是尖括号括起来。
html标签分类主要分为双标签和单标签。
<p>文本内容</p>，在一对标签之间编写文本内容，如下代码片段所示<p>这是段落</p>
<div>这是容器</div>
<header></header>
<markup />,使用/结束标签。如下代码片段所示,展示了四个最常用的单标签。<br/>
<hr/>
<img src="" alt=""/>
<input type="text"/>
HTML标签存在着嵌套和并列的关系
标签嵌套：在一对标记中允许包含另外一对标记，如下代码片段所示。
<div>
<img src="" alt=""/>
</div>
在编写嵌套标记时，为了便于程序的维护，需要使用换行+TAB来表示层级关系，如下代码片段所示。
<body>
<div>
<a href="">
<strong>超链接</strong>
</a>
</div>
</body>
标签并列关系
html中最典型的嵌套关系的标签就是head和body，它们是平级的，代码片段如下所示
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
生活中常见的手机的颜色、品牌、重量、等等都是手机的属性描述信息。
定义:通过设置HTML标签的属性来改变元素的显示效果
语法:
<>中在HTML中，所有的标记都有四大属性
如下应用案例(attribute.html)所示，展示了属性在html标签中的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML标签的使用场景</title>
</head>
<body>
<!--
id title style class是所有html标签的四大通用属性
一个标签可以有多个属性，属性之间使用空格隔开
-->
<div id="container" title="我是一个布局标签" align="center" class="" style="">
html属性的应用
</div>
</body>
</html>
注释是程序的附加描述信息，注释的内容会被浏览器忽略，注释主要用于描述程序的功能,html中的注释是以下形式。
<!-- 这是注释的内容-->
需要注意的是注释不能嵌套使用，如下代码所示，会发生语法错误，如下代码片段所示
<!-- <!-- --> -->
同时注意注释不能出现在标记中，如下代码片段所示
<p <!-- -->></p>
HTML标签语义指的就是HTML标签的含义，在合适的地方放合适的标签，方便代码的阅读和维护，使用语义化标签会更有利于搜索引擎优化，让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 。
目的:通过学习一系列的文本标签改变文本在浏览器中的默认效果
在HTML页面中以醒目的方式(加粗，文字较大)表现文本。
通过<h1></h1> - <h6></h6>之间的6对标签实现，其中<h1></h1>称为一级标题，依次递增到六级标题，标题的字体依次递减，独占一行，加粗显示。
同时标题还有align属性，可以设置标题的对齐方式，可以为left,center,right。
如下应用案例(hseries.html)所示,展示了标题标签的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题标签的使用</title>
</head>
<body>
<h1 align="center" >我是一级标题</h1>
<h2 align="left">我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
通常在新闻网站的某一篇新闻文章时回使用到标题标签，如下图所示。
新闻地址为:http://news.163.com/18/0608/10/DJP8H18M000189FH.html
在成段的文字两边分别添加开始标签<p>和结束标签</p>就构成了HTML中的段落。默认情况下，浏览器在显示段落时会另起一行并与后续段落保持一定的距离。
文字大小采用默认大小，文本会在一个段落中根据浏览器窗口的大小自动换行。
如下应用案例(p.html)所示，同样的文本内容，在不加段落标签，默认是在一行显示(如果文本内容没有超过一行)，而加了段落标签的内容都是新增一行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>段落标签的使用</title>
</head>
<body>
<!--普通文本-->
欢迎大家跟我一起学习前端
我们将会学习HTML5,CSS3,JavaScript,jQuery,AngularJS,Node.js,Vue.js,React核心技术
接下来学习遇到什么问题，可以发邮件给我，我的邮箱账号时18601767221@163.com
<!--使用段落标签包含的文本-->
<p align="left">欢迎大家跟我一起学习前端</p>
<p align="left" >我们将会学习HTML5,CSS3,JavaScript,jQuery,AngularJS,Node.js,Vue.js,React等核心技术</p>
<p> 接下来学习遇到什么问题，可以发邮件给我，我的邮箱账号时18601767221@163.com</p>
</body>
</html>
html中使用<br/>表示文本内容的换行，当你想在某段文本中实现换行的效果时，可以使用单标签<br/>来实现，如下案例(br.html)展示了<br/>标签的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>换行标签的使用</title>
</head>
<body>
成功最有效的办法就是向有经验的人学习和请教。
失败是成功之母。
自信是成功之基。
成功最有效的办法就是向有经验的人学习和请教。<br/>
失败是成功之母。<br/>
自信是成功之基。<br/>
</body>
</html>
<hr/>标签在html页面上表现为一条水平分割线,可以通过size属性指定水平线自身的宽度，以px为单位的数值;width属性指定水平线在页面上的宽度，可以采用px或者百分比作为值。还可以通过align属性指定对其方式，color指定水平线的颜色，
如下案例(hr.html)展示了<hr/>标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平线标签的使用</title>
</head>
<body>
<p>楚河</p>
<hr size="5px" width="80%" align="left"/>
<p>汉界</p>
</body>
</html>
如下应用案例(article.html)所示，结合标题、水平线和段落标签实现了计划书
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用文本标签写一篇计划书</title>
</head>
<body>
<h1>2019年度计划</h1>
<hr />
<p>时间:2018/06/08-2019/12/31</p>
<p>计划内容:</p>
<p>技术:涵盖大前端、大后端、移动端以及大数据方向的技术栈</p>
<p>英语:BEC高级</p>
<p>驾照:C照</p>
</body>
</html>
页面的空格以及一些特殊的字符需要通过转义字符的方式实现，常用的特殊字符包含表示空格,小于，大于和版本，它们的标记名称和功能描述表格如下所示
| 标记名称 | 功能描述 |
|---|---|
|
表示空格，如果想要表示多个空格，使用多个 即可 |
< |
表示小于 |
> |
表示大于 |
© |
表示版本 |
如下应用案例(char.html)展示了特殊文本在html中的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>特殊字符的使用</title>
</head>
<body>
<div id="desc">
在HTML中，如果想要表示空格，就需要使用 来表示</br>
在HTML中，表示段落使用<p></p>表示</br>
© by Tony 2018/06/11
</div>
</body>
</html>
有一些文本标签，它们不影响网页结构，但是为所在页面的文本添加了额外的样式效果，如下表展示了常用的文本样式标签
| 标签名称 | 说明 |
|---|---|
<strong></strong> |
加粗 |
<em></em> |
倾斜 |
<ins></ins> |
下划线 |
<del></del> |
删除线 |
<sup></sup> |
上标 |
<sub></sub> |
下标 |
如下应用案例(textstyle.html)所示，展示了常用文本格式化标签的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本格式化标签的使用</title>
</head>
<body>
<strong>我是加粗的文本</strong></br>
<em>我是倾斜的文本</em></br>
<del>我是删除线的文本</del></br>
应用场景:<del>原价9999</del>,现价9.9</br>
<ins>我是下划线</ins></br>
H<sub>2</sub>O </br>
5<sup>3</sup>=125</br>
</body>
</html>
如果想在网页中实现文本的回车和空格效果，可以使用<pre></pre>标签来实现，
如下应用案例(pre.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用pre保存空格和回车</title>
</head>
<body>
<pre>
使用pre标签保存 和
回车的效果
</pre>
</body>
</html>
块分区元素:<div></div>就是常用的块分区元素,后期会使用该元素来实现网页的布局
行分区元素:<span></span>,设置同一行文字的不同样式
行内元素和块级元素
按照元素的表现形式来划分可以分为行内元素和块级元素
行内元素:允许在一行内显示多个元素，例如<span></span>,<strong></strong>,<em></em>,<ins></ins>,<del></del>,<sup></sup>，<sub></sub>,<a href=""></a>,其作用是包裹文本，并处理文本的表现形式,有如下特点
块级元素:每个元素独占一行称为块级元素，例如<div></div>,<p></p>，<h1>，</h1>,其主要是用于页面布局，有如下特点:
文字类(例如<p></p>,<h1></h1>)不能存放其他块级元素
如下应用案例所示(divspan.html)展示了块级元素和行内元素的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理解html分区元素div和span的区别</title>
</head>
<body>
<!--
同样一首唐诗。使用div每行显示,使用span则显示在一行中
-->
<div>春晓</div>
<div>春眠不觉晓，</div>
<div>处处闻啼鸟。</div>
<div>夜来风雨声，</div>
<div>花落知多少。</div>
<span>春晓</span>
<span>春眠不觉晓，</span>
<span>处处闻啼鸟。</span>
<span>夜来风雨声，</span>
<span>花落知多少。</span>
</body>
</html>
HTML标记的注意事项
<p></p>标签中不能包含其他块级元素在使用图像和超链接标签之前，需要先了解URL(Uniform Resource Locator)也就是统一资源定位符，用于描述网页中引用资源的路径。因为在Web应用开发中，为了方便管理资源，通常将页面，图片，样式，脚本等资源分成不同的类别(文件夹)存放，如下图所示
而它们之间的关系就形成了目录结构，所谓的目录就是文件夹的路径，一般路径分为相对路径和绝对路径两种。
https://img.alicdn.com/tfs/TB1mGl9sH9YBuNjy0FgXXcxcXXa-190-140.gif
协议名称:这里是https
主机名称:img.alicdn.com
文件路径:tfs
文件名称：TB1mGl9sH9YBuNjy0FgXXcxcXXa-190-140.gif
同级别:images和css、js、module、index.html等就是同级别目录，如果index.html需要引入图片，只需要加上images/图片名称即可。
上级:图像文件位于html文件的上一级文件夹(例如这里的/images/Canyenne.jpg和/module/img.html),那么就先使用../返回上一级目录(即module)，然后再进入/images/Canyenne.jpg即可。
下级:图像文件位于html文件的下一级文件夹(例如/module/images/Canyenne.jpg和/module/img.html)，那么直接使用文件夹加文件名(即/images/Canyenne.jpg)
路径通常在HTML中的图片和超链接中使用。
在电商网站中使用图片来描述商品会比一大堆文字的效果更好，通常在电商网站中会大量使用图片(通常是.jpg格式)来描述商品信息。在日常开发中，图片素材通常由UI设计人员提供，web页面中支持的图片格式包括.jpg(有损压缩),.gif(动图)和.png(透明)三种格式。
html中使用<img />单标签来描述图片，其中src属性必须设置，用来告诉浏览器图片的地址路径，同时还可以用过width和height来设置宽度和高度，如果图片无法显示，可以通过alt属性增加文字描述信息，通过title属性来显示当鼠标悬停在图像上时显示的内容，
如果想给图片添加边框，只需要设置boder属性即可。
如下应用案例(img.html)展示了<img>标签及其属性的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片标签的使用</title>
</head>
<body>
<h3>我最喜欢的车</h3>
<img src="/images/Canyenne.jpg" width="1024px" height="768px" title="这是保时捷卡宴" alt="这是保时捷卡宴" border="10" />
</body>
</html>
超链接可以实现页面之间的跳转，在常见的超链接中，可以实现
在html中,通过<a></a>标签实现页面的跳转，通过href属性来指定跳转的地址，、
还可以通过target属性指定网页的打开方式，默认值是"_self"，如果想在一个浏览器的新窗口中打开，则可以将target属性设置为"_blank"。
应用案例(a.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签的使用</title>
</head>
<body>
<!--超链接的使用场景-->
<!--网站内部的链接-->
<a href="img.html">我最喜欢的车</a><br />
<!--从一个网站跳转到另外一个网站-->
<a href="https://www.baidu.com">百度一下,你就知道</a> <br />
<a href="https://www.taobao.com" target="_blank">淘宝网，淘，我喜欢</a>
</body>
</html>
当我们在浏览内容很长的网页时(例如张学友的百度百科)，页面中通过增加一些锚点(通俗点可以理解为记号)，可以实现页面内从其他位置跳转到该锚点的位置。
如下图所示
点击锚点
跳转到锚点的内容
那么同样的功能如果通过<a></a>标签来实现呢？
这里我们以在线小说为例子
首先我们必须定义一个锚点，代码片段如下所示
<a href="#first">第一章</a>
然后定义一个跳转到该锚点链接的内容，代码片段如下所示
<div id="first">
<h1>第一章</h1>
<div id="chapter1">
<p>生命不息，编码不止</p>
</div>
</div>
为了明确看到锚点跳转的效果，我们需要使用一号标题填充一些内容，完整的锚点跳转实现如下应用案例(anchor.html)所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接的锚点定位</title>
</head>
<body>
<div id="chatper" >
<h1><a href="#first">第一章</a></h1>
<h1><a href="#">第二章</a></h1>
<h1><a href="#">第三章</a></h1>
<h1><a href="#">第四章</a></h1>
<h1><a href="#">第五章</a></h1>
<h1><a href="#">第六章</a></h1>
<h1><a href="#">第七章</a></h1>
<h1><a href="#">第八章</a></h1>
<h1><a href="#">第九章</a></h1>
<h1><a href=#"">第十章</a></h1>
<h1><a href="#">第十一章</a></h1>
<h1><a href="#">第十二章</a></h1>
<h1><a href="#">第十三章</a></h1>
<h1><a href="#">第十四章</a></h1>
<h1><a href="#">第十五章</a></h1>
<h1><a href="#">第十六章</a></h1>
<h1><a href="#">第十七章</a></h1>
<h1><a href="#">第十八章</a></h1>
<h1><a href="#">第十九章</a></h1>
<h1><a href="#">第二十章</a></h1>
<h1><a href="#">第二十一章</a></h1>
<h1><a href=#"">第二十二章</a></h1>
<h1><a href="#">第二十三章</a></h1>
<h1><a href="#">第二十四章</a></h1>
</div>
<div id="content">
<div id="first">
<h1>第一章</h1>
<div id="chapter1">
<p>生命不息，编码不止</p>
</div>
</div>
</div>
</body>
</html>
通常在访问网页链接时都是在浏览器的新增窗口中打开的，那么这样必须在每个超链接标签中设置target="_blank"，这样会造成代码冗余。
可以通过使用base标签解决该问题。
如下应用案例(base.html)所示，通过在head标签中设置target="_blank",可以控制BAT标题下三个超链接都是在浏览器新增窗口下打开，而四大门户网站需要在当前窗口打开，则在标签中设置target=_self
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>base标签的使用</title>
<!-- 通过base标签设置页面中所有的超链接都在新窗口中打开-->
<base target="_blank"/>
</head>
<body>
<h3>BAT</h3>
<a href="https://www.baidu.com">百度一下，你就知道</a><br/>
<a href="https://www.qq.com">腾讯首页</a><br/>
<a href="https://www.toaobao.com">淘宝网，淘，我喜欢</a><br/>
<!-- 如果有部分网页还是需要在当前窗口打开，依然可以设置属性target="_self" 高于base的target属性优先级-->
<h3>四大门户</h3>
<a href="http://www.qq.com/" target="_self">腾讯</a>
<a href="http://www.163.com/" target="_self">网易</a>
<a href="http://www.sina.com.cn/" target="_self">新浪</a>
<a href="http://www.sohu.com/" target="_self">搜狐</a>
</body>
</html>
href属性值为#href属性值为javascirpt:javascript代码片段<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接的其他应用场景</title>
</head>
<body>
<!--点击后会调用本地邮件客户端，并填充好联系人邮件-->
<a href="mailto:18601767221@163.com" >联系我们</a> <br/>
<!--返回页面顶部的空链接-->
<a href="#">返回顶部</a> <br/>
<!--跳转到a.html-->
<a href="javascript:window.location.href=‘a.html‘">执行javascript代码片段</a> <br/>
</body>
</html>
如果想让网页中的文字显得井然有序，那么就需要使用到列表了，实际上在淘宝、京东、天猫、腾讯的首页都使用到了列表。
在html中有三种列表，分别是无序列表(<ul><li></li></ul>)，有序列表(<ol><li></li></ol>)和自定义列表(<dl><dt><dd></dd></dt></dl>),其中最常用的是<ul><li></li></ul>无序列表。
当需要使用列表展示没有顺序的数据时使用无序列表，在html标签中使用<ul><li></li></ul>标签表示，需要注意的<ul></ul>标签中只能包含一个或者多个<li></li>标签，<li></li>标签是一个容器，可以存放任何标签，应用案例(unordered.html)如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无序列表标签的使用</title>
</head>
<body>
<h3>我喜欢的歌星</h3>
<ul>
<li>张学友</li>
<li>王力宏</li>
<li>周杰伦</li>
</ul>
</body>
</html>
结合无序列表、标题标签和图片标签实现图文并茂介绍中国四大名著。
<li></li>标签中插入图片和文本内容具体实现应用案例(unordered_app.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无序列表的应用案例</title>
</head>
<body>
<h2>中国四大名著</h2>
<ul>
<li>
<img src="../../../images/shuihuzhuan.png" />
<h4> 《水浒传》</h4>
<p>
《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。
</p>
</li>
<li>
<img src="../../../images/sanguoyanyi.png" />
<h4>《三国演义》</h4>
<p>
《三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本
</p>
</li>
<li>
<img src="../../../images/xiyouji.png" />
<h4>《西游记》</h4>
<p>西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。</p>
</li>
<li>
<img src="../../../images/hongloumeng.png" />
<h4>《红楼梦》</h4>
<p>
《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。
</p>
</li>
</ul>
</body>
</html>
有序列表用于展示需要排序的数据，通常用于排序网站的运营数据，例如各种商品的销量数据排序等等，html中使用<ol><li></li></ol>来表示需要排序的数据，应用案例(ordered.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>有序列表的应用场景</title>
</head>
<body>
<h3>湖北省荆州市高考成绩(姓名:分数)排行榜 Top5</h3>
<ol>
<li>张三:730</li>
<li>李四:680</li>
<li>王五:589</li>
<li>赵六:588</li>
<li>孙七:578</li>
</ol>
</body>
</html>
自定义列表用于术语或者名词进行解释和描述，如下图所示,在小米官网的底部就使用了自定义列表。
html中的自定义列表使用<dl><dt><dd></dd></dt></dl>来表示，其中<dt></dt>用于定义标题,<dd></dd>用于定义描述、解释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义列表的使用</title>
</head>
<body>
<dl>
<dt>前端技术栈</dt>
<dd>html</dd>
<dd>css</dd>
<dd>javascript</dd>
<dd>jquery</dd>
<dd>bootstarp</dd>
<dd>angularJS</dd>
<dd>node.js</dd>
<dd>vue.js</dd>
</dl>
</body>
</html>
早期表格常用来作网页布局，后来网页的布局改为div+css，而现在表格通常是用来后台系统展示数据，如下图所示，使用表格展示的数据。
在HTML中，使用<table></table>来表示一个表格，表格中可以包含若干行<tr></tr>内容，而每行可以由若干个单元格<td></td>组成,单元格中可以存放任意元素,应用案例(table_sample.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格基本结构</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>tony</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>rao</td>
<td>27</td>
<td>女</td>
</tr>
</table>
</body>
</html>
在使用<table></table>展示数据时，默认的外观样式通常不是我们想要的，如下图所示
应用案例(table_without_attr.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用表格展示数据</title>
</head>
<body>
<table >
<!--表格的标题-->
<caption>语文成绩表</caption>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>99</td>
</tr>
</table>
</body>
</html>
这里我们可以通过修改表格的边框(border)，单元格和单元格之间的距离(cellspacing)以及单元格边框与单元格内容的距离(cellpadding)等属性，来达到我们想要的外观效果,如下应用案例(table.html)所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用表格展示数据</title>
</head>
<body>
<table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">
<!--表格的标题-->
<caption>语文成绩表</caption>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>99</td>
</tr>
</table>
</body>
</html>
表格常用的属性及其功能描述如下所示
| 属性名称 | 属性描述 |
|---|---|
| border | 设置表格的边框，默认为无边框，即boder=0 |
| align/valign | 控制表格在网页中的水平/垂直(top,middle,bottom)的对齐方式 |
| width | 表格的宽度 |
| height | 表格的高度 |
| cellspacing | 控制单元格与单元格之间的间距 |
| cellpadding | 控制单元格内容和单元格边框之间的距离 |
| rowspan | 跨行 |
| colspan | 跨列 |
在日常开发中，通常将boder,cellpadding,cellspacing三个属性设置为0,应用案例(table_dev_app.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table日常开发案例(前端页面数据展示)</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="300" height="150">
<caption><h3>自选股</h3></caption>
<tr>
<td>股票名称</td>
<td>最新价</td>
<td>最新价</td>
</tr>
<tr>
<td>国电电力</td>
<td>2.62</td>
<td>-1.13%</td>
</tr>
<tr>
<td>紫金矿业</td>
<td>3.47</td>
<td>-2.53%</td>
</tr>
<tr>
<td>中国联通</td>
<td>4.76</td>
<td>-1.04%</td>
</tr>
</table>
</body>
</html>
如果想要给表格增加标题，只需要在<table></table>开始标签下增加<caption></caption>即可，而且文字会自动居中显示。
而表头标签<th></th>通常用于表格的第一行文字，文字会居中加粗显示，应用案例(table_caption_th.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格的标题和表头</title>
</head>
<body>
<table border="1" align="center" width="300px" cellspacing="0" cellpadding="0">
<!-- 表格标题，自动居中显示 -->
<caption><h3>自选股</h3></caption>
<tr>
<!-- 表头标签:文字会自动居中加粗显示 -->
<th>股票名称</th>
<th>最新价</th>
<th>最新价</th>
</tr>
<tr>
<td>国电电力</td>
<td>2.62</td>
<td>-1.13%</td>
</tr>
<tr>
<td>紫金矿业</td>
<td>3.47</td>
<td>-2.53%</td>
</tr>
<tr>
<td>中国联通</td>
<td>4.76</td>
<td>-1.04%</td>
</tr>
</table>
</body>
</html>
使用表格实现今日搜索汽车排行榜，如下应用案例(table_car_ranking_list.html)所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日热搜汽车排行版</title>
</head>
<style>
tr{
/* 表格的内容居中对齐 */
text-align: center;
}
</style>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
<caption>今日热搜汽车排行榜</caption>
<tr>
<th>排名</th>
<th>关键词</th>
<th>相关链接</th>
<th>搜索指数</th>
</tr>
<tr>
<td>1</td>
<td>迈腾</td>
<td><a href="">简介</a> <a href="">新闻</a> <a href="">图片</a> </td>
<td>71461</td>
</tr>
<tr>
<td>2</td>
<td>凯美瑞</td>
<td><a href="">简介</a> <a href="">新闻</a> <a href="">图片</a> </td>
<td>70505</td>
</tr>
</table>
</body>
</html>
在日常开发中，通常把表格分为表头<thead></thead>，表主体<tbody></tbody>两部分部分组成，以便于实现统一的管理(样式控制)，如下图所示，其中表格数据的第一行通常被称为<thead></thead>,其余的数据内容被称为<tbody></tbody>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格结构</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
<caption>今日热搜汽车排行榜</caption>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>相关链接</th>
<th>搜索指数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>迈腾</td>
<td><a href="">简介</a> <a href="">新闻</a> <a href="">图片</a> </td>
<td>71461</td>
</tr>
<tr>
<td>2</td>
<td>凯美瑞</td>
<td><a href="">简介</a> <a href="">新闻</a> <a href="">图片</a> </td>
<td>70505</td>
</tr>
</tbody>
</table>
</body>
</html>
在展示某些数据时可能会用到跨行或者时跨列显示，如下图所示。
跨行:从指定的单元格位置处开始，纵向向下，合并掉几个单元格(包含自己)，被合并的单元格要删除,然后在指定的单元格设置rowspan属性值即可,例如<td rowspan="2">。
跨列:从指定的单元格位置处开始，横向向右，合并掉几个单元格(包含自己)，被合并的单元格要删除，然后在指定的单元格位置处设置colspan属性值即可，例如<td colspan="2">。
关于表格的行和列合并的应用案例(rowcol.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格单元格的合并</title>
</head>
<body>
<table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">
<!--表格的标题-->
<caption>语文成绩表</caption>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>97</td>
</tr>
<tr>
<td>qq</td>
<!--跨两列显示内容-->
<td colspan="2">语文 88</td>
</tr>
<tr>
<td>weixin</td>
<td>语文</td>
<!--跨行合并单元格 这里的td占据两行-->
<td rowspan="2">99</td>
</tr>
<tr>
<td>dingding</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
使用表格完成一个复杂的跨行跨列数据展示，实现效果如图所示。
分析:首先以D为标准(即1行一列)，那么整个表格就可以算成3行3列。
第一步，先绘制一个基础的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现一个复杂的表格跨行跨列的应用</title>
</head>
<body>
<table border="1" width="500" height="500" cellpadding="25" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
第二步:分析各个元素占据的行列
A:一行两列
B:一列两行
C:一列两行
D:一行一列
F:一行两列
第三步:通过设置colspan和rowspan属性改变元素占据的行列，完整实现如下应用案例(table_app.html)所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现一个复杂的表格跨行跨列的应用</title>
</head>
<body>
<table border="1" width="500" height="500" cellpadding="25" cellspacing="0">
<tr>
<td colspan="2">A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td rowspan="2">C</td>
<td>D</td>
</tr>
<tr>
<td colspan="2">F</td>
</tr>
</table>
</body>
</html>
表单在网站中是非常常见的元素，以淘宝网为例子，当打开淘宝首页在搜索框中搜索商品时，如下图所示
当输入用户名，密码登录时，如下图所示。
都大量使用到了表单，表单实际上就是一个包含输入域的Web页面，允许用户输入信息，当用户提交表单后浏览器将表单的数据打包发送给Web服务器(例如Tomcat)，Web服务器接收到表单数据后再把表单数据交给后台服务程序处理(例如Java SpringMVC中的Controller的某个方法)。后台服务程序处理完成后返回给浏览器，浏览器再渲染服务器返回的数据。
表单是由表单元素,提示文本，表单域三部分组成的，如下图所示
表单元素中，最长使用的就是input元素，input故名思意就是让用户输入或者选择信息，如下图所示
不同的input元素是通过type属性来指定的，常用的type属性值有text,password,radio,checkbox,file,hidden,和四种按钮button,image,reset,submit。
其中text表示单行文本框。
password表示密码框，不会明文显示输入的内容。
radio表示单选按钮，如果有多个选项的时候需要设置name属性，否则单选功能失效。
checkbox表示复选框，即可以选择多个，同时多个选项也必须设置name属性。
file表示上传文件，例如网站的上传头像，上传书籍等等功能就是使用该元素实现。
button表示普通按钮
image可以使用图片作为按钮，设置src属性即可。
reset表示重置按钮，点击重置时会清空表单的内容
submit是提交按钮，会将表单域的数据提交到服务器处理。
它们的应用案例(form_input_element.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单input元素的使用</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="500" height="400" >
<caption><h3>XXX网用户注册</h3></caption>
<tr>
<td>用户名</td>
<td><input type="text" value="" maxlength="18" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" value="" maxlength="16" /></td>
</tr>
<!-- 一组元素 需要有相同的name属性值 -->
<tr>
<td>性别</td>
<!-- checked="checked" 加载页面时默认被选中 -->
<td><input type="radio" value="1" name="gender" checked="checked" />男 <input type="radio" value="0" name="gender" />女 </td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" value="1" name="hobby"/>编程
<input type="checkbox" value="2" name="hobby"/>旅游
<input type="checkbox" value="3" name="hobby"/>摄影
</td>
</tr>
<tr>
<td>头像</td>
<td><input type="file"></td>
</tr>
<!-- 四种按钮 -->
<tr>
<td></td>
<td>
<input type="button" value="普通按钮">
<input type="image" src="../../../images/image_btn.png" width="100px" value="图片按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
text和password还可以通过maxlength指定输入的最大字符长度。
radio和checkbox还可以通过 checked=checked来设置默认选中的元素
label用于包裹表单元素，当点击label标签的内容时，被绑定的表单元素就会获得输入焦点，当label绑定多个表单元素时，还可以通过for=id来指定绑定的元素，应用案例(form_label.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单的label标签使用</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <label >用户名:<input type="text" value="" name="username"/></label>
</td>
</tr>
<tr>
<td><label >密码:<input type="password" value="" name="password"/></td>
</tr>
<tr>
<!-- 当label中嵌套了多个元素时，可以通过使用id属性来绑定对应的元素 -->
<td><label for="tel">手机号:<input type="tel" value="" name="tel" id="tel"/>
身份证号:<input type="text" value="" name="id" id="cardNumber"/>
</td>
</tr>
</table>
</body>
</html>
通常在论坛网站回帖时，可能会想输入多行文本内容，如下图所示
这时就可以使用多行文本域来实现，如果想要控制内容的行数，可以通过设置rows属性来实现，代码片段如下所示。因为多行文本域不支持图片、表格等元素，后期会使用富文本编辑器替代textarea。
<textarea rows="20">
今天遇到一个很严峻的问题
解决问题的方式就是不停的尝试，只要坚持，一定会成功。
</textarea> <br/>
在设置收货地址时，需要选择省市区，这时就需要使用到了select option，通过下拉选择一个值，代码片段如下所示，
如果想要设置默认选中，只需要在option中设置selected=selected即可,代码片段如下所示。
收货地址: <select>
<option>请选择省市自治区</option>
<!--
默认选中上海
-->
<option selected="selected" value="1">上海</option>
<option value="2">北京</option>
<option value="3">天津</option>
<option value="4">重庆</option>
</select>
<select>
<option>请选择区</option>
<option value="1">黄埔区</option>
<option value="2">浦东新区</option>
<option value="3">长宁区</option>
<option value="4">静安区</option>
</select>
</br>
完整的表单元素案例(form_app.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用表单元素的使用</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="700" height="400" >
<caption><h3>XXX网用户注册</h3></caption>
<form action="#" method="POST">
<tr>
<td>用户名</td>
<td><input type="text" value="" maxlength="18" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" value="" maxlength="16" /></td>
</tr>
<!-- 一组元素 需要有相同的name属性值 -->
<tr>
<td>性别</td>
<!-- checked="checked" 加载页面时默认被选中 -->
<td><input type="radio" value="1" name="gender" checked="checked" />男 <input type="radio" value="0" name="gender" />女 </td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" value="1" name="hobby"/>编程
<input type="checkbox" value="2" name="hobby"/>旅游
<input type="checkbox" value="3" name="hobby"/>摄影
</td>
</tr>
<tr>
<td>头像</td>
<td><input type="file"></td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="80" rows="10">
我是一个程序猿，专写Bug
</textarea>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="native" id="native">
<option value="0">请选择</option>
<option value="1" selected="selected">湖北</option>
<option value="2">湖南</option>
<option value="1">广东</option>
<option value="1">广西</option>
</select>
</td>
</tr>
<!-- 四种按钮 -->
<tr>
<td></td>
<td>
<input type="button" value="普通按钮">
<input type="image" src="../../../images/image_btn.png" width="100px" value="图片按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</td>
</tr>
</form>
</table>
</body>
</html>
表单域使用<form></form>标签表示，该标签可以包含之前提到的表单元素，也只有包含在<form></form>标签内的表单控件的值才能传递给服务器。
该标签有几个重要的属性:
action：提交给服务器后端(通常是使用java/python编写的服务端程序)处理的地址
method:提交的方式，主要有post和get两种方式提交，其中get请求是以明文的方式将数据传递给服务器，安全性低，同时提交的数据最大限制为2KB,通常在查询操作时使用,post是以隐式的方式将数据传递给服务器，其安全性高，不限制传递数据的大小，通常在增、删、改数据时使用。
enctype:用于指定表单进行数据编码的方式,主要取值有application/x-www-form-urlencoded允许将任意类型的文本提交给服务器,multipart/form-data:允许将文件提交给服务器,text/plain:不对任何数据进行编码和传输。
完整的表单域应用程序(form.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form表单域</title>
</head>
<body>
<form action="/user/login" method="GET" name="login" enctype="application/x-www-form-urlencoded" >
<label>用户名:</label> <input type="text" name="username"/></br>
<label>密码:</label><input type="password" name="password"/> </br>
<label>提交: <input type="submit"/></label></br>
<label>重置: <input type="reset"/></label></br>
</form>
</body>
</html>
标签：html tran 转义字符 空格 view for 修改表 论坛 绑定
原文地址：https://www.cnblogs.com/ittimeline/p/9272165.html
