HTML入门与进阶简洁笔记好（待补充）

老年人非常好

于 2022-09-11 17:30:53 发布

阅读量375

点赞数

文章标签： html css 前端

原文链接：https://blog.csdn.net/wuyxinu/article/details/103515157

版权

HTML是什么？

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

CSS，全称“（层叠样式表）”。

JavaScript是一门脚本语言。

Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。

Ajax是前后端交互的技术，主要实现在前端。（不懂？没关系，我们在Ajax教程中会讲解到）。

SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。

HTML的基本标签：

表1 <head>内部标签
<head>内部标签	说明
<title>	定义网页的标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

<head>的内部标签也非常重要，在前期大家只需要感性认知就可以。

body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。

**表1 段落与文字标签**
标签	语义	说明
<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

**表2 文本格式化标签**
标签	语义	说明
<strong>	strong（加强）	加粗
<em>	emphasized（强调）	斜体
<cite>	cite（引用）	斜体
<sup>	superscripted（上标）	上标
<sub>	subscripted（下标）	下标

网页特殊符号

网页特殊符号只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。

自闭合标签

HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。

一般标签可以在开始符号和结束符号之间插入其他标签或文字。

自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。

(1)、一般标签

举例：<body></body>

(2)、自闭合标签

举例：<br/>、<hr/>

块元素和行内元素

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

常见块元素有：h1~h6、p、hr、div等。

常见行内元素有：strong、em、span等。

**标签语义对照表**
标签名	英文全称	中文解释
div	division	分割（块元素）
span	span	区域（行内元素）
p	paragraph	段落
ol	ordered list	有序列表

ul	unordered list	无序列表
li	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition description	定义描述

h1~h6	header1 ~header6	标题1~标题6
hr	horizontal rule	水平线
a	anchor	锚点，超链接
strong	strong	强调（粗体）
em	emphasized	强调（斜体）

sup	superscripted	上标
sub	subscripted	下标
br	break	换行
fieldset	fieldset	域集
legend	legend	图例
caption	caption	（表格、图像等）标题

thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格
td	td	表身单元格

列表

3种列表的语义记忆：

标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

**表1 有序列表type属性**
type属性值	列表项的序号类型
1	数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

学习了CSS入门教程之后，有序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性。

**表1 无序列表type属性**
type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

学习了CSS之后，无序列表列表项符号由list-style-type定义，到时候应该摒弃type属性。

定义的列表

语法：

<dl>

<dt>定义名词</dt>

<dd>定义描述</dd>

……

</dl>

说明：

<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。

HTML学习中的误区

学习HTML的目的就是在你需要的地方用到符合语义的标签，把标签用“对”这才是HTML学习的目的。例如一段文字，应该使用p标签，而不是使用div标签或者其他标签。

网页语义结构良好，对于搜索引擎来说也是极为重要的一点。

表格语义记忆

通过语义化记忆表格标签：

表1 表格基本标签
标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格

表2 表格结构标签
标签	语义	说明
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。语法为：

<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

</table>

说明：

<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

表格完整结构

表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。

表格语义化之后，使得代码更清晰和更利于后期维护。

<table>

<caption>表格标题</caption>



<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>



<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tbody>



<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tfoot>

</table>

说明：

<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。

合并行和合并列

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

(1)、合并行：

语法：

举例：

合并列

语法：

举例：

图像

(一)、图像标签

在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。

语法：

表1 img标签常用属性
属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到，所以只需要掌握这两个属性即可，大家要是在别的书籍上看到<img>还有别的属性，你不用去记忆它们。

相对路径和绝对路径

相对路径，指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。

绝对路径，指的是文件的完整路径。

图片格式好：
虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。

1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。

2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。

3、GIF格式图片图像效果很差，但是可以制作动画。

链接：

超链接使用a标签，语法如下：

表1 <a>标签target属性
target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

超链接根据链接对象的不同分为：

（1）外部链接

（2）内部链接：①内部页面链接；②锚点链接；举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>锚点链接</title>

</head>

<body>

<div>

<a href="#music">推荐音乐</a><br />

<a href="#movie">推荐电影</a><br />

<a href="#article">推荐文章</a><br />

</div>

……<br />

……<br />

……<br />

……<br />

……<br />

……<br />

<div id="music">

<h3>推荐音乐</h3>

<ul>

<li>林俊杰-被风吹过的下图</li>

<li>曲婉婷-在我的歌声里</li>

<li>许嵩-灰色头像</li>

</ul>

</div>

……<br />

……<br />

……<br />

……<br />

……<br />

……<br />

<div id="movie">

<h3>推荐电影</h3>

<ul>

<li>蜘蛛侠系列</li>

<li>钢铁侠系统</li>

<li>复仇者联盟</li>

</ul>

</div>

……<br />

……<br />

