0%

HTML基础

HTML简介

网页

什么时网页?

网站是指在互联网上根据一定的规则,使用HTML等制作的作用于展示特定内容相关的网页集合

网页时网站中的一“页”,通常时HTML格式的文件,它要通过浏览器来阅读。

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

什么时HTML?

HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言.

HTML不是一种编程语言,而是一种标记语言(markup lanuage)

标记语言时一套标记标签(markup tag).

html

所谓的超文本,有2层含义:

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

网页的形成

网页是由元素组成的,这些元素时利用html标签描述出来,然后通过浏览器解析来显示给用户看

网页的形成

前端人员开发代码———-> 浏览器显示代码(解析、渲染)————> 生产最后的Web页面

小结

网页是由图片、链接、文字、声音、视频等元素组成的,其实就是一个html文件(后缀名为html)

网页生成制作: 前端人员书写HTML文件,然后浏览器打开,就能看到了网页

HTML:超文本标记语言,用来制作网页的一门语言,由标签组成的,比如 图片标签 链接标签 视频标签等….

常用的浏览器

网页时通过浏览器来展示的,关于浏览器有一下两点需要了解:

  1. 常用浏览器
  2. 浏览器内核

常用的浏览器

浏览器时网页显示、运行的平台。常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safai和Opera等,平时称为五大浏览器。

五大浏览器

产看浏览器市场份额: http://tongji.baidu.com/data/browser

浏览器内核

浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
chrome/Opera Blink chrome/opera浏览器内核。Blink其实时WebKit的分支

目前国内一般浏览器都会采用Webkit/Blink内核,如360、UC、QQ、搜狗等。

Web标准(重点)

Web标准时由W3C组织和其他标准化组织指定的一些列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

为什么要有web标准

浏览器不同,它们显示页面或排版就有些许差异

统一标准

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外、还有以下优点

  • 让Web的发展前景更广阔
  • 内容能被更广泛的设备访问
  • 更容易被搜索引擎搜索
  • 降低网站流量费用
  • 使网站更易于维护
  • 提高页面浏览速度

Web标准的构成

主要包括结构(Structure)、表现(Presentation)、和行为(Behavior)三个方面

标准 说明
结构 结构式对于网页元素进行整理和分类,现阶段主要学的式HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为 行为式指网页模型的定义及交互的编写,现阶段主要是JavaScript

Web标准提出的最佳体验方案: 结构、样式、行为相分离。

简单理解: 结构写到HML文件中,表现写到CSS文件中,行为写道JavaScript文件中

Web标准构成

HTML标签(上)

HTML语法规范

基本语法概述

  1. HTML标签是由尖括号包围的标签词,例如\
  2. HTML标签通常是成对出现的,例如\和\,我们称为双标签.标签对中的第一个标签是开始标签,第二个标签是结束标签。
  3. 有些特殊标签必须是歌单标签(极少情况),例如\
    ,我们称为单标签

标签关系

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

包含关系

1
2
3
<head>
<title>Title</title>
</head>

父子关系

并列关系

1
2
<head></head>
<body></body>

兄弟关系

HTML基本结构标签

第一个HTML网页

每个网页会有一个基本的结构标签(也成为骨架标签),页面内容也是在这些基本标签上书写。

HTML页面也成为HTML文档

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>我的第一个页面</title>
</head>
<body>
及时行乐
</body>
</html>
标签名 定义 说明
\\ HTML标签 页面中最大的标签,我们称为根标签
\\ 文档的头部 注意在head标签中我们必须要设置的标签是title
\\ 文档的标题 让页面拥有一个属于自己的网页标题
\\ 文档的主体 元素包含文档的所有内容,页面内容 基本都是放到body里面的

HTML文档的后缀必须是.html或.htm,浏览器的作用是读取HTML文档,并以网页的形式显示出它们,此时,用浏览器打开这个网页,我们就可以预览我们写的第一个HTML文件了。

基本结构标签总结

基本结构标签总结

