HTML 基础（一）

2020-05-20 本文已影响0人焰火青春

HTML 基础

web 前端开发需要掌握：html、css样式、JavaScript语言。

HTML是网页内容的载体：内容即网页中所呈现出来的信息，如图片、文字、视频等。
CSS样式是表现：网页的外衣，如字体颜色、大小等，所有用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特殊效果：如焦点新闻的轮换，鼠标滑过弹出下拉菜单等效果。

1、HTML介绍

1.1、html 标签

1.1.1、关于编辑需要注意的几点

头部（head）中的 content-type 中设置的 charset 是告诉浏览器打开该文件的编码方式。

需要注意的是，如果使用记事本编辑，保存的时候使用另存为选择与 charset 设置的一样的编码方式。浏览器打开文件的编码方式应与文件编码方式一致，否则出现乱码。

<h1>......</h1>：标题标签
<p>......</p>：段落标签
<img scr='1.jpg'>：图片标签

<!--html 示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>Html和CSS的关系</title>
        <style type='text/css'>
        h1{
            font-size:24px;
            color:#930;
            text-align:center;
        }
        </style>
    </head>
    <body>
        <h1>勇气</h1>
        <p>三年级时，我还是一个胆小如鼠的女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没有勇气参加。</p>
        <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学读举手了，甚至成绩比我差很多的，也举手了，还说着：“我来，我来。”我环顾了四周，就我没有举手。</p>
    </body>
</html>

1.1.2、标签语法

标签游英文尖括号<>括起来的，如<head>
html 中的标签成对出现，由开始标签和结束标签（比开始多一个 /）
标签与标签间可以嵌套，但要保证先后顺序，如<div><p>......</p></div>
html 标签不区分大小写，但尽量小写。

1.2、 html 文件基本结构

<html>    <!--根标签-->
    <head>...</head>   <!--头部-->
    <body>...</body>   <!--身体-->
</html>

所有网页标签都在 <html></html> 中
<head> 标签用于定义文档头部，是所有头部元素的容器。头部元素有 <title>、<script>、<style>、<link>、<meta>等标签
<body>和</body> 间是网页的主要内容，如<h1>、<p>、<a>、<img> 等，这些都会在浏览器中显示

1.3、head 标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部的数据都不会作为内容显示给读者。

<!--head 标签示例-->
<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title> 标签（元素）：

网页标题的信息
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时的标题
显示在搜索引擎结果中的页面标题

2、认识标签（第一部分）

2.1、标签的语义化

标签的语义化可以明白每个标签的用途，如标题就用标题标签（h1）、段落内容用（p），强调用（em/strong）等等。好处就是：

更容易被搜索引擎收录
更容易让屏幕阅读器读出网页内容

2.2、body 标签

网页上显示的内容就放在 body 标签里

<!--body 标签示例-->
<body>
    <h1>
        了不起的盖茨比
    </h1>
    <p>
        1922年的一个春天...
    </p>
</body>

2.3、p 标签（段落）

要使网页上显示文章，就需要添加 <p> 标签，把文章段落放到 <p> 标签中。

<p>段落文本</p>

一段文字一个 <p> 标签
<p> 标签默认样式，段前段后有空白，可使用 css 删除或改变

2.4、hx 标签（标题）

文章标题使用 hx 标签，总共有 6 级（h1、h2、h3、h4、h5、h6），h1 为最高等级。

<hx>标题文本</hx>

h1 标签一般用于作为网站名称，如腾讯网站中的腾讯网三个字
hx 标签默认样式加粗，h1 最大

2.5、em 和 strong 标签（强调）

如果一段话中想强调某几个文字，可以使用 em 或 strong 标签，二者的区别：

标签名称	强调等级	默认样式
em	弱	斜体
strong	强	粗体

<!-- 默认样式可以使用 css 修改-->
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>

2.6、span 标签

span 标签没有语义，它的作用是：为文字设置单独的样式。

<span>文本</span>

<!--span 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>了不起的盖茨比</title>
        <style>                                     /*添加样式，设置文本颜色*/
        span{
        color:blue 
        }
        </style>
    </head>
    <body>
        <h1>了不起的盖茨比</h1>
        <p>1922年的春天，一个想要成名的作家只身来到美国，想着他的<span>美国梦</span>。</p>   <!--将美国梦三个字设置为蓝色-->
    </body>
