HTML 基础(一)

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

HTML 基础

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

1、HTML介绍

1.1、html 标签

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

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

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

<!--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、标签语法

1.2、 html 文件基本结构

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

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>

2.4、hx 标签(标题)

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

<hx>标题文本</hx>

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 标签示例-->
<!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 标签(水平横线)

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

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>代码语言</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 将网页划分为两个版块-->
<!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

在没有添加 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'>

属性值(value):

属性值超链接的 URL,可能的值:


实例:

<!--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='提示文本'>

实例 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 标签示例-->
<!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>
<form>
  姓名:
  <input type="text" name="myName">
  <br/>
  密码:
  <input type="password" name="pass">
</form>

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

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

<textarea rows='行数' cols='列数'>文本</textarea>
<!--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' />
<!--单选-->
<!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='提交'>
<!--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='重置'>

5.9、form 表单中的 label 标签

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

<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>
上一篇下一篇

猜你喜欢

热点阅读