……<br />

……<br />

……<br />

……<br />

<div id="article">

<h3>推荐文章</h3>

<ul>

<li>朱自清-荷塘月色</li>

<li>余光中-乡愁</li>

<li>鲁迅-阿Q正传</li>

</ul>

</div>

</body>

</html>

锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：

表单：

表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

我们通过一张表单来把所有input标签囊括：

input标签表单：

大部分表单都是用input标签完成的。

语法：

说明：

表1中的表单都是使用input标签，所不同的就是type属性值不同。

textarea标签表单

(1)、多行文本框

语法：

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

表现形式如下：

3种文本框对比：

单行文本框和密码文本框使用<input>标签，而多行文本框使用<textarea>标签。

①单行文本框：

语法：

①密码文本框：

语法：

①多行文本框：

语法：

<textarea rows="行数" cols="列数">多行文本框内容</textarea>；

select和option

下拉列表由<select>标签和<option>标签配合使用。

语法：

<select multiple="mutiple" size="可见列表项的数目">

<option value="选项值" selected="selected">选项显示的内容</option>

……

<option value="选项值">选项显示的内容</option>

</select>

多媒体
(一)、插入音频、视频和flash：
在网页中插入音频、视频和flash都是使用embed标签。

语法：

说明：

多媒体文件地址可以是相对地址，也可以是绝对地址。

width和height使用px作为单位。

插入背景音乐：
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。

设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。

语法：

说明：

loop="2"表示重复2次，loop="infinite"表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放。

浮动框架iframe简介

由于HTML5已经舍弃了frameset标签（框架集标签），所以在这一章，我们不讲解框架集frameset，只讲解一个标签：iframe标签（浮动框架标签）。

<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。

语法：

src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。

在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<div id="main">

<h3>绿叶学习网</h3>

<iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>

</div>

</body>

</html>

在浏览器预览效果如下；。。。。。。

iframe标签

分析：

在这段代码中，设置了iframe的src属性值为“http://www.baidu.com”（百度首页地址），宽width为400px，高height为300px。

大家在浏览器查看到该页面嵌入了一个子页面，而这个子页面就是百度的首页。

设置浮动框架是否显示滚动条scrolling：

对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。

语法：

说明：

scrolling属性取值如下：

scrolling属性值
scrolling属性值	说明
auto	默认值，整个表格在浏览器页面中左对齐
yes	总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no	在任何情况下都不显示滚动条

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<div id="main">

<h3>绿叶学习网</h3>

<iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="no"></iframe>

</div>

</body>

</html>

在浏览器预览效果如下；。。。。。。

iframe标签

分析：

大家可以看到，浮动框架iframe的滚动条都消失了。大家可以在“在线测试工具”中修改一下scrolling属性值，看看不同属性值下有什么不同的效果。

浮动框架，说白了就是在一个页面嵌入一个或多个子页面，这样大家好理解了吧。

进阶内容好：

1、HTML、XHTML和HTML5

很多新手往往分不清HTML、XHTML和HTML5,这一节给大家详细讲解一下这三者的关系和区别。

（一）HTML 和 XHTML

HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的主要语言。

XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言)，称之为更严格、更纯净的HTML 。

HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML

XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML主要区别如下。

XHTML标签必须闭合。

在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标签也需要闭合，例如<br>要写成<br/>。

错误写法：<p>欢迎来到绿叶学习网

正确写法：<p>欢迎来到绿叶学习网</p>

XHTML标签以及属性必须小写。

在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。不过标签的属性值可以大写。

错误写法：<Body><DIV></DlV></Body>

正确写法：<body><div></div></body>

XHTML标签属性必须用引号。

在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。

错误写法：<input id=txt type=text/>

正确写法：<input id="txt" type="text"/>

XHTML标签用jd属性代替name属性。

在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。

错误写法：<div name="wrapper"></div>

正确写法：<div id="wrapper"></div>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>

HTML 5：

HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。

对于HTML 5中的新技术，在此不做详细介绍。单纯从新增的标签上来看，HTML 5有以下几个特点。

文档类型说明：

基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地简化了。

XHTML文档声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>

HTML5文档声明如下：

<!DOCTYPE html>

标签不再区分大小写

<div>绿叶学习网</DIV>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。

允许属性值不加引号

<div id=wrapper style=co1or: red> 绿叶学习网 </div>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。

允许部分属性的属性值省略

在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符合HTML 5规范的：

<input type=ntext" readonly/>

<input type="checkbox" checked/>

上面两句代码等价于：

<input type="textM readonly="readonly"/>

<input type="checkbox" checked="checked"/>

在HTML 5中，可以省略属性值的属性如表所示。

表1 -1 HTML5中可以省略属性值的属性：

省略形式	等价于
checked	checked=nchecked"
readonly	readonly="readonly"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"

