HTML简介
HTML是**超文本标记语言（HyperText Markup Language）**的简称
HTML的前世今生
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
HTML定义
-
HTML语言用于编写各种网页
-
HTML语言可以在网页里说明文字、图形、动画、声音、表格、链接等
-
HTML不是一门编程语言，而是一种标记语言
HTML编辑器
常用的HTML编辑器有下列几款：
-
HBuilder：http://www.dcloud.io/
-
Notepad++：https://notepad-plus-plus.org/
-
Sublime Text：http://www.sublimetext.com/
-
VS Code：https://code.visualstudio.com/
HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>这是一个文本</h1>
<p>这是一个段落</p>
....
</body>
</html>
这是一个文本
这是一个段落
....代码分析
-
DOCTYPE 声明了文档
-
标签 <html> 与 </html> 描述了文档类
-
标签 <head> 与 </head>是网页的头部表示(一般不可视)
-
标签 <body> 与 </body> 为可视化网页内容
-
标签 <h1> 与 </h1> 作为一个标题使用
-
标签 <p> 与 </p> 作为一个段落显示
HTML标签
-
根据上面的代码，我们可以看到HTML代码都是由一个个<…>组成的
-
我们称代码里的<…>为HTML标签
-
在HTML中的标签分为两种
-
双标签(一般标签):由开始标签<…>和结束标签</…>组成的 例:<html>…</html>
-
单标签(自闭和标签):由一个标签组成的<…/> 例:<img … />
<DOCTYPE>声明
- DOCTYPE对大小写是不敏感的，以下4种均正确
<!DOCTYPE html><!--推荐--> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
<head>(头部)标签
-
<head>标签包含了所有的头部标签元素。在 <head>元素中你可（scripts）, 样式文件（CSS），及各种 meta 信息。
head中一般只能存在以下6中标签 <title>标签 <meta>标签 <link>标签 <style>标签 <script>标签 <base>标签
<title>标签
-
<titie>标签用来定义网页的标题
<head> <title>Lai Lab-专注于技术资源的网站</title> </head>
<meta>标签
-
<meta> 标签描述了一些基本的元数据。
-
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
-
<meta> 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
-
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。
-
<meta>一般放置于 <head>标签中
<!--mate编码格式说明--> <meta charset="utf-8" /> <!--为搜索引擎定义关键字--> <meta name="keywords" content="C Java Python MySQL HTML"/> <!--为网页定义描述内容--> <meta name="description" content="Free Web tutorials on Java and HTML"/> <!--定义网页作者--> <meta name="author" content="Lai"/> <!--每30秒刷新网页--> <meta http-equiv="refresh" content="30"/>
<link>标签
-
<link> 标签定义了文档与外部资源之间的关系
-
<link> 标签通常用于链接到样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<style>标签
-
<style> 标签定义了元素的CSS样式
-
<style>放置于 标签中
<head> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head>
<script>标签
-
<script>标签主要用来定义页面的JavaScript代码，也可以引用外部JavaScript文件
<head> <script> ... </script> </head>
<base>标签
-
<base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接
<head> <base href="http://www.lailab.cn" target="_blank"> </head>
本章练习
-
本章练习的完整答案将会在下一章的本章练习中给出
-
请默写HTML基本框架
常用标签
-
以下是一些常用HTML标签
标签名 标签含义 <a> 超链接标签 <b> 文字加粗 <big> 增大字体 <br /> 换行 <center> 内容居中 <code> 代码模式 <div> 组件盒 <dl> 定义列表 <em> 强调文字 <font size=“” color=“”></font> 字体设置 <i> 斜体 <li> 无序列表 <p> 段落 <small> 缩小字体
标签详解
标题标签(<h1>~<h6>)
-
<title>和<h>都叫标题标签，但是<title>标签是用来给网页设置标题，而<h>标签是网页内部的标题
-
h是hander的缩写，在<h1>~<h6>中，<h1>重要性最高，<h6>重要性最低
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
段落标签(<p>)
-
在HTML中，可以用<p></p>来表示一段本文
<p>静夜思</p> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p>静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
换行标签(<br>)
-
在一些特定的文章中，需要手动换行，就需要用到<br >标签
<p>静夜思<br />床前明月光，<br />疑是地上霜。<br />举头望明月，<br />低头思故乡。</p>静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
文本标签(8种)
| 类型 | 标签 |
|---|---|
| 粗体标签 | <strong>,<b> |
| 斜体标签 | <i>,<em></em>,<cite> |
| 上标标签 | <sup> |
| 下标标签 | <sub> |
| 中划线标签 | <s> |
| 下划线标签 | <u> |
| 大字号标签 | <big> |
| 小字号标签 | <small> |
水平线标签(<hr>)
-
<hr />标签是英文horizon的缩写，在HTML中表示水平线
<p>静夜思</p> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> <hr /> <p>悯农</p> <p>锄禾日当午，</p> <p>汗滴禾下土。</p> <p>谁知盘中餐，</p> <p>粒粒皆辛苦。</p>静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
悯农
锄禾日当午，
汗滴禾下土。
谁知盘中餐，
粒粒皆辛苦。
盒子标签(<div>)
-
在HTML中，我们用<div>来划分结构，从而让CSS和JavaScript更好的控制某一块的内容
<div> <!--这是第一首诗--> <p>静夜思</p> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> </div> <div> <!--这是第二首诗歌--> <p>悯农</p> <p>锄禾日当午，</p> <p>汗滴禾下土。</p> <p>谁知盘中餐，</p> <p>粒粒皆辛苦。</p> </div>静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
悯农
锄禾日当午，
汗滴禾下土。
谁知盘中餐，
粒粒皆辛苦。
行内元素
-
块元素和行内元素在HTML中是极其重要的概念，同时也是CSS中的重要内容
-
在之前的学习中，可能会发现运行结果中，有些元素是独占一行的，其他元素位于其他行，如：<strong>，<b>，<em>等
-
以下总结了几种常见的块元素
行内元素 说明 <strong> 粗体标签 <em> 斜体标签 <a> 超链接标签 <span> 常用行内元素标签，结合CSS定义样式
块元素
-
除了有行内元素外，也有一些元素不是独占一行的，如：<p>，<div>，<br>，<hr>等
-
以下总结了几种常见的块元素
块元素 说明 <h1>~<h6> 标题标签 <p> 段落标签 <div> 盒子标签 <br> 换行标签 <hr> 水平线标签 <ol> 有序列表 <ul> 无序列表 -
总的来说，块元素有以下两个特点
- 块元素独占一行，排斥其他元素与其同行
- 块元素可以容纳其他块元素或行内元素
特殊符号
-
常用符号分为易通过输入法符号和不易通过输入法符号
-
下面几种是易通过符号
特殊符号 说明 代码 " 双引号 " ‘ 单引号(左) ‘ ’ 单引号(右) ’ × 乘号 × ÷ 除号 ÷ > 大于号 > < 小于号 < & “与”符号 & — 破折号 — | 竖线(管道符) | -
几种不易通过符号
特殊符号 说明 代码 § 分节符 § © 版权符 © ® 注册商标符 ® ™ 商标符 ™ € 欧元符 € £ 英镑符 £ ¥ 日元符 ¥ ° 度 °
注释标签
-
在HTML中注释标签表示为
-
注释的代码不会显示在浏览器中
本章练习
-
本章练习的完整答案将会在下一章的本章练习中给出
-
上章完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1>这是一个文本</h1> <p>这是一个段落</p> .... </body> </html> -
用本章所学打印出以下内容
赠汪伦 唐©李白 李白乘舟将欲行， 忽闻水上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。 -
其中 题目要用2号字体，朝代用3号字体，作者用3号字体，诗歌用4号字体
列表标签
- 有些资料中还提到“目录标签dir”和“菜单列表menu”，这两种标签在HTML5中已经被废除了，用无需列表ul替代
有序列表
-
顾名思义，有序列表就是对数据列表加上顺序，如1. 2. 3.或a. b. c.等
-
在HTML中想要表示有序列表的话就要用到<ol>标签和<li>标签
<ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol>- 有序列表1
- 有序列表2
- 有序列表3
-
注意：想要表示有序列表必须要将<ol>和<li>两个标签一起用
-
从上面的运行结果上看，有序列表将表内元素用数字进行标注顺序
-
我们还可以通过type来设置其他样式
type属性
<ol type="属性值">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
-
在有序列表中，type的值有如下几种
属性值 表示样式 1 阿拉伯数字：1. 2. 3. a 小写英文：a. b. c. A 大写英文：A. B. C. i 小写罗马数字：i. ii. iii. I 大写罗马数字：I. II. III. <!--默认为数字标识--> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <hr /> <!--数字标识--> <ol type="1"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <hr /> <!--小写字母标识--> <ol type="a"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <hr /> <!--大写字母标识--> <ol type="A"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <hr /> <!--小写罗马标识--> <ol type="i"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <hr /> <!--大写罗马标识--> <ol type="I"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol>- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表1
- 有序列表2
- 有序列表3
无序列表
-
无序列表就是列表中的元素表示无顺序，例：●. ●. ●.
<ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul>- 无序列表1
- 无序列表2
- 无序列表3
type属性
-
无序列表中也存在type属性，如下表
属性值 表示样式 disc 实心圆● circle 空心圆○ square 实心正方形■ <!--默认是实心圆--> <ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <hr /> <!--实心圆标识--> <ul type="disc"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <hr /> <!--空心圆标识--> <ul type="circle"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <hr /> <!--实心正方形标识--> <ul type="square"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul>- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表1
- 无序列表2
- 无序列表3
定义列表
-
定义列表分为两部分：名词和描述
<dl> <dt>名词</dt> <dd>描述</dd> .... </dl> -
dl是定义列表（definition list）的简称，规定了列表的有效范围
-
dt是定义名词（definition term）的简称，用于添加列表的名词
-
dd是定义描述（definition description）的简称，用于添加列表的解释
<dl> <dt>Java</dt> <dd>Java分为Java EE，Java SE，Java ME</dd> <dt>Web</dt> <dd>Web主要分为HTML，CSS，JavaScript</dd> </dl>-
Java
- Java分为Java EE，Java SE，Java ME Web
- Web主要分为HTML，CSS，JavaScript
HTML语义化
-
在HTML中一个功能可能会有很多种实现方法，例：
<!--代码1--> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <!--代码2--> <p>1.有序列表1</p> <p>2.有序列表2</p> <p>3.有序列表3</p>- 有序列表1
- 有序列表2
- 有序列表3
1.有序列表1
2.有序列表2
3.有序列表3
-
由此我们会发现，用p标签写的代码反而比有序列表写法更简单，同理，在HTML中很多标签可以用以前学过的标签来代替，所以就懒得学新标签了，这种想法是完全错误的，HTML语言的精髓恰恰在此，正是因为HTML的语义化才使得HTML在可读性和可维护性上更好，所以，初学者在刚接触HTML时不要抱着这种心态
本章练习
-
本章练习的完整答案将会在下一章的本章练习中给出
-
上章完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h2>赠汪伦</h2> <h3>唐©李白</h3> <h4>李白乘舟将欲行，</h4> <h4>忽闻水上踏歌声。</h4> <h4>桃花潭水深千尺，</h4> <h4>不及汪伦送我情。</h4> </body> </html> -
用本章所学打印出以下问卷调查
问卷调查 ----------------------------------------------------------------------------------------- 1.你是通过什么途径来到Lai Lab官网的？ A.微信公众号 B.朋友推荐 C.百度搜索 D.其他途径 2.你感觉Lai Lab官网怎么样？ A.很好，功能很多 B.一般般，没有什么突出的地方 C.很差。。。 -
其中 标题要用2号字体，问题用3号字体，–…–表示分割线
表格标签
-
在web1.0时代，网页布局通常是用表格来完成的，但是在web2.0中，CSS技术取代了这种方式，但是在网页制作上表格还是有着重要的作用，表格可以整齐的显示信息，如下表
技术 说明 HTML 网页的结构 CSS 网页的外观 JavaScript 网页的行为
基本结构
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第一列</td>
</tr>
</table>
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第一列 |
- 在HTML中，表格标签分为三个部分
- 表格标签：<table>
- 行标签：<tr>
- 列标签：<td>
完整结构
- 一个完整的表格不仅仅有<table>，<tr>，<td>这些标签，还应该具有<caption>，<th>等
表格标题(caption)
<table>
<caption>表格标题</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第一列</td>
</tr>
</table>
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第一列 |
- 注意：一个表格只能拥有一个标题（caption）
表头单位格(<th>)
<table>
<caption>表格标题</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
| 第一列 | 第二列 |
|---|---|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
扩展知识
-
通常情况下，我们需要的表格都需要有边界，但表格默认是没有边框的，这时我们可以用table中的border属性来定义边框的宽度
<table border="1"> ... </table>
代码语义化
-
在平时生活中，表格通常被用来储存一些数据，如成绩等，通常数据需要有表头（数据类型栏），表身（数据栏），表尾（统计数据），在HTML中，我们可以分别用<thead>，<tbody>，<tfoot>来表示表头，表身和表尾
<table> <!--表头--> <thead> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> </thead> <!--表身--> <tbody> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </tbody> <!--表尾--> <tfoot> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </tfoot> </table>
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
| 第三行第一列 | 第三行第二列 |
列合并(colspan)
-
在前面我们学习了coption标题标签，我们发现这个标题其实是在表的外面的，有时我们可能需要标题存在于表内，此时我们可以通过列合并（cospan）来解决，我们可以合并第一行的两列来显示标题
<table> <!--表外标题--> <!--<caption>表格标题</caption>--> <tr> <!--合并两列来作为内部标题--> <td colspan="2">第一行第一列</td> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>第一行第一列 第一行第一列 第一行第二列 第二行第一列 第二行第二列 -
同理，就能用列合并来解决很多其他问题
行合并(rowspan)
-
行合并就是讲纵向的多个单位格合并
<table> <tr> <td rowspan="2">第一行第二行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第二列</td> </tr> </table>第一行第二行第一列 第一行第二列 第二行第二列
本章练习
-
本章练习的完整答案将会在下一章的本章练习中给出
-
上章完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <h2>问卷调查</h2> <hr /> <ol> <li> <h3>你是通过什么途径来到Lai Lab官网的？<h3/> <ol type="A"> <li>微信公众号</li> <li>朋友推荐</li> <li>百度搜索</li> <li>其他途径</li> <br /> </ol> </li> <li><h3>你感觉Lai Lab官网怎么样？<h3/> <ol> <li>很好，功能很多</li> <li>一般般，没有什么突出的地方</li> <li>很差。。。</li> </ol> </li> </li> </body> </html> -
用本章所学打印出注册页面
<!-- 格式为： Lai Lab用户登录系统 账号: 01234567890 密码： *********** --> -------------------- |Lai Lab用户登录系统| -------------------- |账号:|01234567890 | -------------------- |密码:|*********** | -------------------- -
表格边框为1
图片标签
- 任何网站都不能没有图片，一个图片炫酷交互友好的页面就能吸引更多的流量，而要在网站中加入图片,就要使用图片标签，下面就让我们来认识一下图片标签
基本结构
-
图片标签是<img />标签，他的结构为
<img src="" alt="" title="" /> -
其包含3个常用属性
路径属性（src）
-
src是<img />标签的路径属性，这个路径可以是想对路径，也可以是绝对路径，也可以是网络路径
-
src是<img />必要的标签
-
引用同路径的image.png图片
<img src="image.png" />
描述属性（alt，title）
-
alt与title都是<img />的描述属性
-
alt是描述给浏览器看的，只有当图片无法显示是才会看见alt中的内容
-
title是描述给用户看的，当鼠标移动到图片上是，就能看到图片的title内容
<img src="image.png" alt="美丽的图片" title="漂亮的图片" />
-
本章练习
-
本章练习的完整答案将会在下一章的本章练习中给出
-
上章完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <table border="1"> <tr> <td colspan="2">Lai Lab用户登录系统</td> </tr> <tr> <td>账号:</td> <td>01234567890</td> </tr> <tr> <td>密码:</td> <td>**********</td> </tr> </table> </body> </html> -
本章问题：描述alt与title的区别
超链接标签
- HTML最终要的标签（没有之一，本人观点）正是有了超链接（<a>标签），每个网页才会被链接在一起，才会产生复杂的互联网
基本结构
-
超链接标签是<a>标签，基本结构为
<a href="链接地址">文本或图片</a> -
链接地址可以是内部页面地址也可以是网络（外部）链接地址
-
当点击文本或图片时，跳转到链接地址
跳转格式属性(terget)
-
默认跳转方式是在原网页基础上跳转，在某些情况下可能需要新建窗口，就需要用到terget属性，terget为我们提供了4种跳转方式
属性值 说明 _self 原窗口打开（默认） _blank 新窗口打开 _parent 父窗口打开 _top 顶层窗口打开
锚点链接(页内查找)
-
<a>标签除了可以链接外部页面和内部页面，还可以在本页面里锚点链接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <a href="#html">html</a> <a href="#css">css</a> <a href="#javascript">javascript</a> </div> <div id="html"> <p>这是HTML模块</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> <div id="css"> <p>这是CSS模块</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> <div id="javascript"> <p>这是JavaScript模块</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> </body> </html>当我们点击上面的超链接后会发现，网页跳转到了对应的版块
本章练习
-
本章练习的完整答案将会在下一章的本章练习中给出
-
上章问题答案
-
alt是描述给浏览器看的，只有当图片无法显示是才会看见alt中的内容
-
title是描述给用户看的，当鼠标移动到图片上是，就能看到图片的title内容
-
-
本章问题
-
定义“百度一下1”超链接点击本窗口跳转百度
-
定义“百度一下2”超链接点击新建窗口跳转百度
-
表单标签
-
我们前面的知识只能让我们学习静态页面，本节我们将通过学习表单制作动能与用户交互的动态页面
-
从标签来看表单标签分为5种
-
form标签
-
input标签
-
textarea标签
-
select标签
-
option标签
-
-
从外观上，表单可分为8种
- 单行文本框
- 单行密码框
- 单选框
- 复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉菜单
表单标签(<form>)
-
一说起表，大家就会想起几行几列的表格，但是在HTML中，表单和表格本质存在不同，表单是指一些输入框，按钮，复选框，单选框的统称
-
对于初学者，也可以将表单与<div>标签进行类比，先认为表单是储存这些控件的盒子
-
form的几个属性
属性 说明 name 表单名称 method 提交方式 action 提交地址 target 打开方式 enctype 编码方式
表单名称（name）
-
一个网页中可能有多个表单，可以通过name属性对这些表单命名，以便于区分
<form name="MyForm1"> ... </form> <form name="MyForm2"> ... </form>
提交方式（method）
-
在后面我们会了解到数据提交会有post和get两种方式，在表单里面，一般采用post方式提交
<form name="MyForm" method="post"> ... </form>
提交地址（action）
-
声明此表单由谁处理
<form name="MyForm" method="post" action="index.php"> ... </form>
打开方式（target）
-
类比<a>标签，target属性同样也是网页打开方式，属性值也与<a>标签相同
<form name="MyForm" mrthod="post" action="index.php" target="_blank"> ... </form>
编码格式（enctype）
-
enctype规定了表单的编码格式，一般情况下，不需要修改
属性 说明 application/x-www-form-urlencoded 默认的编码方式，把表单域的值处理成URL编码格式 multipart/form-data 用二进制流处理表单中的数据 text/plain 用表单发送邮件
文本框
文本框分为单行文本框和多行文本框
单行文本框
-
在HTML中，单行文本框用<input>标签实现，单行文本框的类别是通过type属性进行区分的
-
使用格式为
<input type="value" /> -
常用的属性有如下几种
值 描述 email 定义用于 e-mail 地址的文本字段 hidden 定义隐藏输入字段 number 定义带有 spinner 控件的数字字段 password 定义密码字段。字段中的字符会被遮蔽。 search 定义用于搜索的文本字段。 tel 定义用于电话号码的文本字段。 text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 url 定义用于 URL 的文本字段。 -
同时文本框还有以下几个常用属性
属性 说明 内容 value 添加内容 任意字符串 size 尺寸大小 数字 maxlength 最大输入长度 数字 placeholder 提示文字 任意字符串 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <input type="email" value="这是电子邮件输入框"/> <br /> <input type="number" value="这是数字输入框"/> <br /> <input type="search" value="这是搜索框"/> <br /> <input type="tel" value="这是电话输入框"/> <br /> <input type="url" value="这是网址输入框"/> <br /> <input type="text" value="这是单行输入框" /> <br /> <input type="password" value="这是密码框" /> </form> </body> </html>
多行文本框（textarea）
-
多行文本框的表示方法为
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
按钮标签
-
按钮标签分为4种
-
使用格式为
<input type="value" />属性值 说明 button 一般按钮 submit 数据提交按钮 reset 重置按钮 -
还有一种如今已很少用了的按钮标签
<button></button><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <input type="button" value="这是按钮" /> <br /> <input type="submit" value="这是提交按钮" /> <br /> <input type="reset" value="这是重置按钮" /> <br /> <button>已经不用了的按钮</button> <br /> </form> </body> </html>
已经不用了的按钮
单选框
-
在HTML中，单选框的表示方式是
<input type="radio" name="组名" value="内容" /> -
注意：想要实现单选框的单选效果，就要把各个控件的name属性相同
-
通过checked属性来表示选中
男 女<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <!--checked表示选中状态--> <input type="radio" name="sex" value="男" checked />男 <!--相当于<input type="radio" name="sex" value="男" checked="checked" />男--> <input type="radio" name="sex" value="女" />女 </form> </body> </html>
复选框
-
复选框的表示方式为
<input type="checkbox" name="组名" value="内容" /> -
与单选框类似，复选框各个控件的name属性相同
-
同样也是通过checked属性来表示选中
苹果 香蕉 梨子<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <input type="checkbox" name="food" value="苹果" checked />苹果 <input type="checkbox" name="food" value="香蕉" />香蕉 <input type="checkbox" name="food" value="梨子" checked />梨子 </form> </body> </html>
下拉列表
-
与无序列表类似，下拉列表是通过<select>标签和<option>标签配合表示的
-
下拉菜单很节省空间
菜单1 菜单2 菜单3<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <select> <option>菜单1</option> <option>菜单2</option> <option>菜单3</option> </select> </form> </body> </html> -
select有系列2个常用属性
属性 说明 multiple 下拉菜单可以选中多项 size 下拉菜单最多显示多少栏
菜单1 菜单2 菜单3 菜单4 菜单5 菜单6 菜单7 菜单8 菜单9 菜单10<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <select multiple> <option>菜单1</option> <option>菜单2</option> <option>菜单3</option> <option>菜单4</option> <option>菜单5</option> <option>菜单6</option> <option>菜单7</option> <option>菜单8</option> <option>菜单9</option> <option>菜单10</option> </select> </form> </body> </html>
菜单1 菜单2 菜单3 菜单4 菜单5 菜单6 菜单7 菜单8 菜单9 菜单10<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <form name="MyForm" mrthod="post" action="index.php" target="_blank"> <select size="5"> <option>菜单1</option> <option>菜单2</option> <option>菜单3</option> <option>菜单4</option> <option>菜单5</option> <option>菜单6</option> <option>菜单7</option> <option>菜单8</option> <option>菜单9</option> <option>菜单10</option> </select> </form> </body> </html>
本章练习
-
上章完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <a href="http://www.baidu.com" target="_self">百度一下1</a> <a href="http://www.baidu.com" target="_blank">百度一下2</a> </div> </body> </html>
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