网页开发工具

网页开发工具

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

<!DOCTYPE>标签

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

1
<!DOCTYPE html>

这句话的意思就是:当前页面采取的是HTML5版本来显示网页

注意:

  1. <!DOCTYPE>声明位置位于文档的最前面位置,处于\标签之前
  2. <!DOCTYPE>不是一个HTML标签,他是文档类型声明标签
lang语言

用来定义当前文档显示的语言。

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

简单来说定义为en就是英文网页,定义为zh-CN就是中文网页

其实对于文档显示来说,定义成en的文档也可以显示中文,定义zh-CN的文档也可显示英文

这个属性对浏览器和搜索引擎(百度。谷歌等)还是有作用的

charset字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字

<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

1
<meta charset="UTF-8"/>

charset常用的值有: GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符

HTML常用标签

标签语义

学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签用来干嘛的。

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

没有语义

有语义

标题标签<h1>-<h6>(重要)

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个登记的网页标题

<h1>-<h6>

1
<h1>我师一级标题</h1>

单词head的缩写,意为头部、标题

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

特点:

  1. 加了标题的文字变的加粗,字号也会依次变大
  2. 一个标题独占一行

段落标签和换行标签(重要)

在网页中,要把文字有理由条地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将这个网页分为若干个段落

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

单词paragraph的缩写,意为段落。

标签语义: 可以把HTML文档分割为若干段落

特点:

  1. 文本在一个段落中会根据浏览器窗口大小自动换行

在HTML中,一个段落中文字会从左到右一次排序,直到浏览器窗口右端,然后才自动换行,如果希望某段文本强制换行显示,就需要用到换行标签</br>

1
</br>

标签语义: 强制换行

特点:

  1. </br>是一个单标签
  2. </br>标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直间距

文本格式化标签

在网页中,有时需要为文字设置粗体斜体下划线等效果,这是就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示

标签语义: 突出重要性,比普通文字更重要

语义 标签 说明
加粗 \\</storong>或者\\ 更推荐使用\标签加粗 语义更强烈
倾斜 \\或者\\ 更推荐使用\标签倾斜 语义更强烈
删除线 \\或者\\ 更推荐使用\标签删除 语义更强烈
下划线 \\或者\\ 更推荐使用\标签下划线 语义更强烈

<div><span>标签

<div>是没有语义的,他们就是一个盒子(容器),用来装内容(元素)的

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

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

特点

  1. <div>标签用于布局,但是一行只能放一个<div>.即为行级标签大盒子
  2. <span>标签用于布局,一行上可以有多个<span>即为行内标签小盒子

图像标签和路径(重点)

图像标签

在HTML标签中,<img>标签用于定义HTML页面中的图像。

1
<img src="图片URL"/>

单词image的缩写,意为图像。

src<img>图像的必须属性,它用于指定图像文件的路径和文件名

所谓属性 : 简单理解就是属于这个图像标签的特性。

图像标签的其他属性:

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上,显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

图像标签属性注意点:

  1. 图像标签可以拥有多个属性,必须卸载标签名的后面
  2. 属性之间不分前后顺序,标签名与属性、属性与属性之间均以空格分开
  3. 属性采取键值对的格式。即key=”value”的格式,属性=”属性值“
路径
  • 目录文件夹和根目录

    实际工作中,我们的文件不能随便乱放,否则用起来很难快速找到他们,因此我们需要一个文件来管理她们。

    目录文件夹: 就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。

    根目录: 打开目录文件夹的第一层就是根目录

  • 路径

    页面中图片会非常多,通常我们会新建一个文件夹存放这些图像文件(images),这时再查找图像,就需要采用”路径“的方式来指定图像文件的位置

    路径可分为:

    • 相对路径

      引用文件所在的位置为参考基础、而建立出目录路径。这里简单来说,图片相对于HTML页面的位置

      | 相对路径分类 | 符号 | 说明 |
      | —————— | —— | ——————————————————————————- |
      | 同一级路径 | | 图像位于HTML文件同一级 如\ |
      | 下一级路径 | / | 图像位于HTML文件下一级 如\ |
      | 上一级路径 | ../ | 图像文件位于HTML文件上一级 如\ |

      相对路径是从代码所在的文件出发,去寻找目标文件的,而我们这里说的是上一级、下一级和同一级就是图片相对于HTML页面的位置

    • 绝对路径

      是指更目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径

      例如: D:\WebPrj\HTML-BASE\HTML语法规范上\code.png 或完整的网络地址 “http://www.itcast.cn/images/logo.gif