noshade	noshade="noshade"
nowrap	nowrap="nowrap"
selected	selected="selected"

disabled	ciisabled="disableci"
multiple	multiple="multiple"
noresize	noresize="disabled"

一句话概括 HTML、XHTML 和 HTML 5 就是：XHTML 是HTML的过渡版，HTML5是HTML的升级版。

div和span：

div和span没有任何语义，这两个标签一般都是配合CSS来定义元素样式的。

div和span区别如下：

(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。

(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。

其实，除了 div和span外，还有一个label标签。div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>

在这个例子中，我们想要对“视觉化思考”这几个文字加粗或者改变颜色，此时可以使用span包含文字，然后再进行样式修改。事实上，span标签往往都是用来配合CSS来修饰元素的。

id和class：

id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。

id 属性：
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。

我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。

class属性：
class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。

如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。

注意，对于一个元素而言，我们可以定义多个classo 一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。

浏览器标题栏小图标：

想要实现这个效果，我们只需要在head标签添加一个link标签即可。

语法：

<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>

说明：

rel和type这两个属性的取值是固定形式。href属性取值为小图标的地址。

这里注意一下，小图标格式是.ico,而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作，我们可以搜索一下“在线icon" ；

语义化：
（一）简介：

在实际开发过程中，很多人由于对标签语义不熟悉，常常用某一个标签代替另外一个标签来实现某些效果。

编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是"paragraph",标记的是一个段落；hl标签，表示“headerl”,标记的是一个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。

编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。

标题语义化

h1 - h6是标题标签，h表示“header”。h1~ h6在HTML语义化中占有极其重要的地位。 h1 ~ h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。

对于标题h1 ~ h6的语义化，我们需要注意以下四个方面。

（1）一个页面只能有一个h1标签。

（2）hl ~ h6之间不要断层。

（3）不要用h1 ~ h6来定义样式。

（4）不要用div来代替h1 ~ h6.

（5）不要用h1~h6来定义样式。

图片语义化

在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面来深入探讨一下。

（1） alt属性和title属性。

（2） figure 元素和 figcaption 元素。

alt属性是img标签必需属性，给捜索引擎看的，一定要添加；title属性也用于图片描述给用户看的，可加可不加。

<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">

说明：

figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。（好像见的比较少吧）。

表格语义化

在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。

font-weight属性值	说明
normal	默认值,正常体
lighter	较细
bold	较粗
bolder	很粗（效果跟bold差不多）

表2-1	表格标签
标签		说明
table		表格
caption		标题
thead		表头（语义划分）
tbody		表身（语义划分）
tfoot		表尾（语义划分）
tr		行
th		表头单元格
td		表格单元格

说明：

thead, tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚。很多人容易忽略这三个标签。

表单语义化：

（1）label 标签。

（2）fieldset 标签和 legend 标签。

label 标签

W3C规范定义，label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。

语法：

<label for=""> 说明性文字 </label>

说明：

label标签for属性值为所关联的表单元素的id,例如<input id="name" type="text"/>, 则其所关联的label标签应该为<label for="name"></lable>

label标签的for属性有两个作用。

①语义上绑定了 label元素和表单元素。

②增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会获得焦点。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<input id="Radio1" type="radio"/>单选框
<input id="Checkbox1" type="checkbox" />复选框
</div>
<hr />
<div>
<input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
<input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>
</div>
</body>
</html>

分析；

从这个例子可以看到，在第一组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。在第二组表单中，我们可以点击单选框来选中单选框，并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的效果。

其实，这就是label标签for属性的作用。for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。事实上，label标签有两种关联方式，我们拿复选框来说，下面两行代码是等价的。

<input id="cbk" type="checkbox" /><label for="cbk"> 复选框 </label>
<label>复选框<input id="cbk" type="checkbox"/></label>

对于图中的效果，我们使用label标签来增强语义化，修改后的代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
</head>

<body>
<form action="index.aspx" method="post">
<div>登录绿叶学习网</div>
<p>
<label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
</p>
<label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id= "remember-me" name="remember-me"/> <label for="remember-me"> 记住我 </label>
<input type="submit" value="登录"/>
</form>
</body>

</html>

fieldset 标签和 legend 标签：

语法：

<fieldset>

<legend> 表单组标题 </legend>

</fieldset>

说明：

使用fieldset和legend标签有两个作用。

（1）增强表单的语义。

（2）可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。

对于图中的效果，我们使用fieldset和legend这两个标签来增强语义化，修改后的代码如下。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
</head>

<body>
<form action="index.aspx" method="post">
<fieldset>
<legend>登录绿叶学习网</legend>
<p>
<label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
</p>
<label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" /> <label for="remember-me"> 记住我 </label>
<input type="submit" value="登录" />

</fieldset>
</form>
</body>

</html>