前端1——html笔记

Jin_chenlang

已于 2022-07-03 18:10:54 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端 html html5

于 2022-06-17 01:21:33 首次发布

本文链接：https://blog.csdn.net/weixin_53323848/article/details/125307914

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括网页的定义、HTML的结构和语法、浏览器内核的作用，以及Web标准的重要性。重点讲解了HTML标签的使用，如标题标签、段落标签、换行标签、图像标签、超链接标签、表格标签和列表标签。此外，还提到了表格的结构、注释和特殊字符。最后，通过实例展示了如何创建一个小说排行榜的HTML页面，强调了HTML在布局和展示数据方面的应用。

摘要由CSDN通过智能技术生成

文章目录

1、网页

1.1 什么是网页

网站：在因特网上根据一定规则，使用HTML等制作的用于展示特定内容的相关的网页集合。
网页：是网站中的一“页”，通常是HTML格式的文件，它通过浏览器来阅读。

网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此俗称为HTML文件。

1.2 什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标记标签（markup tag）。（图片标签，文字标签。。。）

举个小例子：
在记事本输入：
在这里插入图片描述
把后缀改成.html：

打开就可以看到我们想要显示的图片啦：

所谓“超文本”，有两层含义：

它可以加入图片、声音、动画、多媒体等内容，超越了文本限制
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

1.3 网页的形成

网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的。
在这里插入图片描述

2、浏览器

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
在这里插入图片描述
目前国内一般浏览器都会采用Webkit/Blink内核，比如360、UC、QQ、搜狗等。

3、Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准集合。W3C（万维网联盟）是国际最著名的标准化组织。

3.1 为什么需要Web标准

浏览器不同，它们显示页面或者排版就有些许差异。通过Web标准可以使开发人员写出来的界面更标准、统一。

3.2 Web标准的构成（***）

主要包括：结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
在这里插入图片描述
Web提出的最佳体验方案：结构、样式、行为相分离。
简单来说：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

4、HTML标签

4.1 HTML语法规范

4.1.1 基本语法

HTML标签由尖括号包围关键词，如：

<html>

HTML标签大部分成对出现，如：

<html>和</html>  //我们称为双标签。第一个标签是开始标签，第二个标签是结束标签

有些特殊标签必须是单标签（极少情况），如：

<br />   //我们称为单标签。

4.1.2 标签关系

双标签可以分为两类：包含关系和并列关系

包含关系（父子关系）：

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

并列关系（兄弟关系）：

<head> </head>
<body> </body>

4.2 HTML基本结构标签

每个网页都有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
(HTML网页也叫HTML文档)
在这里插入图片描述

<html>
	<head>
		<title>我的第一个界面</title>
	</head>
	<body>
		文档主体
	</body>
</html>

4.3 开发工具

以Visual Studio Code（VSCode）为例。
新建文件后，先保存文件，注意后缀为.html。然后键入！就会自动填充骨架标签。写好文档后，快捷键Alt+B可以在默认浏览器预览效果。（注意：需要安装open in browser插件）
在这里插入图片描述
建议安装的其他插件：
auto rename tag：可以在改开始标签或结束标签时同时修改一对儿。

VSCode工具生成骨架标签新增代码

1. < !DOCTYPE>标签
文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页

// 当前页面采用的是HTML5版本来显示网页
<!DOCTYPE html>

注意：

< !DOCTYPE>声明位于文档中的最前面位置，处于< html>标签之前
< !DOCTYPE>不是一个HTML标签，就是文档类型声明标签

2. lang语言种类
用来定义当前文档显示的语言

<html lang="en">

en定义语言为英语
zh-CN定义语言为中文

其实对于文档显示来说，定义成en的文档也可以显示中文，定义为zh-CN的文档也可以显示英文。
这个属性对浏览器还有搜索引擎（百度、谷歌等）有一定作用，可以显示网页翻译。

3. 字符集
字符集（Character set）是多个字符的几个。以便计算机能够识别和存储各种文字。
在< head >标签内，可以通过< meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8" />

charset常用的值有：GB2312（简体中文）、BIG5（繁体中文）、GBK（简体+繁体中文）和UTF-8，其中UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符。

4.4 HTML常用标签

4.4.1 标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.4.2 标题标签< h1 > - < h6 > （***）

< h1>：一级标题
< h2>：二级标题
… …
注意是双标签

<h1> 我是一级标题 </h1>

标签语义：作为标题使用，并且依据重要性递减

特点：

加了标题的文字字号会变大加粗
一个标题独占一行

在这里插入图片描述

4.4.3 段落标签和换行标签（***）

1. < p>：用于定义段落（paragraph）