超链接标签(重点)

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

  1. 超链接的语法格式

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

    单词 anchor 的缩写,意为: 锚

    两个属性的作用如下:

    | 属性 | 作用 |
    | ——— | —————————————————————————————— |
    | href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它具有超链接的功能 |
    | target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式 |

  2. 链接分类:

    • 外部链接:

      例如 \百度\.

    • 内部链接:
      网站内部页面之间的相互链接,直接链接内部页面名称即可,例如\首页\.

    • 空链接:

      如果当时没有确定链接目标时, \首页\.

    • 下载链接:

      如果href里面地址时一个文件或者压缩包,会下载这个文件。

    • 网页元素链接:

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

    • 锚点链接:

      我们点击链接,可以快速定位到页面中的某个位置

      • 在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第二集</a>
      • 找到目标位置标签,里面添加一个id属性=刚才的 名字,如: <h3 id="two">第二集介绍</h3>

HTML中的注释和特殊字符

注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要用到注释标签

HTML中的注释以 ”“结束

1
<!--我是一段注释文字-->

一句话: 注释标签里面的内容是给程序猿看的,这个代码是不执行不显示到浏览器页面中的

添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。

别得罪前端开发

特殊字符

在HTML页面中,一些特殊字符很难或不方便直接使用,此时我们就可以使用下面的字符来替代

特殊字符

HTML标签(下)

表格标签

表格是实际开发中非常常用的标签

表格的主要作用

表格主要用于显示、展示数据,因为它可以让数据显示的非常规整、可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格

表格的基本语法

1
2
3
4
5
6
7
<table>
<tr>
<td>单元内的文字</td>
..
</tr>
...
</table>
  1. <table></table>是用于定义表格的标签
  2. <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中
  3. <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中
  4. 字母td指表格数据(table data),即数据单元格的内容

表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示

<th>标签表示HTML表格的表头部分(table head的缩写)

1
2
3
4
5
6
7
<table border="1px">
<tr>
<th>姓名</th>
...
</tr>
...
</table>

表头标签

表格属性

表格标签这部分属性我们实际开发不常用,都是通过CSS来设置

属性名 属性值 描述
align left、center、right 规定表格对周围元素的对齐方式
border 1 或 ”“ 规定表格单元是否拥有边框,默认为””,表示没有边框
cellpading 像素值 规定单元边沿于其他内容之间的空白,默认1像素
cellspacing 像素值 规定单元格之间的空白,默认2像素
width 像素值或百分比 规定表格的宽度

表格结构标签

使用场景: 因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成,表格头部和表格主体两大部分

在表格标签中,分别用: <thead>标签 表格的头部区域<tbody>标签 表格的主体区域,这样可以更好的分清表格结构。

  1. <thead></thead>: 用于定义表格头部。<thead>内部必须拥有<tr>标签,一般是位于第一行
  2. <tbody></tbody>:用于定义表格主体,主要用于放数据本体
  3. 以上标签都是放在<table></table>标签中

合并单元格

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

合并单元格

合并单元格方式:
  • 跨行合并: rowspan=”合并单元格的个数”
  • 跨列合并: colspan=”合并单元格的个数”
合并单元格三部曲:
  1. 先确定是跨行还是跨列合并
  2. 找到目标单元格,写上合并方式= 合并单元格数量。比如: <td colspan="2"></td>
  3. 删除多余的单元格

