HTML5 基本语法 | 前端

dsyislearning
140 阅读21分钟

1 HTML5 基本组成

1.1 标签

  1. 标签由英文尖括号 < 和 > 括起来，如 <html> 就是一个标签。

  2. html 中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个 / 。

如：

（1） <p></p>

（2） <div></div>

（3） <span></span>

  1. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如： <div> 里嵌套 <p> ，那么 </p> 必须放在 </div> 的前面。如下图所示。

  1. HTML 标签不区分大小写， <h1> 和 <H1> 是一样的，但建议小写，因为大部分程序员都以小写为准。

1.2 文档结构

html文档结构为下图：

技术点的解释：

  1.  <!DOCTYPE html> ：文档类型声明，表示该文件为 HTML5 文件。 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前

  2. <html></html> 标签对： <html> 标签位于 HTML 文档的最前面，用来标识 HTML 文档的开始； </html> 标签位于 HTML 文档的最后面，用来标识 HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。

  3. <head></head> 标签对：标签包含有关 HTML 文档的信息，可以包含一些辅助性标签。如 <title></title> ， <link /> ， <meta /> ， <style></style> ， <script></script> 等，但是浏览器除了会在标题栏显示 <title> 元素的内容外，不会向用户显示 head 元素内的其他任何内容。

  4. <body></body> 标签对：它是 HTML 文档的主体部分，在此标签中可以包含 <p><h1><br> 等众多标签，<body> 标签出现在 </head> 标签之后，且必须在闭标签 </html> 之前闭合。

1.3 head 标签

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

下面这些标签可用在 head 部分：

  1. head 标签为双标签，有尾标签， <head></head> 。

  2. head 标签表示头部标签，通常用来嵌套 meta 、 title 、 style 等标签。

  3. <title> 标签：在 <title> 和 </title> 标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的 title 标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的 title 。

  4. <meta charset="UTF-8"> 设置当前文件字符编码。

  5. style 标签：双标签中设置当前文件样式。

例如title标签：

<head>
    <title>hello world</title>
</head>

<title> 标签的内容 “hello world” 会在浏览器中的标题栏上显示出来，如下图所示：

1.4 body 标签

在网页上要展示出来的页面内容一定要放在body标签中。如下图的例子：

在浏览器中的显示效果：

1.5 注释

什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

<!--注释文字-->

如：下面代码的第 8、12 行都是注释，但是你会发现注释代码是不会在结果窗口中显示出来的。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>HTML的代码注释</title>
    </head>
    <body>
        <!--在线咨询 begin-->
        <div>
            <p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p>
        </div>
        <!--在线咨询 end-->
    </body>
</html>

2 HTML5 语义化标签

这一部分将介绍网页中常用到的标签，学习的时候要记住学习 html 标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。

语义化的好处：

  1. 更容易被搜索引擎收录。

  2. 更容易让屏幕阅读器读出网页内容。

2.1 段落标签 p

如果想在网页上显示文章，这时就需要 <p> 标签了，把文章的段落放到 <p> 标签中。

语法：

<p>段落文本</p>

注意一段文字一个 <p> 标签，如在一篇新闻文章中有 3 段文字，就要把这 3 个段落分别放到 3 个 <p> 标签中。如下图所示

在浏览器中显示的效果：

<p> 标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用 css 样式来删除或改变它，在后面课程中会学习到。

2.2 自定义文字样式标签 span

使用 <span> 标签自定义文字样式，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

语法：

<span>文本</span>

如果现在我们想把下面的第一段话 “美国梦” 三个字设置成 blue （蓝色），所以这样情况下就可以用到 <span> 标签了。

<p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>了不起的盖茨比</title>
    <style>
    span {
        color: blue;
    }
    </style>
</head>

<body>
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>

2.3 标题标签 h

文章的段落用 <p> 标签，那么文章的标题用什么标签呢？在本节我们将使用 <hx> 标签来制作文章的标题。