<p> 我是一个段落标签 </p>

（alt+z可自动换行）

标签语义：将HTML文档分割为若干段落

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙

预览：

2. < br />：换行标签，用于强制换行，单标签（break）

<br />

标签语义： 强制换行
特点：

< br />是单标签
< br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些间距

在这里插入图片描述
预览：

体育新闻案例：

<body>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
        
    <h4>数据统计：水花兄弟合砍61分</h4>
        
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>

    <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
        
    <h4>兄弟对决升级:小库里给哥哥造成压力</h4>
        
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟，在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
        
    <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>

    <p>作者：jcl<br />
    2022.06.16</p>
</body>

效果：
在这里插入图片描述

4.4.4 文本格式化标签

标签语义： 突出重要性，比普通文字更重要
在这里插入图片描述

4.4.5 < div>和< span>标签

< div>和< span>是没有语义的，它们就是一个盒子，用来装内容。可以来布局我们的网页。(可以理解为“文本框”)

<div> 这是头部 </div>
<span> 今日价格 </span>

div是division的缩写，表示分割、分区。
span意为跨度、跨距。

特点：

< div>标签用来布局，但是一行只能放一个< div>。大盒子。
< span>标签用来布局，一行上可以放多个< span>。小盒子。

效果：

4.4.6 图像标签和路径（***）

1. 图形标签
< img>标签用来定义HTML页面中的图像。单标签。

<img src="图像URL" />

src是< img>标签的必须属性，它用于指定图像文件的路径和文件名。

图像标签的其他属性：
在这里插入图片描述

修改宽度（width）和高度（height）时，可以只修改一个，另一个属性会等比缩放。
一般不会用border来设定图像的边框，而是使用CSS设置。

图像标签属性注意点：

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即key = “value” 的格式，属性 = “属性值”
注意 alt 和 title 的区别

2. 路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：相对路径、绝对路径

相对路径：图片相对于HTML页面的位置

相对路径是从代码所在的这个文件出发，去寻找目标文件的。
绝对路径：目录下的绝对位置，直接到达目标位置。
不方便，因为每个电脑的文件夹不一样。
若我们想直接引用网页上的图也可以在图上右键，复制图片地址，然后插入VSCode。这个图片地址是网络中唯一存在的。

在这里插入图片描述

4.4.7 超链接标签（***）

在HTML标签中，< a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

1. 链接的语法格式
文字和图像具有了超链接功能，点击文本或图像就可以去往另外一页了。

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性的作用如下：
在这里插入图片描述
对于target属性来说，_self表示新网页取代当前网页，_blank表示在新的窗口打开链接网页。

2. 链接分类

外部链接，如：

<a href="http://www.baidu.com">百度</a>

内部链接：网站内部页面之间的相互链接。直接链接内部页面的名称即可，如：

<a href="index.html">首页</a>

空链接：如果当时没有确定链接目标时，用 # 暂时代替，等有了地址再替换。如：

<a href="#">还没做完</a>

下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件。如：

<a href="myfav.zip">my favorite picture</a>

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。如：

<a href="http://baidu.com"><img src="myfav.jpg" width="500" /></a>

效果汇总：
在这里插入图片描述

锚点链接：点击链接可以快速定位到页面的某一个位置。
步骤1：在链接文本的href属性中，设置属性值为#名字的形式，如：<a href="#two">第2集</a>
步骤2：找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>
如果你的目标位置标签不是标题，写<h id="two">第二集介绍</h>

在这里插入图片描述

4.5 HTML中的注释和特殊字符

4.5.1 注释

<!--我是注释-->
快捷键：Ctrl+/

4.5.2 特殊字符

在HTML页面中，一些特殊字符很难或者不方便直接使用，此时我们可以使用下面的字符来替代。
在这里插入图片描述

4.6 表格标签

4.6.1 表格的主要作用

用于显示、展示数据，可读性好，结构清晰。

4.6.2 表格的基本用法

<table>
	<tr>
		<td>表格里的文字</td>
		...
	</tr>
	...
</table>

< table> </ table> 用于定义表格的标签
< tr> < /tr> 用于定义表格中的行，必须嵌套在< table> </ table> 中
< td> < /td> 用于定义表格中的单元格，必须嵌套在< tr> < /tr>中
字母 td 指表格数据（table data），即数据单元格的内容。

快速方法：

<table>tr*5>td*3 + Tab键
快速创建一个五行三列表格

4.6.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
< th> 标签表示HTML表格的表头部分（table head）

<table>
	<tr>
		<th>姓名</th>
		...
	</tr>
	...
</table>