<html>

2.7、q 标签（短文本引用）

网页文章里如果想引用某个诗人的一句诗，使文章更出彩，那么可以使用 q 标签。

须注意的是，引用的文本不需要加双引号（浏览器会自动加）

<q>引用文本</q>

<!--q 标签示例-->
<!--浏览器上显示结果被引用的诗句被添加了双引号-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
        <title>q标签</title>
    </head>
    <body>
        <h1>q标签</h1>
        <p>周瑜，不可否认，他是历史上一个了不起的英雄人物！确实也配得上那句<q>聪明秀出为之英，胆略过人为之雄 。</q></p>
    </body>
</html>

2.8、blockquote 标签（长文本引用）

q 标签引用的是短文本，一句话或者一句诗。而当要引用长文本如长文、整篇诗句那么则可以使用 blockquote 标签。

浏览器对 blockquote 标签的默认样式是前后缩进

<blockquote>引用的文本</blockquote>

<!--blockquote 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
        <title>blockquote标签</title>
    </head>
    <body>
        <h1>心似桂花开</h1>
        <p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p>
        <blockquote>“暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。”</blockquote>
        <p>这是李清照的诗句《咏桂》中的词句，在李清照看来，规划暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳值得称道。</p>
    </body>
</html>

2.9、br 标签（换行）

对于一些内容分行观览效果更佳如诗句，那么可以使用 br 标签换行。

xhtml 1.0 写法：<br />       <!--一般使用这种方法-->
html 2.01 写法：<br>

br 标签是空标签，也就是没有 html 内容，只需有一个开始标签。这种标签还有 <hr />、<img />。
html 忽略空格和回车，br 标签就相当于回车换行。
只需在需要换的句子后面添加 br 标签即可。

<!--br 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
        <title>blockquote标签</title>
    </head>
    <body>
        <h1>《咏桂》
        <p>
        暗淡轻黄体性柔，<br />
        情疏迹远只香留。<br />
        何须浅碧深红色，<br />
        自是花中第一流。
        </p>
    </body>
</html>

2.10、添加空格

html 代码中输入空格和回车是没有用的，需要空格时，可以写入 &nbsp；。

&nbsp;

<!--&nbsp; 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
        <title>空格讲解</title>
    </head>
    <body>
        <h1>感悟梦想</h1>
        来源：作文网&nbsp;&nbsp;作者：为梦想而飞           <!-- 来源：作文网后添加两个空格-->
    </body>
</html>

2.11、hr 标签（水平横线）

在某些信息展示时，为其添加一些用于分隔的横线，可以使文章看起来整齐些。

hr 标签是一个空标签，只有开始标签，没有结束标签。
默认样式是粗线条，灰颜色，可以使用 css 修改。

xhtml 1.0 版本：<hr />       <!-- 一般使用这个版本-->
html 4.0 版本：<hr>

<!--hr 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
        <title>blockquote标签</title>
    </head>
    <body>
        <h2>《静夜思》</h2>
        <p>
        床前明月光，<br />
        疑是地上霜。<br />
        举头望明月，<br />
        低头思故乡。
        </p>
        <hr />         # 在两个段落间添加 hr 标签
        <h2>《咏桂》</h2>
        <p>
        暗淡轻黄体性柔，<br />
        情疏迹远只香留。<br />
        何须浅碧深红色，<br />
        自是花中第一流。
        </p>
    </body>
</html>

2.12、address 标签（地址信息）

一般网页中会有一些公司或者作者个人地址信息等，要实现这种效果可以使用 address 标签，也可以定义一个地址（如电子邮件地址、签名或文档的作者身份）。

<address>地址</address>         <!-- 默认样式为斜体-->
<a href='www.baidu.com'>百度</a>    <!--a 标签的 href 属性可以实现超链接跳转（默认样式为蓝色字体带下划线）-->

2.13、code 标签（单行代码）

在介绍编程语言的文章或网站上，避免不了要插入编程语言，那么可以使用 code 标签或者 pre 标签。

code 标签：插入一行代码
pre 标签：插入多行代码

<code>代码语言</code>
<pre>代码语言</pre>     <!--插入代码不改变代码格式-->