标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。 <h1> 是最高的等级。

语法：

<hx>标题文本</hx> (x为1-6)

文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。

注意：因为 h1 标签在网页中比较重要，所以一般 h1 标签被用在网站名称上。

h1-h6标签的默认样式：

标签代码：

在浏览器中显示的样式：

从上面的图片可以看出标题标签的样式都会加粗， h1 标签字号最大， h2 标签字号相对 h1 要小，以此类推 h6 标签的字号最小。

2.4 自定义块标签 div

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个 <div> 标签中，这个 <div> 标签的作用就相当于一个容器。

语法：

<div> </div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分，就可以使用 <div> 标签作为容器。

2.5 头部区域标签 header

header 标签，用来定义头部区域。这个区域是在 body 内部的。

例如网页顶部部分

2.6 底部区域标签 footer

footer 标签，用来定义底部区域。这个区域是在 body 内部的。

例如网页底部部分

2.7 区段标签 section

section 标签，定义一个区域。这个区域是在 body 内部的。

例如网页中专栏部分

2.8 侧边栏区域标签 aside

aside 标签，定义一个侧边栏区域。这个区域是在 body 内部的。

例如网页中侧栏部分

3 HTML5 效果标签

3.1 换行标签 br

我们想让文本里的诗显示得更美观些，如显示下面效果：

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到 <br /> 标签了，在需要加回车换行的地方加入 <br /> ， <br /> 标签作用相当于 word 文档中的回车。

上节的代码改为：

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

注意：现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

与以前学过的标签不一样， <br /> 标签是一个空标签，没有 HTML 内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有 <br /> 、 <hr /> 和 <img /> 。

注意：在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。

上面的代码在浏览中显示是没有回车效果的。如下图所示：

总结：在 html 代码中输入回车、空格都是没有作用的。在 html 文本中想输入回车换行，就必须输入 <br /> 。

3.2 实体引用

在上一节的例子，我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入&nbsp;。

语法：

&nbsp;

在html代码中输入空格是不起作用的，如下代码。

在浏览中显示，还是没有空格效果。

]

输入空格的正确方法：

在浏览器中的显示出来的空格效果。如下图所示。

这种有点像 C 语言的转义字符，HTML 的实体引用如下表所示。

Literal characterCharacter reference equivalent
<&lt;
&gt;
"&quot;
'&apos;
&&amp;

3.3 水平线标签 hr

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：

语法：

html4.01 版本 <hr>

xhtml1.0 版本 <hr />

注意：

1. <hr /> 标签和 <br /> 标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

2. <hr /> 标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了 css 样式表之后，都可以对其修改。

3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

4 HTML5 列表标签

4.1 无序列表 ul li

在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表。

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法：

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

举例：

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li 在网页中显示的默认样式一般为：每项 li 前都自带一个圆点，如下图所示：

4.2 有序列表 ol li

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如书籍热卖排行榜。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法：

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

举例：

下面是一个热点课程下载排行榜：

<ol>
   <li>前端开发面试心法</li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：

4.3 自定义列表 dl dt dd

<dl> 自定义列表，表示键值（key value）结构，标题用 <dt> 表示，每一项用 <dd> 表示

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

5 HTML5 图片、链接及表格标签

5.1 图片标签 img

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用 <img> 标签来插入图片。

语法：

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

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

属性：

  1. src：标识图像的位置；

  2. alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

  3. title：提供在图像可见时对图像的描述（鼠标悬停在图片上时显示的文本）；

  4. 图像可以是 GIF ， PNG ， JPEG 格式的图像文件。

5.2 锚定标签 a

使用 <a> 标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

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

例如：

<a href="http://www.mooc.com" title="点击进入网">click here!</a>

上面例子作用是单击 click here! 文字，网页链接到 http://www.mooc.com 这个网页。

title 属性的作用，鼠标悬停在链接文字上时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如下方案例代码（11-13行）。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>