4.6.4 表格相关属性

表格标签属性在我们实际开发中不常用，后面通过CSS来设置。
在这里插入图片描述

综合案例——小说排行榜

目标效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>  
<tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="下降.jpg" width="15"></td>
        <td>345</td>
        <td>123</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td><img src="下降.jpg" width="15"></td>
        <td>124</td>
        <td>675432</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>西游记</td>
        <td><img src="上升.jpg" width="30"></td>
        <td>212</td>
        <td>7654</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>东游记</td>
        <td><img src="上升.jpg" width="30"></td>
        <td>23</td>
        <td>75645</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td><img src="下降.jpg" width="15"></td>
        <td>121</td>
        <td>7676</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>6</td>
        <td>水浒传</td>
        <td><img src="上升.jpg" width="30"></td>
        <td>576576</td>
        <td>1231421</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>7</td>
        <td>三国演义</td>
        <td><img src="上升.jpg" width="30"></td>
        <td>234</td>
        <td>7686</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>   
</body>
</html>

效果：
在这里插入图片描述

4.6.5 表格结构标签

使用场景：因为表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两部分。
< thead> 标签 —— 表格的头部区域
< tbody> 标签 —— 表格的主体区域

注意：
不要混淆< th> 和 < thead>，< th>是一个单元格，< thead>是一个区域。

4.6.6 合并单元格

特殊情况下，可以把多个单元格合并成一个单元格。

合并方式：
（1）跨行合并：rowspan=“合并单元格的个数”

（2）跨列合并：colspan=“合并单元格的个数”
在这里插入图片描述

目标单元格（在哪儿写合并代码）
（1）跨行：最上侧单元格为目标单元格，写合并代码
（2）跨列：做左侧单元格为目标单元格，写合并代码
合并单元格步骤（三步）
（1）确定是跨行合并还是跨列合并
（2）找到目标单元格，写上合并方式=合并单元格的数量，比如：< td colspan=“2”> < /td>
（3）删除多余单元格

4.7 列表标签

列表用来布局。
列表最大的特点是整齐、整洁、有序，它作为布局会更加自由方便。
根据使用场景不同，列表可分为：无序列表、有序列表和自定义列表。

4.7.1 无序列表（***）

< ul> 标签用于表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 < li> 标签定义。

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ul>

例：
在这里插入图片描述
显示效果：

无序列表的各个列表项之间没有顺序级别之分，是并列的；
< ul> < /ul>中间只能嵌套< li> < /li>，不能输入其他标签或文字；
< li> < /li>之间相当于一个容器，可以容纳所有元素；
无序列表会带有自己的样式属性（小黑点），但在实际使用时，我们会使用CSS来设置。

4.7.2 有序列表

如果每个列表项有顺序要求，就用有序列表。
在HTML标签中，< ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 < li> 来定义列表项。

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ol>

例：
在这里插入图片描述
显示效果：

< ol> < /ol>中间只能嵌套< li> < /li>，不能输入其他标签或文字；
< li> < /li>之间相当于一个容器，可以容纳所有元素；
有序列表会带有自己的样式属性（数字），但在实际使用时，我们会使用CSS来设置。

4.7.3 自定义列表（***）

自定义列表使用场景：自定义列表经常用于对术语或名词进行解释和描述，定义列表的列表项没有任何项目符号（就是一个大点，其余小点是对这一大点的解释）

在HTML标签中，< dl>标签用于定义描述列表（或定义列表），该标签会与 < dt>（定义项目名字）（大点）和 < dd>（描述每一个项目/名字）（小点）一起使用。

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
</dl>

例：
在这里插入图片描述
显示效果：

< dl> < /dl> 里面只能包含 < dt> 和 < dd>；
< dt> 和 < dd> 个数没有限制，经常是一个 < dt>对应多个 < dd>。

4.8 表单标签

使用场景举例：
在这里插入图片描述

4.8.1 为什么需要表单

使用表单的目的是为了收集用户信息。
在网页中，我们需要与用户进行交互，收集用户资料，此时就需要表单。

4.8.2 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息三个部分组成。
在这里插入图片描述

表单域
表单域是一个包含表单元素的区域。
在HTML标签中，< form> 标签用于定义表单域，以实现用户信息的收集和传递。
< form> 会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

常用属性：
在这里插入图片描述

表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

< input>输入表单元素
< input> 标签用于收集用户信息。
在 < input> 标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

< input /> 标签为单标签，type属性设置不同值来指定不同的控件类型。
在这里插入图片描述

除了type属性之外，< input> 标签还有很多其他属性，其常用属性如下：
在这里插入图片描述
单选按钮radio必须有相同的name属性才能实现多选一的效果：