<!--code 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>code标签介绍</title>
    </head>
    <body>
        <h2>渐变效果</h2>        <!--code标签添加单行代码-->
        <p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(ldft, red 100px, yellow 200px);}</code>
        </p>
    </body>
</html>

2.14、pre 标签（多行代码）

插入多行代码可以使用 pre 标签，其作用是：预格式文本（对插入的代码不改变格式），被包围在pre 元素中的文本通常会保留空格和换行符。

需要注意的是 pre 标签不只是插入代码时才使用，当需要保证插入的文本格式不改变时也可以使用。

<!--pre 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
        <title>pre 标签的使用</title>
    </head>
    <body>
        <h2>源代码</h2>
        <p><pre>                      <!--pre 标签保留原有的空格和换行符-->
            var message='欢迎';
            for(var i=1;i<=10;i++)
            {
                alert(message)
            }
        </pre></p>
    </body>
</html>

3、认识标签（第二部分）

3.1、ul 标签（无序列表）

浏览网页时有很多新闻列表、图片列表，这些列表可以使用 ul-li 标签来完成，它是无序列表。

默认样式：一般为每项 li 前都自带一个圆点

<ul>
    <li>信息</li>
    <li>信息</li>
    ......
</ul>

3.2、ol 标签（有序列表）

与 ul 标签不同的是，ol 标签是有顺序之分的。默认样式：每项 <li> 前都自带一个序号，从 0 开始。

<ol>
    <li>信息</li>
    <li>信息</li>
</ol>

<!--ol 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>ol 标签</title>
    </head>
    <body>
        <p><ol>
            <li>前端开发面试心法</li>
            <li>零基础学习 html</li>
            <li>JavaScript 全攻略</li>
        </ol></P>
    </body>
</html>

3.3、div 标签（排版）

在网也制作的过程中，可以把一些独立的逻辑部分划分出来，放在一个 div 标签中，其作用就好比一个容器。

<div>...</div>

逻辑部分就是页面上相互关联的一族元素。如网页中独立的“栏目板块”，就是一个典型的逻辑部分。

div 标签可以将网也划分为独立的版块，默认样式无边框
可与 CSS 样式配合使用，设置边框大小、颜色等

<!--div 标签与 CSS 将网页划分为两个版块-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>div 标签</title>
    </head>
    <style>
        div{
            width:300px;                      # 边框宽
            height:300px;                    # 边框长
            margin:30px auto;               # 两个边框间的间距
            border:1px solid red;           # 边框宽度、边框样式、边框颜色
            }
    </style>
    <body>
        <div>
            <h2>热门课程排行榜</h2>
            <ol>
                <li>前端开发面试心法</li>
                <li>零基础学习 html</li>
                <li>JavaScript 全攻略</li>
            </ol>
        </div>
        <div>
            <h2>最新课程排行</h2>
            <ol>
                <li>版本管理工具介绍-Git篇</li>
                <li>Canvas绘图详解</li>
                <li>QQ5.0策划菜单</li>
            </ol>
        </div>
    </body>
</html>

3.4、div 标签的 id 属性

当网页中类似的独立的逻辑部分有很多时，为使逻辑更清晰，可以给逻辑部分添加一个名称。在这里我们使用 div 标签的 id 属性给独立的逻辑部分添加唯一标识，确保其唯一性。

<div id='版块名称'>...</div>

3.5、table 标签（表格）

创建表格的四个元素：table、tbody、tr、th、td

tbody：不加 <thead>、<tbody>、<tfoter>，table表格加载完才显示，加上这些表格结构，tbody 包含行的内容下载完优先显示，不必等待表格结束后显示。同时如果表格很长，用 tbody 分段，可以一部分一部分显示
tr：表格的一行，有几对 tr 就有几行
th：表格表头
td：表格的一个单元格，一行中包含几对 td，说明一行中就有几列

在没有添加 CSS 样式前，table表格无表格线，th 标签中的文本默认样式为粗体并居中。‘