<body>
    <ul>
        <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li>
        <li><a href="#" title="零基础学习html">零基础学习html</a></li>
        <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li>
    </ul>
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire</a> 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>

注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入 a 标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了 css 样子就可以设置过来（a{color:#000}) ，后面会详细讲解。

在新建浏览器窗口中打开链接：

接下来学习 <a> 标签中的 target 属性，可以先看一个例子：

我们要实现这样的效果,可以输入以下代码：

技术点的解释：

a 标签有的 target 属性，代表打开网页的方式。可选值为 _self 和 _blank ，默认值为 _self ，代表在当前页面打开链接， _blank 代表在新窗口打开链接。

5.3 表格标签 table

有时候我们需要在网页当中添加一些数据，如某公司想展示该公司员工的通信录，如下表：

那我们就需要用到表格标签了。想要在网页中实现以上效果，我们可以使用以下代码：

上面代码解释：

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

  1. <table>…</table> ：整个表格以 <table> 标记开始、 </table> 标记结束。

  2. <tr>…</tr> ：表格的一行，所以有几对 tr 表格就有几行。

  3. <td>…</td> ：表格的一个单元格，一行中包含几对 <td>...</td> ，说明一行中就有几列。

  4. <th>…</th> ：表格的头部的一个单元格，表格表头。

  5. 表格中列的个数，取决于一行中数据单元格的个数。

  6. border 属性可以为表格添加边框，属性值为数字。

注意：

  1. table 标签用来定义整个表格，为双标签，必须有结束标签。

  2. table 标签里面可以放 caption 标签和 tr 标签。

  3. caption 标签用来定义表格的标题。

  4. tr 标签用来设置表格的行，tr里面只能放 th 或者 td 标签，一组 tr 标签代表一行。

  5. th 用来设置表格的标题，会加粗居中显示。也就是 th 标签中的文本默认为粗体并且居中显示。

  6. td 同来设置表格的列，一组 td 标签代表一列。

  7. table 表格在没有添加 border 属性之前，在浏览器中显示是没有表格线的。

5.4 定义表格 thead tbody tfoot

在上一章节中，我们已经学习了用 <table> 标签家族来定义一个表格，我们使用到了 <tr> 标签来定义表格的行， <th> 和 <td> 来定义表格的列。接下来来学习 <thead> 标签定义表格头部， <tbody> 标签来定义表格的内容， <tfoot> 来定义表格的底部，来将我们的表格继续完善吧！

创建表格的三个区域：

thead、tbody、tfoot

我们想实现一个成绩表,各科成绩和总分,效果如下图：

我们表格第一行为表头数据,我们用 <thead> 标签包裹，中间的科目和分数为表格的主体内容，我们用 <tbody> 标签包裹，最后的总分我们用 <tfoot> 标签包裹。

  1. <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

  2. <tbody>…</tbody>：如果不加 <thead><tbody><tfooter> ， table 表格加载完后才显示。加上这些表格结构， tbody 包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用 tbody 分段，可以一部分一部分地显示。（通俗理解 table 可以按结构一块块的显示，不再等整个表格加载完后显示。）

  3. <tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

  4. thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>使用thead、tbody、tfoot标签</title>
</head>

<body>
    <h3>成绩表</h3>
    <hr/>
    <table border="1">
        <thead>
            <tr>
                <th>科目</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总分</td>
                <td>159</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

6 HTML5 交互标签

6.1 表单标签 form

网站怎样与用户进行交互？答案是使用 HTML 表单 (form) 。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

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

属性：

  1. <form> ：<form> 标签是成对出现的，以 <form> 开始，以 </form> 结束。

  2. action ：浏览者输入的数据被传送到的地方，比如一个 PHP 页面 (save.php) 。

  3. method ：数据传送的方式（get/post）。

<form ethod="post" action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

注意:

  1. 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

  2. method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

6.2 文本输入框 input

文本与密码

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

语法：

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

  1. type ：

    • 当 type="text" 时，输入框为文本输入框；
    • 当 type="password" 时，输入框为密码输入框。

  2. name ：为文本框命名，以备后台程序 ASP 、PHP 使用。

  3. value ：为文本输入框设置默认值。（一般起到提示作用）

举例：

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

在浏览器中显示的结果：

输入框提示

有时候需要提示用户输入框需要输入框的内容，那么就会用到我们的占位符 placeholder 属性，比如下面的效果：

想要实现这样的效果,我们只需要输入以下代码：

技术点的解释：

  1. placeholder 属性为输入框占位符，里面可以放提示的输入信息。

  2. placeholder 属性的值可以任意填写，当输入框输入内容时，占位符内容消失，输入框无内容时，占位符内容显示。

  3. 占位符内容不是输入框真正的内容。

例子：

    <input type="text" placeholder="请输入用户名" />
    <br/>
    <input type="password" placeholder="请输入密码" />

数字

我们来学习 input 标签中的数字框 number 类型，先来看一下数字框长什么样子吧。

技术点的解释：

  1. input 的 type 属性设置为 number ，则表示该输入框的类型为数字。

  2. 数字框只能输入数字，输入其他字符无效。

  3. 数字框最右侧会有一个加减符号，可以调整输入数字的大小，不同浏览器表现不一致。

网址

我们来学习 input 标签中的网址框 url 类型，先来看一下网址框长什么样子吧。

技术点的解释：

  1. input 的 type 属性设置为 url ，则表示该输入框的类型为网址。

  2. 输入框的值需以 http:// 或者 https:// 开头，且后面必须有内容，否则表单提交的时候会报错误提示。

邮箱

我们来学习 input 标签中的邮箱框 email 类型，先来看一下邮箱框长什么样子吧。

我们要实现一个邮箱输入框，可以输入以下代码：

技术点的解释：

  1. Input 的 type 属性设置为 email ，则表示该输入框的类型为邮箱。

  2. 数字框的值必须包含@。

  3. 数字框的值 @ 之后必须有内容，否则会报错误提示。

6.3 文本域标签 textarea

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

语法：

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

  1. <textarea> 标签是成对出现的，以 <textarea> 开始，以 </textarea> 结束。

  2. cols ：多行输入域的列数。

  3. rows ：多行输入域的行数。

  4. 在 <textarea></textarea> 标签之间可以输入默认值。

举例：

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

在浏览器中显示结果：

注意这两个属性可用 css 样式的 width 和 height 来代替： col 用 width 、 row 用 height 来代替。（这两个 css 样式在以后的章节会讲解）

6.4 label 标签

label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。

如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该 label 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label 标签相关联的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form>
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

6.5 选择框

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子：

语法：

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

  1. type：

    • 当 type="radio" 时，控件为单选框
    • 当 type="checkbox" 时，控件为复选框

  2. value： 提交数据到服务器的值（后台程序PHP使用）

  3. name： 为控件命名，以备后台程序 ASP、PHP 使用

  4. checked： 当设置 checked="checked" 时，该选项被默认选中

如下面代码：

在浏览器中显示的结果：

注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

6.6 下拉菜单

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

讲解：

  1. select 和 option 标签都是双标签，它总是成对出现的，需要首标签和尾标签。

  2. select 标签里面只能放 option 标签，表示下拉列表的选项。

  3. option 标签放选项内容，不放置其他标签。

  4. value：

  1. selected="selected"：设置selected="selected"属性，则该选项就被默认选中。

在浏览器中显示的结果：

6.7 提交按钮

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

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

  • type：只有当 type 值设置为 submit 时，按钮才有提交作用

  • value：按钮上显示的文字`

举例：

在浏览器中显示的结果：

6.8 重置按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入 “用户名” 后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。

语法：

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

type ：只有当 type 值设置为 reset 时，按钮才有重置作用

value ：按钮上显示的文字

举例：

在浏览器中显示的结果：

输入账号

单击重置按钮

avatar
文章
阅读
粉丝