HTML语言
一、HTML5文件的基本结构和W3C标准
1、HTML的发展史
HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）。
HTML作为最新版本，提供了一些新的元素、特征和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像、动画，以及不需要安装任何插件直接使用网页播放视频等。
2、HTML5的优势
（1）世界知名浏览器厂商对HTML5的支持
通过对Internet Explorer、Google、Firefox、Safari、Opena等主要的Web浏览器发展策略调查，发现它们都在支持HTML5上采取措施。
（2）市场需求
HTML5之前的情况是，由于各浏览器之间的不统一，仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，音频、视频、图像、动画及同计算机的交互都被标准化。
（3）HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用。PC网站、各种移动设备、插件等核心代码就可以不需要重复编写，极大地减少了开发人员的工作量。
3、W3C标准
1、使用W3C标准的原因
由于各浏览器之间互不兼容，导致HTML编程规则混乱，违背了HTML发明的初衷，因此需要一个组织来制定和维护统一的国际化Web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。在这样的背景下，万维网联盟（World Wide Web Consortium W3C）诞生了，因此由W3C组织制定和维护的Web开发标准，也称为W3C标准。它是Web技术领域最权威和具有影响力的国际中立性技术标准机构。
2、W3C标准的介绍
W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构、表现和行为。
W3C标准包括结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOCECMAScript）。
4、HTML5文件的基本结构
最基本的语法就是：<标记>内容</标记>。
标记在有的地方也称为标签或元素，其实它们都指的是同一种东西。标签都是成对出现的，有一个开头标记就对应地有一个结束标记，以"<>“开头，以”</>"结束，要求成对出现，标签之间有缩进，体现层次感，方便阅读和修改。
HTML5的基本结构分为两部分，整个HTML包括头部（head）和主体（body）两部分，头部包括网页标题（title）等基本信息，主体包括网页的内容信息，如图片、文字等。
5、网页的基本信息
1.DOCTYPE声明
DOCTYPE声明必须位于HTML文档的第一行。
<!DOCTYPE html>2.<title>标签
使用<title>标签描述网页的标题，类似一篇文章的标题，一般为一个简洁的主题，并能使读者有兴趣读下去。例如，搜狐网站的主页，对应的网页标题如下。
<title>搜狐-中国最大的门户网站</title>3.<meta>标签
使用该标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用"名称/值"对的方式描述摘要信息。
（1）文档类型、字符编码信息书写如下。
<meat charset="UTF-8"/>属性：charset表示字符集编码，常用的编码有以下几种。
1.gb2313：简体中文，一般用于包含中文和英文的页面。
2.ISO-885901：纯英文，一般用于只包含英文的页面。
3.big5：繁体，一般用于带有繁体字的页面。
4.UTF-8：国际性通用的字符编码，同样适用于中文和英文的页面。和gb2312编码相比，国际通用性更好。
在保存文件时编码方式一定要与HTML5页面中<meta>标签中的编码方式保持一致，否则，将会出现乱码。
6、网页的基本标签
网页的基本标签，包括标题标签、段落标签、换行标签、水平线标签等。
1、标题标签
标题标签表示一段文字的标签或主题，并且支持多层次的内容结构，例如一级标题采用<h1>,二级标题采用<h2>,其他级别标题以此类推。HTML共提供了六级标题<h1>~<h6>,<h1>字号最大，<h6>字号最小。如下描述了各级标签对应的HTML标签。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>不同等级的标题标签对比</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>2、段落标签和换行标签
段落标签<p>···</p>表示一段文字等内容。例如，希望描述“北京欢迎你”这首歌包括歌名（标题）和歌词（段落），则对应的HTML代码如下所示。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>段落标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹</p>
</body>
</html>
3、水平线标签2
水平线标签<hr/>表示一条水平线，注意该标签与<br/>标签一样，比较特殊，没有结束标签。为了让版面更加清晰直观，可以在歌名和歌词间加一条水平分隔线，对应的HTML代码如下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>水平线标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<hr/>
<p>
北京欢迎你，有梦想谁都了不起！<br/>
有勇气就会有奇迹。<br/>
北京欢迎你，为你开天辟地<br/>
流动中的魅力充满朝气。<br/>
北京欢迎你，在太阳下分享呼吸<br/>
在黄土地刷新成绩。<br/>
北京欢迎你，像音乐感动你<br/>
让我们都加油去超越自己。<br/>
</p>
</body>
</html>
4、字体样式标签
在网页中，经常会遇到字体加粗或斜体字，可以使用<strong>标签来让字体变粗，<em>标签让文字倾斜。例如，在网页中介绍徐志摩，其中“徐志摩人物简介”字样加粗显示，介绍中出现的日期使用斜体，对应的HTML代码如下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体样式标签</title>
</head>
<body>
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂<br/>
<em>1918</em>年赴美国克拉大学学习银行学<br/>
<em>1921</em>年开始创作新诗<br/>
<em>1922</em>年返国后在报刊上发表大量诗文<br/>
<em>1927</em>年参加创办新月书店<br/>
<em>1931</em>年由南京乘飞机到北平，飞机失事，因而遇难<br/>
</p>
</body>
</html>
5、注释和特殊符号
HTML中的注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容。HTML的注释格式如下．
＜！－－注释内容－－＞当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护。同时，有时为了调试，需要暂时注释掉一些不必要HTML代码。
HTML中常用的特殊符号及其对应的字符实体
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 | 百度 | Goodle | |
| 大于号(>) | > | 如果时间>晚上6点，就坐车回家 |
| 小于号(<) | < | 如果时间<早上7点，就走路去上学 |
| 引号(“) | " | W3C规范中，HTML的属性值必须用成对的"引起来 |
| 版权符号 | © | ©20013-2018北大青鸟 |
6、图像标签的基本语法
图像标签的基本语法如下
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度"/>width和height两个属性分别表示图片的宽度和高度，如果不设置那么图片默认显示原始大小。对应的HTML代码如下所示，图片和文本使用<p>标签进行排版，换行使用了<br/>标签。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图像标签的应用</title>
</head>
<body>
<p>
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃" />
</p>
<p>
楼兰蜜语 新疆野生<br/>
无漂白薄皮核桃500g*2包<br/>
￥48.8
</p>
</body>
</html>
7、超链接标签
1、超链接的基本用法
超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应位<a>标签的href属性；二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>href：表示链接地址的路径
target：指定链接在哪个窗口打开，常用的取值有self（自身窗口）、blank（新建窗口）。
超链接既可以是文本超链接，也可以是图像超链接。
链接地址可以分为绝对路径和相对路径
绝对路径：指向目标地址的完整描述，一般指向站点外的文件。
相对路径：相当于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的URL地址的形式。
2、超链接的应用场合
根据超链接的应用场合，可以把链接分为三类
1.页面间链接
页面间链接就是从一个页面链接到另外一个页面。
2锚链接
锚链接常用于目标也内容很多，需定位到目标页内容中的某个具体位置时。
（1）在页面的乙位置设置标记，语法如下。
<a name="maker">目标位置乙</a>name位<a>标签的属性，marker为标记名，其功能类似古时用于固定船的锚（或钩），所以也称为锚名。
（2）设置甲位置链接路径href属性值为"#标记名"，语法如下
<a href="#marker">当前位置甲</a>3、功能性链接
功能性链接比较特殊，单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序
8、行内元素和块元素
块元素的特性：无论内容多少，该元素独占一行。
行内元素特性：内容撑开宽度，左右都是行内元素的可以排在一行。
二、列表、表格、与媒体元素
1、列表
1、列表简介
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
2、列表及其应用
（1）无序列表及其应用
无序列表由<ul>标签和<li>标签组成，使用<li>标签作为无序列表的声明，使用<li>标签作为每个列表项的起始，语法如下。
<ul>
<li> 第一项</li>
<li> 第二项</li>
<li> 第三项</li>
</ul>（2）有序列表由<ol>标签和<li>标签组成，使用<li>标签作为有序列表的声明，使用<li>标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能<ol>标签里嵌套<li>标签。语法如下。
<ol>
<li> 第1项</li>
<li> 第2项</li>
<li> 第3项</li>
</ol>
（3）定义列表及应用
定义列表是一种很特殊的列表形式，它是标题及列表项的结合。定义列表的语法相对于无序列表和有序列表不太一样，它使用<dl>标签作为列表的开始，使用<dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。语法如下
<dl>
<dt> 标题一</dt>
<dd> 第1项</dd>
<dd> 第2项</dd>
<dt> 标题二</dt>
<dd> 第1项</dd>
</dl>2、表格
1、表格的基本结构
表格是由指定数目的行和列组成的
（1）单元格
单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。
（2）行
一个或多个单元格横向堆叠形成了列。
（3）列
由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列。
2、表格的基本语法
创建表格的基本语法如下
<table>
<tr>
<th>第1个单元格的内容</th>
<th>第2个单元格的内容</th>
······
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
······
</tr>
</table>3、表格的跨列与跨行
1.表格的跨列
跨列是指单元格的横向合并，语法如下。
<table>
<tr>
<td colspan="所跨的列数">单元格内容</td>
</tr>
</table>col为column（列）的缩写，span为跨度，所以colspan的意思为跨列。
2.表格的跨行
跨行是指单元格在垂直方向上的合并，语法如下。
<table>
<tr>
<td rowspan="所跨的行数">单元格内容</td>
</tr>
</table>一般来说，跨行或跨列操作时，需要以下两个步骤
（1）在需合并的第一个单元格，设置跨列或跨行属性，如colspan=“3”。
（2）删除被合并的其他单元格，即把某个单元格看成多个单元格合并后的单元格。
3、HTML5的媒体元素
1、视频元素
1.video元素的基本语法
HTML5中的video元素是用来播放视频文件，支持Ogg（Ogg Vorbis的简写）、MPEG4、WebM等视频格式，用法如下
<video src="视频路径" controls="controls"></video>其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。
主流浏览器支持的视频格式，如表格所示
| 浏览器视频格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.0+ | 6.0+ | 不支持 |
在video元素中指定control属性可以在页面上以默认的方式进行播放控制。如果不加这个属性，那么视频就不能直接播放。
2、音频元素
1.audio元素的基本语法
HTML5中的audio元素是用播放音频文件，支持Ogg、MP3、WAV等音频格式，其语法如下所示
<audio src="音频路径" controls="controls"></video>其中src属性用于指定要播放的音频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。
主流浏览器支持的音频格式，如表格所示
| 浏览器音频格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 3.0+ | 不支持 |
| MP3 | 9.0+ | 不支持 | 不支持 | 3.0+ | 3.0+ |
| WAV | 不支持 | 4.0+ | 10.6+ | 不支持 | 3.0+ |
4、HTML5的元素结构
HTML5提供了几个结构元素来划分网页结构，下表列出了HTML5中具有的语义化的结构元素
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
5、<iframe>的语法
1.<iframe>的语法如下
<iframe src="引用页面地址" name="框架标识名"···></iframe>具体的使用方法如下所示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title><iframe简单使用</title>
</head>
<body>
<iframe src="yx2.html" width="500px" height="236px" name="firstPage"/>
</body>
</html>
2.<iframe>属性的使用
<iframe>内联框架的常用属性包括name、width、height。其中name属性可以和前面学过的 锚链接结合起来实现页面间的相互跳转。具体步骤如下。
(1)在被打开的框架上加name属性，关键代码如下
<iframe name="mainFrame" src="subframe/the_second.html"/>(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名，关键代码如下
<a href="subframe/the_second.html"target="mainFrame"/>下边显示第二页</a>具体实现如下所示。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<h1>上方导航条</h1>
<p>
<a href="subframe/the_first.html" target="mainFrame">下边显示第一页
</a><br/>
<a href="subframe/the_second.html" target="mainFrame">下边显示第二页
</a><br/>
<a href="subframe/the_third.html" target="mainFrame">下边显示第三页
</a><br/>
</p>
<iframe name="mainFrame" width="800px" height="150px"src="subframe/the_second.html"/>
</body>
</html>
三、表单
1、表单标签及表单属性
<form>标签的属性
| 属性 | 说明 |
|---|---|
| action | 此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的提交按钮后,信息发送到web服务器上,由action属性所指定的程序处理 |
| method | 此属性告诉浏览器如何将时间发送给服务器 |
其中method有两种方法:
以post方法提交
(1)以post方法提交表单,在名字和密码框中,分别输入用户名和lucker和密码123456.单击提交按钮,地址栏中的url信息没有发生变化
(2)以get方式提交,在单击提交按钮,地址栏中的url信息会被提交上去
基于以上两点的区别,post方法提交的数据安全性更高,在日常开发中,尽可能的还是采用post方法.
2、表单元素及其格式
1、input 标签中的常用属性
| 属性 | 说明 |
|---|---|
| type | 此属性指定表单元素的类型,可用的类型有text,password,chekbox,radio,submit,rest,file,email,默认为text |
| name | 此属性指定表单元素的名称 |
| value | 此属性是可选属性,它指定表单元素的初始值.如果type为radio类型,则必须指定一个值 |
| size | 此属性指定单元格的初始宽度 |
| maxlength | 此属性用于指定text或password元素中输入的最大字符,默认为无限大 |
| checked | 此属性用于指定按钮是否被选中 |
2、文本框
在表单中最常用,将表单元素type属性设为text类型即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<form method="post" action="">
<p>
名字：
<input name="fname" type="text" value=""/>
</p>
<p>
姓氏：
<input type="text" name="lname" value="张"/>
</p>
<p>
登录名：
<input type="password" name="sname" size="30" />
</p>
</form>
</body>
</html>
3、密码框
将表单元素type属性设为password类型即可,设置了pyte属性,在密码框输入的字符全都以黑色实心的圆点来显示，从而实现了对数据的处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码框</title>
</head>
<body>
<form method="post" action="">
<p>
名字：
<input name="post" type="text" size="21"/>
</p>
<p>密码：
<input name="pass" type="password" size="22"/>
</p>
</form>
</body>
</html>
4、单选按钮
单选按钮控件用于一组排斥按钮,用户只能选中一个单选按钮,只有从组中选中的单选按钮才会在提交的数据中提交对应的数值,在使用单选按钮时,需要一个显示value属性。如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选按钮</title>
</head>
<body>
<form method="post" action="">
性别：
<input name="gen" type="radio" value="男"/>男
<input name="gen" type="radio" value="女"/>女
</form>
</body>
</html>
其中有一个默认选项,可以使用checked
5、复选框
复选框的类型时checkbox,与单选框类似,只不过可以选择多个选项用户可以选中某个复选框,也可以取消选中.一但用户选中了某个复选框,在提交表单时,会将该复选框的name值和对应的value值一起提交。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox</title>
</head>
<body>
<form method="post" action="">
爱好：
<input name="interest" type="checkbox" value="spoorts"/>运动
<input name="interest" type="checkbox" value="talk"/>聊天
<input name="interest" type="checkbox" value="play"/>玩游戏
</form>
</body>
</html>
6、列表框
列表框通过<select>标签和<option>标签来实现的,<select>标签用于显示可供用户选择的列表框,每个选项由一个<option>标签来实现,<select>标签至少包含一个<option>标签。语法如下：
<select name="指定列表名称" size="行数">
<option value="可选项的指"selected="selected">·····</option>
<option value="可选项的指">·····</option>
</select>7、按钮
语法
<input type="reset" name="Reset" value="重置">(1)rest按钮:用户单击该按钮后,无论表单中是否已经填写或输入数据,表单中的各个表单元素都会被重置成最初状态,而填写或输入的数据都会被清空
(2)submit按钮:用户单击该按钮后,表单将会提交到action属性所指定的url,并传递表单数据
(3)button按钮:属于普通按钮,需要与事件关联使用
8、多行文本域
当需要在网页输入两行或多行以上的文本时,我们将使用<textarea>标签
语法
<textarea naem="textarea" cols="显示的列数" rows="显示的行数">
文本内容
</textarea>其中，cols属性用来指定多行文本框的列宽度；rows属性yong
9、文件域
文件域的作用是用于实现文件的选择,在应用时只需要把type属性设为file即可.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件域</title>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<p>
<input type="file" name="butReset" value="files" /><br />
<input type="submit" name="upload" value="上传" /><br />
</p>
</form>
</body>
</html>
文件域在不同的浏览器显示的效果是不一样的,但是功能是一样的,如果想要它在不同的浏览器中显示的一样,可以使用css样式进行修改
10、邮箱
Email类型的input元素是一种专门应用于输入Email地址的文本框,与上面表单元素不同的是Email在提交表单的时候会自动验证Email文本框的值,如果不是有效的邮箱地址,则输入不允许提交表单.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邮箱</title>
</head>
<body>
<form method="post" action="" >
<p>
邮箱：
<input type="email" name="email" />
</p>
<input type="submit" />
</form>
</body>
</html>
11、网址
url类型的input元素提供用于输入url地址这一类特殊的文本的文本框,提交表单时,如果输入不是url地址格式的表单将不允许提交表单
<form action="" method="post">
<p>
<input type="url" name="userUrl"/>
</p>
<input type="submit"/>
</form>
12、数字
number类型的input元素提供了用于输入数字的文本框,我们还可以对接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认值等,如果输入的数字不在规定的范围之类,则会出现错误提示.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range滑块</title>
</head>
<body>
<form method="post" action="#" >
<p>
请输入数字：
<input type="number" name="num" min="0" max="100" step="10"/>
</p>
<input type="submit" />
</form>
</body>
</html>
number类型的属性
| 属性 | 值 | 描述 |
|---|---|---|
| value | number | 规定的默认值 |
| min | number | 规定允许的最小值 |
| max | number | 规定允许的最大值 |
| step | number | 规定合法的数据间隔 |
13、滑块
以"range"类型使用,与number类型的属性时用于的类型属性时一样的这两种类型的不同之处在于外观表现上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range滑块</title>
</head>
<body>
<form method="post" action="#" >
<p>
请输入数字：
<input type="range" name="range1" min="0" max="100" step="2"/>
</p>
<input type="submit" />
</form>
</body>
</html>
支持range类型的浏览器都会显示滑块
| 属性 | 值 | 描述 |
|---|---|---|
| value | number | 规定的默认值 |
| min | number | 规定的最小值 |
| max | number | 规定的最大值 |
| step | number | 规定合法的数据间隔 |
14、搜索框
search类型的input元素提供用于输入搜索关键字的文本框,虽然外观看起来search类型和input的普通text类型差不多,但是实现起来却并不容易。search类型提供的搜索框不只是Goodle或百度的搜索框，而是任意页面的一个搜索框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框</title>
</head>
<body>
<form method="post" action="#" >
<p>
请输入数字：
<input type="search" name="sousuo" />
<input type="submit" value="Go"/>
</p>
</form>
</body>
</html>
3、表单的高级应用
1.设置表单的隐藏域
将type属性设置为hidden隐藏类型即可创建一个隐藏域。例如，在登录页中使用隐藏域保存用户的userid信息，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隐藏域</title>
</head>
<body>
<form method="post" action="result.html">
<p>用户名：<input name="post" type="text" /></p>
<p>密码：<input name="pass" type="password" /></p>
<p><input type="submit" value="提交" /></p>
<p><input type="hidden" name="userid" value="666"/></p>
</form>
</body>
</html>
2.表单的只读与禁用设置
（1）只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。
（2）禁用场景：只有满足某个条件后，才能选用某项功能。
只读和禁用效果分别通过设置readonly属性和disabled属性来实现。例如，要实现对文本框只读，对按钮的禁用效果，对应代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>只读与禁用</title>
</head>
<body>
<form method="get" action="result.html">
<p>用户名：<input name="name" type="text" value="张三" readonly/></p>
<p>密码：<input name="pass" type="password" /></p>
<p><input type="submit" value="修改" disabled/></p>
</form>
</body>
</html>
3.表单元素的标准
表单元素的标准语法
<label for="表单元素的id">标注的文本</lable>在<label>标签中，使用了for属性来指定当鼠标单击标注文本时，焦点对应的表单元素，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>label标签</title>
</head>
<body>
<form method="post" action="">
请选择性别：
<label for="male">男</label>
<input name="gender" type="radio" value="male"/>
<label for="female">女</label>
<input name="gender" type="radio" value="female"/>
</form>
</body>
</html>对于表单元素而言,其name属性于id属性都是必须的,name属性由表单负责处理,而id属性是给label标签和表单元素进行关联使用
4、表单的初级验证
1.表单验证的好处
（1）减轻服务器的压力
（2）保证数据的可行性和安全性
在客户端就对表单进行验证是非常有必要的。
2.plaeeholder
plaeeholder属性用于为input类型的文本框一种提示,这种提示可以描述文本框期待用户输入何种内容,在输入空时显示,当在文本框中写入内容消失,该标签适合于input标签,text,search,url,email和password等lx。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>placeholder</title>
</head>
<body>
<form method="post" action="#" >
<p>
请输入搜索的关键字：
<input type="search" name="sousuo" placeholder="请输入搜索的关键字？"/>
<input type="submit" value="Go"/>
</p>
</form>
</body>
</html>3.required
required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>required</title>
</head>
<body>
<form method="post" action="#" >
<p>
用户名：
<input type="search" name="sousuo" required/>
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
4.pattern
pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.匹配就能提交,否则不能提交。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="#" >
<p>
电话号码：
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>
*以13、15、18888开头的11位数字
<br />
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
ad>
请输入搜索的关键字：
```
3.required
required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>required</title>
</head>
<body>
<form method="post" action="#" >
<p>
用户名：
<input type="search" name="sousuo" required/>
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
4.pattern
pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.匹配就能提交,否则不能提交。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="#" >
<p>
电话号码：
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>
*以13、15、18888开头的11位数字
<br />
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