列表标签

表格是用来显示数据的,那么列表就是用来布局的。

列表最大的特点是整齐、整洁、有序、它作为布局会更加的自由和方便。

根据使用场景不同,列表可以分为三大类: 无须列表、有序列表自定义列表

列表

无序列表(重点)

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

无序列表的基本语法格式如下:

1
2
3
4
5
6
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
  1. 无序列表的各个列表之间没有顺序级别之分,是并列的
  2. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
  3. <li></li>相当于一个容器,可以容纳所有元素
  4. 无序列表是带有自己的样式属性,但实际使用时,我们会通过CSS来设置

有序列表(理解)

有序列表即为排列顺序的列表,其各个列表项会按照一定的顺序排列定义

在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项

1
2
3
4
5
6
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
  1. <ol></ol>中只能嵌套
  2. ,直接在
      标签中输入其他标签或者文字的做法是不被允许的
    1. <li></li>相当于一个容器,可以容纳所有元素
    2. 有序列表是带有自己的样式属性,但实际使用时,我们会通过CSS来设置

    自定义列表(重点)

    自定义列表的使用场景:

    自定义列表常用于对术语或名字进行解释和描述,定义列表的列表项前没有任何项目符号

    自定义列表

    在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

    1
    2
    3
    4
    5
    <dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词2解释2</dd>
    </dl>
    1. <dl></dl>里面只能包含<dt><dd>
    2. <dt><dd>没有个数限制,经常是一个<dt>对应多个<dd>

    列表总结

    标签名 定义 说明
    <ul></ul> 无序列表 里面只能包含li 没有顺序,使用较多,li里面可以包含任何标签
    <ol></ol> 有序列表 里面只能包含li 有顺序,使用相对较少。li里面可以包含任何标签
    <dl></dl> 自定义列表 里面只能包含dt和dd。dt和dd里面可以包含任何标签

    表单标签

    现实中的表单,我们去银行办理信用卡填写的单子。

    现实中的表单

    网页中的表单

    网页表单

    为什么需要表单

    使用表单的目的是为了收集用户信息。

    在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。

    表单的组成

    在HTML中,一个完整的表单通常由表单域、表单控件(也称表单元素)和提示信息3个部分构成

    表单组成

    表单域

    表单域是一个包含表单元素的区域。

    在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。

    <form>会把范围内表单元素信息提交给服务器

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

    常用属性:

    属性 属性值 作用
    action url地址 用于指定接收并处理表单数据的服务器的url地址
    method get/post 用于设置表单数据的提交方式,其取值为get或post
    name 名称 用于指定表单的名称,以区分一个页面中的多个表单

    表单控件(表单元素)

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

    input输入表单元素

    在英文单词中,input是输入的意思,在表单元素中<input>标签用于收集用户信息

    <input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)

    1
    <input type="属性值"/>
    • <input/>标签为但标签
    • type属性设置不同的属性值用来指定不同的控件类型

    type属性的属性值及其描述如下:

    属性值 描述
    button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
    checkbox 定义复选框
    file 定义输入字段和”浏览“按钮,提供文件上传
    hidden 定义隐藏的输入字段
    image 定义图像形式的提交按钮
    password 定义密码字段。该字段中的字符被掩码
    radio 定义单选框按钮
    reset 定义重置按钮。重置按钮会清除表单种的所有数据
    submit 定义提交按钮。提交按钮会把表单数据发送到服务器
    text 定义单行输入字段,用户可在其种输入文本。默认宽度为50个字符。

    除type属性外,<input>标签还有很多其他属性,其常用属性如下:

    属性 属性值 描述
    name 由用户自定义 定义input元素的名称
    value 由用户自定义 定义input元素的值
    checked checked 规定次input首次加载时应当被选中
    maxlength 正整数 规定输入字段的字符的最大长度
    1. name和value时每个表单元素都有的属性值,主要给后台人员使用
    2. name表单元素的名字,要求 单选按钮和复选框要有相同的name值
    <label>标签

    <lable> 标签为input元素定义标注(标签)

    <lable>标签用于绑定一个表单元素,当点击<lable>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

    语法:

    1
    2
    <label for="sex"></label>
    <input type="radio" name="sex" id="sex">

    核心: <lable>标签的for属性应当与相关元素的id属性相同

    select下拉表单元素

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

    下拉列表

    语法:

    1
    2
    3
    4
    5
    6
    7
    <form action="">
    <select name="" id="">
    <option value="itme1">选项1</option>
    <option value="itme2">选项2</option>
    <option value="item3" selected>选项3</option>
    </select>
    </form>
    1. <select>里面至少包含一对<option>
    2. <option>中定义selected=”selected”时,当前选项即为默认选项
    textarea文本域元素

    使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签

    在表单元素中,<textarea>标签时用于定义多行文本输入的控件。

    使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

    语法:

    1
    2
    3
    4
    5
    <form action="">
    <textarea name="" id="" cols="30" rows="10">
    文本内容
    </textarea>
    </form>
    1. 通过<textarea>标签可以轻松地创建多行文本输入框。
    2. cols=”每行中的字符数”,ros=”显示的行数”,我们在实际开发中不会使用,都是用CSS来改变大小。

    综合案例

    示例图:

    综合案例

    代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>综合案例</title>
    </head>
    <body>
    <h3>青春不常在,抓紧谈恋爱</h3>
    <form action="#">
    <table width="500" cellspacing="0" border="0">
    <tr>
    <td><label for="sex">性别</label></td>
    <td><input type="radio" id="sex" name="sex" value="man" checked>
    <input type="radio" name="sex" value="woman">
    </td>
    </tr>
    <tr>
    <td><label for="birthday"> 生日</label></td>
    <td><select id="birthday">
    <option value="--请选择年--">--请选择年--</option>
    </select>
    <select id="moth">
    <option value="--请选择月--">--请选择年--</option>
    </select>
    <select id="day">
    <option value="--请选择日--">--请选择年--</option>
    </select></td>
    </tr>
    <tr>
    <td><label for="area">所在地区</label></td>
    <td><input type="text" id="area" value="北京思密达"></td>
    </tr>
    <tr>
    <td><label for="marriage">婚姻状况</label></td>
    <td><input type="radio" id="marriage" name="marriage" value="未婚" checked> 未婚
    <input type="radio" name="marriage" value="已婚"> 已婚
    <input type="radio" name="marriage" value="离婚"> 离婚
    </td>
    </tr>
    <tr>
    <td><label for="education">学历</label></td>
    <td><input type="text" id="education" value="幼儿园"></td>
    </tr>
    <tr>
    <td><label for="like">喜欢类型</label></td>
    <td><input type="checkbox" name="like" id="like" value="妩媚的"> 妩媚的
    <input type="checkbox" name="like" value="可爱的"> 可爱的
    <input type="checkbox" name="like" value="小鲜肉"> 小鲜肉
    <input type="checkbox" name="like" value="都喜欢"> 都喜欢
    </td>
    </tr>
    <tr>
    <td><label for="">自我介绍</label></td>
    <td><textarea name="" id="" cols="20" rows="5">自我介绍</textarea></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" value="免费注册"></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="checkbox" checked> 我同意注册条款和会员加入标准</td>
    </tr>
    <tr>
    <td></td>
    <td><a href="#">我时会员,立即登录</a></td>
    </tr>
    <tr>
    <td></td>
    <td><h3>我承诺</h3>
    <ul>
    <li>年满18岁,单身</li>
    <li>抱着严肃的态度</li>
    <li>真诚寻找另一半</li>
    </ul>
    </td>
    </tr>
    </table>


    </form>
    </body>
    </html>

    推荐文档

    W3C离线文档分享

    链接:https://pan.baidu.com/s/1mWRZLULSGWWBk4N9JCfz3g
    提取码:50W3

    谢谢老板