性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女

注意：
（1）name和value两个属性值是每个表单元素都有的属性值，主要给后台人员使用；
（2）name表单元素的名字，要求单选按钮和复选框要有相同的name值。
（3）checked属性主要针对于单选按钮和复选框，主要作用一打开页面就可以默认选中某个选项；
（4）maxlength属性是用户最多可以在表单元素中输入的字符数。

< label>标签
< label> 标签为input元素定义标注（标签）。
使用场景：< label> 标签用于绑定一个表单元素，当点击< label> 标签内文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。（用户就不用非得对准那个小按钮才能选择了，直接点字就能选择）

< label>标签将想要点击的字包住。

/!-- for和id对应相同名字来建立连接--/
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：< label> 标签的for属性应当与相关元素的id属性相同。

例：

<label for="username">用户名：</label><input type="text" id="username">

这样用户点击“用户名”三个字就能输入了，不用非得点击输入框。

select下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select> 标签控件定义下拉列表。

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

（1）< select> 中至少包含一对 < option> 。
（2）在< option> 中定义selected="selected"时，当前选项即为默认选中项

textarea文本域元素
使用场景：当用户输入内容较多的情况下（比如：留言、意见等等），我们就不能使用文本框表单了，此时使用< textarea> 标签。

<textarea rows="3" cols="20">
	文本内容
</textarea>

（1）通过< textarea> 可以轻松创建多行文本输入框
（2）cols=“每行的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。

综合案例：注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世纪佳缘</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <form>
    <table width="650">
    <!-- 第一行 -->
    <tr>
        <td>性别</td>
        <td><input type="radio" id="nan" name="sex"><label for="nan"><img src="男.png" width="15">&nbsp男</label> &nbsp
        <input type="radio" id="nv" name="sex"><label for="nv"><img src="女.png" width="20">&nbsp女</label><br></td>
    </tr>
    <!-- 第二行 -->
    <tr>
        <td>生日</td>
        <td><select>
            <option>--请选择年--</option>
            <option>1998</option>
            <option>1999</option>
            <option>2000</option>

        </select>
        <select>
            <option>--请选择月--</option>
            <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>
            
        </select>
        <select>
            <option>--请选择日--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select></td>
    </tr>
    <!-- 第三行 -->
    <tr>
        <td><label for="diqu">所在地区</label></td>
        <td><input type="text" id="diqu"></td>
    </tr>
    <!-- 第四行 -->
    <tr>
        <td>婚姻状况</td>
        <td>
            <input type="radio" name="marriage" id="weihun" checked><label for="weihun">&nbsp未婚</label>
            <input type="radio" name="marriage" id="yihun"><label for="yihun">&nbsp已婚</label>
            <input type="radio" name="marriage" id="lihun"><label for="lihun">&nbsp离婚</label>
        </td>
    </tr>
    <!-- 第五行 -->
    <tr>
        <td><label for="xueli">学历</label></td>
        <td>
            <input type="text" id="xueli">
        </td>
    </tr>
    <!-- 第六行 -->
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" name="favtype" id="wumei"><label for="wumei"> 妩媚的</label>
            <input type="checkbox" name="favtype" id="keai"><label for="keai"> 可爱的</label>
            <input type="checkbox" name="favtype" id="wenrou"><label for="wenrou"> 温柔的</label>
            <input type="checkbox" name="favtype" id="daimeng"><label for="daimeng"> 呆萌的</label>
            <input type="checkbox" name="favtype" id="chengshu"><label for="chengshu"> 成熟的</label>
        </td>
    </tr>
    <!-- 第七行 -->
    <tr>
        <td>自我介绍</td>
        <td>
            <textarea name="" id="" cols="30" rows="3">自我介绍</textarea>
        </td>
    </tr>
    <!-- 第八行 -->
    <tr>
        <td></td>
        <td><input type="submit" value="免费注册"></td>
    </tr>
    <!-- 第九行 -->
    <tr>
        <td></td>
        <td><input type="checkbox" id="tongyi" checked><label for="tongyi">我同意注册条款和会员加入标准</label></td>
    </tr>
    <!-- 第十行 -->
    <tr>
        <td></td>
        <td><a href="#">我是会员，立即登录</a></td>
    </tr>
    <!-- 第十一行 -->
    <tr>
        <td></td>
        <td>
            <h4>我承诺</h4>
            <ul>
               <li>年满18岁、单身</li>
               <li>抱着严肃的态度</li> 
               <li>真诚寻找另一半</li> 
            </ul>
        </td>
    </tr>
</form>    
</body>
</html>