<!--table 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
        <title>table 标签的使用</title>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <th>产品名称</th>
                    <th>品牌</th>
                    <th>库存量（个）</th>
                    <th>入库时间</th>
                </tr>
                <tr>
                    <td>耳机</td>
                    <td>联想</td>
                    <td>500</td>
                    <td>2013-1-2</td>
                </tr>
                <tr>
                    <td>U盘</td>
                    <td>金士顿</td>
                    <td>120</td>
                    <td>2013-8-10</td>
                </tr>
                <tr>
                    <td>U盘</td>
                    <td>爱国者</td>
                    <td>133</td>
                    <td>2013-3-25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.6、使用 CSS 样式为表格加边框

<!--为 th，td 单元格添加粗细为一个像素的黑色边框-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
        <title>table 标签的使用</title>
        <style type='text/css'>
        table tr td,th{border:1px solid #000;}
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <th>产品名称</th>
                    <th>品牌</th>
                    <th>库存量（个）</th>
                    <th>入库时间</th>
                </tr>
                <tr>
                    <td>耳机</td>
                    <td>联想</td>
                    <td>500</td>
                    <td>2013-1-2</td>
                </tr>
                <tr>
                    <td>U盘</td>
                    <td>金士顿</td>
                    <td>120</td>
                    <td>2013-8-10</td>
                </tr>
                <tr>
                    <td>U盘</td>
                    <td>爱国者</td>
                    <td>133</td>
                    <td>2013-3-25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.7、caption 标签（为表格添加标题）

table 标签的 summary 属性可以为表格添加摘要，但内容不会在浏览器中显示，其作用是增加表格的可读性（语义化），使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

<!--summary 属性语法-->
<table summary='表格简介文本'>......</table>

<!--caption 标签为表格添加标题语法-->
<table>
    <caption>标题文本</caption>
    <tr>
        <td>...</td>
        <td>...</td>
        ...
    </tr>
</table>

4、认识标签（第三部分）

4.1、a 标签（超链接）

4.1.1、title 属性

a 标签可以实现超链接，网页中只要有链接的地方就有这个标签。

语法：

<a href='目标网址' title='鼠标滑过显示的文本'>链接显示的文本</a>
<a href='value'>

title 属性：鼠标滑过链接文本时显示这个属性的文本内容，在实际网页开发中有很大作用，方便搜索引擎了解链接地址的内容（语义化更友好）
加了 a 标签的文本会变成蓝色，被点击过颜色变成紫色，可以使用 css 样式设置
默认在当前窗口打开超链接，要想在新建窗口打开需要添加 target 属性

属性值（value）：

属性值超链接的 URL，可能的值：

绝对 URL：指向另一个站点（如：href = 'http://www.baidu.com'）
相对 URL：指向站点内的某个文件（如：href = 'javascript:fun();' 指向站点内的某个函数）
锚 URL：指向页面内的锚（如：href = '# top'，可与 name 属性一起使用）

实例：

<!--a 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
        <title>a 标签的使用</title>
    </head>
    <body>
        <ul>
            <li> <a href='http://www.imooc.com' title='点击进入慕课网'>慕课网</a> </li>
            <li> <a href='http://www.baidu.com' title='点击进入百度网'>百度一下你就知道</a> </li>
            
        </ul>
    </body>
</html>

4.1.2、target 属性（打开新建窗口）

a 标签的 target 属性可以打开在新建浏览器窗口打开超链接。

<a href='目标网址' title='鼠标滑过显示的文本' target='_blank'>显示文本</a>

4.1.3、mailto 属性（链接 Email 地址）

a 标签的另一个属性 mailto 可以链接 Email 地址，让访问者便捷向网站管理者发送电子邮件。

功能	关键字	功能详解	举例
邮箱地址	mailto:	浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人地址	<a href='mailto:yy@imooc.com'>发送</a>
抄送地址	cc=	在收件人地址后用 cc 地址，可以填写抄送地址	<a href='mailto:yy@imooc.com? cc=xx@xxx.com'>发送</a>
密件抄送地址	bcc=	在收件人地址和用 bcc 地址，可以填上密件抄送地址	<a href='mailto:yy@imooc.com? bcc=xx@xxx.com'>发送</a>
多个收件人、抄送。密件抄送人	;	用分号隔开多个收件人的地址，可以实现发送多人的功能	<a href='mailto:yy@imooc.com;xx@xxx.com'>发送</a>
邮件主题	subject=	用 subject 添加邮件主题	<a href='mailto:yy@imooc.com?subject=发送电子邮件'>发送</a>
邮件内容	body=	用 body 添加邮件内容	<a href='mailto:yy@imooc.com?body=发送电子邮件'>发送</a>

注意：如果 mailto 后面同时有多个参数的话，第一个参数必须以 “？” 开头，后面的参数每一个都以 “&” 分隔。

<a href='mailto:yy@yyy ? cc=xx@xxx.com' & bcc=xx@xxx.com & subject=主题 & body=邮件内容'>发送</a>

<!--mailto 属性-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
        <title>a 标签的使用</title>
    </head>
    <body>
        <p>1922年的春天，一个想要成名的年轻人拉斐尔...</p>
        有什么建议可以给我发邮件
        <a href='maitlo:yy@imooc.com ? cc=xx@xxx.com & bcc=xx@xxx.com & subject=主题 & body=邮件内容'>发送</a>
    </body>
</html>

4.1.4、name 属性

name 属性规定锚（anchor）的名称，可以使用 name 属性创建 html 页面中的书签

书签不会以任何形式显示，对读者不可见；当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

语法：

<a name='lable'>锚(显示在页面上的文本)</a>

实例：

使用锚，定位到 Chapter 4，当点击查看 Chapter 4 时，自动跳转到当前页面上 Chapter 4

<!DOCTYPE HTML>
<html>
    <body>
        <p>
            <a href="#C4">查看 Chapter 4</a> <br />
        </p>
        
        
        <h2>Chapter 1</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 2</a></h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 3</h2>
        <p>This chapter explains ba bla bla</p>

        <h2><a name="C4">Chapter 4</a></h2>        <!--锚名需要和 href 的名称相同-->
        <p>This chapter explains ba bla bla</p>
    </body>
</html>

4.2、img 标签（图片）

img 标签可以给网页插入图片。

<img src='图片地址' alt='下载失败时的替换文本' title='提示文本'>

src：标识图片位置
alt：指定图片的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。
title：提供对图片的描述（鼠标滑过时显示的文本）
支持 gif、png、jpeg 格式图像文件

实例 1：

制作图像链接

<!--将图片放 a 标签内-->
<body >
  
  <a href="http://www.iqiyi.com/u/1183973888/follow" target='_blank'>
      <img src='http://fb.topitme.com/b/06/64/11317394700b16406bo.jpg' width ='30%' height ='20%' alt='杰克' title="点击查看原网页">
  </a>
</body>

实例 2：

背景图片

<html>

    <body background="/i/eg_background.jpg">

        <h3>图像背景</h3>

        <p>gif 和 jpg 文件均可用作 HTML 背景。</p>

        <p>如果图像小于页面，图像会进行重复。</p>

    </body>
</html>

实例 3：

如何在文字中排列图片

align = 'left/right'      <!--图像浮动到左边或右边-->

<!--bottom 为默认对齐方式-->
<html>   
    <body>
        <h2>未设置对齐方式的图像：</h2>
        <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
        <h2>已设置对齐方式的图像：</h2>
        <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>   
        <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
        <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
        <p>请注意，bottom 对齐方式是默认的对齐方式。</p>
    </body>
</html>

图片自定义大小：

可以自定义图片 width、height，也可以设置百分比（随窗口变化而变化）

<img src='xxx.jpg' width='100px' hright='100px'>
<img src='xxx.jpg' width='100%' hright='100%'>   <!--与窗口一样大-->

5、form 标签（表单）

5.1、使用表单标签与用户交互

使用 form 标签网站可以与用户进行交互。表单是把用户输入的数据传送到服务器端，这样服务器就能处理表单传过来的数据。

<form method='传送方式' action='服务器文件'

<form> 标签：成对出现，<form> 开始，</form> 结束
action：用户输入的数据被传送到的地方，如一个 PHP 页面（save.php）
method：数据传送的方式（get / post）
所有表单控件（文本框 text、文本域（textarea）、按钮（button）、单选框、复选框等）都必须放在 <form> </form> 标签中，否则无法提交到服务器上

<!--form 标签示例-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>form 表单标签的使用</title>
    </head>
    <body>
    <form method='post' action='save.php'>
        <lable for='username'>用户名:</label>
        <input type='text' name='username' id='username' value='' /> <br />
        <label for='pass'>密码:</label>
        <input type='password' name='pass' id='pass' value='' />
        
        <input type='submit' value='确定' name='submit' />
        <input type='reset' value='重置' name='reset' />
        <input type='radio' value='单选' name='radio' />
    </form>
    </body>
</html>

5.2、文本、密码输入框

当用户要在表单中键入字幕、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框。

<form>
    <input type='text/password' name='名称' value='文本' />
</form>

type：当 type='text'（'password'）时，输入框为文本（密码）输入框
name：为文本框命名，以备后台程序 ASP、PHP 使用
value：为文本输入框设置默认值（一般起到提示作用）

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

5.3、文本域，支持多行文本输入

当需要在表单中输入大段文字时，就要用到文本输入域。

<textarea rows='行数' cols='列数'>文本</textarea>

<textarea> 标签成对出现
cols：多行输入域的列数
rows：多行输入域的行数
在 <textarea> </textarea> 标签间可以输入默认值
cols、rows 两个属性可以使用 css 样式的 width 和 height 代替

<!--textarea 标签的使用-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>个人简介：</label>
    <textarea cols='50' rows='10'>在这里输入内容...</textarea>
    <input type="submit" value="确定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form> 
</body>
</html>

5.4、单选框、复选框

在使用表单调查表时，未来减少用户的操作，使用选择框是一个好的主意，html 中有单选和复选两种选择。

<input type='radio/checkbox' value='值' name='名称' checked='checked' />

type 是 radio 时为单选框，checkbox 为复选框
value：提交数据到服务器的值（后台程序 PHP 使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked='checked' 时，该选项被默认选中
单选时，name 必须相同，复选时不同

<!--单选-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>form表单标签的使用</title>
    </head>
    <body>
    <form method='post' action='save.php'>
        你是否喜欢旅游？ <br />
        <input type='radio' name='radiolove' value='喜欢' checked='checked'> 喜欢
        <input type='radio' name='radiolove' value='不喜欢'> 不喜欢
        <input type='radio' name='radiolove' value='无所谓'> 无所谓
    </form>
    </body>
</html>

<!--label 标签-->
<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender-man" />
    <label>女</label>
    <input type="radio" value="2"  name="gender-man" />
</form>

5.5、下拉列表框

下拉列表框可以有效节约网页空间，也可以单选和多选。

<!--selected='selected' 时，该选项默认被选中-->
<option value='提交值'（向服务器提交的值）>选项（显示的值）</option>

<!--option 标签-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected='selected'>旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

5.6、使用下拉列表进行多选

下拉列表也可以多选操作，在 <select> 标签中设置 multiple='multiple' 属性，即可实现。（win 系统多选时，按下 ctrl + 鼠标单击，mac 下 command + 单击）

<select multiple='multiple'>...</select>

5.7、提交按钮，提交数据

表单中有两种按钮，提交、重置。

<input type='submit' value='提交'>

type 为 submit 时，按钮才有提交作用
value：按钮上显示的文字

<!--submit 提交-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提交按钮</title>
</head>
<body>
<form  method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value=" " name="myName " />
    <input type="submit" value="提交" name="submitBtn" />
</form>
</body>
</html>

5.8、重置按钮，重置表单信息

当 type 为 reset 时可以将表单中所填写的信息重置。

<input type='reset' value='重置'>

type 为 reset 时，按钮才有作用
value：按钮上显示的文字

5.9、form 表单中的 label 标签

label 标签没有任何特殊效果，其作用是为鼠标用户改进了可用性。当用户单击选中该 label 标签时，浏览器会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label 标签相关联的表单控件上）。

<label for='控件 id 名称'></label>

标签的 for 属性中的值应当与相关控件的 id 属性值相同
label 标签相当于选中或者聚焦的作用（提交、重置和下拉可以不用）

<!--label 标签-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>form中的lable标签</title>
    </head>

    <body>
    <form>
        <label for="male">男</label>  <!--for 属性的值与 id 的值必须相同才能将焦点转到相关的控件上来-->
        <input type="radio" name="gender" id="male" />
        <br />
        <label for="female">女</label>
        <input type="radio" name="gender" id="female" />
        <br />
        <label for="email">输入你的邮箱地址</label>
        <input type="email" id="email" placeholder="Enter email">
    </form>
    </body>
</html>