一幅长文细学HTML5和CSS3——HTML5
1 前言
软件的使用
对于编写前端网站来说，开发工具有很多种，垃圾到可以用记事本，快到可以用Vscode、Webstorm、Sublime、Dreamweaver、Hbuilder。
如果是学生党，且领取了捷贝斯公司的免费使用旗下产品资格，可以考虑使用Webstorm。
如果是学生党，懒得搞花里胡哨，可以使用下面两款产品。
Visual Studio Code - Code Editing. Redefined
Brackets - 一个现代的开源代码编辑器，了解网页设计。
如果是美工或者学校作业要求，可以使用Dreamweaver。
资料的领取
文章源码：HTML5和CSS3: 一幅长文细学HTML5和CSS3源码 (gitee.com)
练手项目源码：更新中
2 HTML5
在这一章的学习中，我们会讲述HTML5新增的特性。HTML5并不是一种新的语言，而是HTML语言的第五次重大修改版本。现如今很多主流浏览器都支持H5如chrome、firefox、safari。IE9及以上支持h5，IE8以下则不支持。
H5改变了用户与文档的交互方式。在以前的传统的HTML中，我们使用的是flash来插入多媒体。但在H5中，它兼收了flash的一些特性。
相对于H4来说，H5抛弃了许多不合理的标记和属性，新增了一些标记和属性。
H5增加了许多新的语义使得代码的可读性更好。其他的如二维三维变化、特效、本地存储特效等特性，我们在下面的学习中慢慢讨论。
2.1 HTML简介
网页
-
网页是指在因特网上按照一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
-
网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。
-
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常常为以.htm或.html后缀结尾的文件，故俗称HTML文件。
HTML
-
HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
-
HTML不是一种编程语言，而是一种标记语言。
-
标记语言是一套标记标签。
超文本
-
可以加入图片、声音、动画、多媒体等内容，超越了文本限制。
-
它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件连接（超级链接文本）。
网页的形成
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给客户的。
Web标准
Web标准主要包括结构、标签和行为三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的板式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript |
2.2 HTML基本页面
语法规范
- HTML标签是由尖括号包围的关键词，例如<html>。
- HTML标签通常是成对出现的，例如<html>和</html>我们称其为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签，例如<br/>，我们称为单标签。
- 标签中是可以指定内容的属性的，写法采用键值对方式key = “value”。属性包含了元素的额外信息。其中值的引号可写可不写，但是习惯上大家还是会写上。
- 有的元素可以同时存在多个属性，属性之间以空格的方式隔开，标签名与属性之间也是，属性之间是无序的。
标签关系
双标签关系可以分为两类：包含关系和并列关系。
注释
注释格式：<!-- 注释内容 -->
注：如果是使用VScode，那么你只需要选中注释内容，然后ctrl+/。
基本骨架
每个网页都会有一个基本结构标签，我们称之为骨架标签。页面的内容也是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head>> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本上是放到body里面的 |
| 其余符号 | 作用 |
|---|---|
| <!DOCTYPE html> | 表明HTML网页版本 |
| lang(意味language) | 定义当前文档显示的语言，一般是en(English)或者zh-CN(中文)，除此之外还有fr(法语)等。 |
| charset(Character Set,字符集) | 多个字符的集合，以便计算机能够识别和存储各种文字，在head标签内可以使用<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。常用UTF-8、GBK、GB2312 |
<!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>Document</title>
</head>
<body>
</body>
</html>
注：
- 如果需要在VSCode中直接生成骨架，只需要输入!或html:5并且回车即可生成。
- 对于文档显示来说，定义为en的文档也可以显示中文，定义为zh-ch的文档也可以显示英文。但是如果定义为en英文网站，则浏览器中的翻译插件会在检测到英文后自动翻译。
- 一般情况下，使用!快捷生成的骨架如有需要可以修改lang，但是其他建议不要动，否则容易引起乱码。
程序清单1_1
<!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>
<!-- 网页中显示的内容 -->
你好
</body>
</html>
2.3 文本标签
2.3.1 排版标签
| 排版标签 | 说明 |
|---|---|
| 标题标签 | 双标签<h1></h1>，其中可选h1到h6。意为最多支持六级标题 |
| 段落标签 | 双标签<p>文字内容</p>，其中段落文字写于标签之中 |
| 换行标签 | 单标签<br/>或</br>，意为重新开始一行 |
| 水平线标签 | 单标签<hr>，意为生成一条水平线，常用于分割不同主题内容 |
2.3.2 文本格式化标签
可以给特定的文字施加各种效果。
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| strong | 加粗 |
| u | 下划线 |
| ins | 下划线 |
| i | 倾斜 |
| em | 倾斜 |
| s | 删除线 |
| del | 删除线 |
2.4 语义标签
2.4.1 无语义标签
div标签
双标签<div>文字内容</div>，div标签相当于一个盒子，可用于存放多个内容，多次声明div标签可创造不同的盒子且位于不同行。
span标签
双标签<span>文字内容</span>，span相当于一个大区域，当使用span时，不管你使用几次标签，填写的内容都会被放到同一块区域中且位于同一行。
程序清单2_4_1
<!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>Document</title>
</head>
<body>
<div>普通文字</div>
<div>普通文字</div>
<span>普通文字1</span>
<span>普通文字1</span>
</body>
</html>
2.4.2 语义标签
标签分类
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。这些标签多用于手机端网页开发。
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| aticle | 网页内容 |
| mian | 文档主要内容 |
2.5 多媒体标签
2.5.1 图像标签
图像标签
- 单标签<img src = “图像URL”>，单词img为image缩写。
- src是img标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签属性
| 属性 | 说明 |
|---|---|
| alt = “” | 当图片加载失败时，显示alt指定的文本 |
| title = “” | 当鼠标悬停在图片上时显示的提示信息 |
| width和height | 用于设置图片宽度和高度，但是一般只设置其中一个，另一个则会根据设置等比例放大缩小，若两个都设置如果没有等比例缩小或放大则图片会扭曲。 |
| border | 设置图像的边框粗细 |
2.5.2 音频标签
音频标签
- 单标签或双标签<audio src = "”>，用于生成一个播放音乐的控件。
- 双标签<audio><source src="" type = “”></audio>，source为单标签，在音频中可以指定多个source，不同的source中存放的是不同格式的同个音频，这样方便浏览器选择可用的播放源。
音频标签属性
| 属性名 | 功能 |
|---|---|
| src | 音频路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注：音频标签目前只支持三种格式：MP3、Wav、Ogg。
2.5.3 视频标签
视频标签
-
将音频标签的audio改为video即可。
-
使用embed也可以直接插入视频文件，它的本质是调用本机上已经安装的文件，具有兼容性。
-
可以使用flash，但是会增加使用成本，且该方法已经被淘汰。
视频标签及其属性
| 属性名 | 功能名 |
|---|---|
| src | 音频路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（谷歌浏览器要自动播放需要加上muted） |
| loop | 循环播放 |
| width | 组件宽度 |
| height | 组件高度 |
| poster | 还未播放前视频的封面，默认是视频的第一帧，可指定路径 |
| preload | auto或none，规定是否预先加载视频，如果有了autoplay，就忽略该属性 |
| muted | 静音播放 |
注：
-
视频标签目前只支持三种格式：MP4、WebM、Ogg。
-
当设置视频宽高时，HTML5为了保持原视频比例，设置的宽高中只会生效一个参数。故平时设置视频组件时只会设置宽高中的其中一个参数。
2.6 超链接
超链接标签
双标签<a href = “目标网页”>超链接名字</a>，其中a为anchor(锚)的缩写，故又名a标签或锚链接，可用于一个页面跳转到另外一个页面的场景。
由a标签组成的，里面的href属性可以设置超链接的引用，类似于src，所以说，如果需要a标签点击之后去指定页面，需要设置a标签的href属性。
超链接标签属性
target属性用于决定打开网页的方式。
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转 |
| _blank | 在新窗口中跳转（保留原网页） |
链接分类
-
外部链接：<a href = “http://www.baidu.com”>百度</a>
-
内部链接：<a href =“index.html”>首页</a>
-
空链接：<a href =#>首页</a>
-
下载链接：如果href的地址是一个文件或者压缩包，点击则会下载这个文件
-
网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频都可以添加超链接
-
锚点链接：在a标签的href属性中设置属性值为#id值，然后在目标位置标签添加id属性，并设置id值即可
2.7 列表标签
列表的种类
- 有序列表
- 无序列表
- 自定义列表
无序列表
无序列表的作用是在网页中表示一组无顺序之分的列表，如：新闻列表。
| 标签名 | 说明 |
|---|---|
| ul(Unordered list) | 表示无序列表的整体，用于包裹li标签 |
| li(list) | 表示无序列表的每一项，用于包含每一行的内容 |
有序列表
有序列表的作用是在网页中表示一组有顺序之分的列表，如：排行榜。
| 标签名 | 说明 |
|---|---|
| ol(Ordered list) | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
注：ol标签中只允许包含li标签，而li标签可以包含任意内容。
自定义列表
自定义列表在网页的底部导航中常用。如：
| 签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的标题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
注：dl标签中只允许包含dt/dd标签，而dt/dd标签可以包含任意内容。
2.8表格标签
表格的主要作用
用于显示、展示数据，其能够让数据显示的非常规整，可读性好。表格在网页中以行+列的单元格的方式整齐展示数据，如：学生成绩表。
表格标签
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr(table row) | 表格每行，可用于包裹td |
| td(table data) | 单元格内容 |
表格标签属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注：实际开发中我们只会去用HTML做大概内容，而美化方面都是交给CSS。
表格标题和表头单元格标签
表格标题指的是表格中用于显示整张表格的标题，而表头单元格标签指的是每列的表头标题。
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 写于table标签内部。表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th(table header) | 表头单元格 | 写于tr标签内部。表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
表格的结构标签
表格的结构标签可以让表格的内容结构更加清晰，其用于突出表格的不同部分（头部、主体、底部）。
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
合并单元格
合并单元格分为跨行合并和跨列合并。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并 |
| colspan | 合并单元格的个数 | 跨列合并 |
注：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。
程序清单2_10
<!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>Document</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>成绩不错</td>
</tr>
<tbody>
<tfoot>
<tr>
<th>总结</th>
<th colspan="3">品质兼优 德才兼备</th>
</tr>
</tfoot>
</table>
</body>
</html>
2.9 表单标签
2.9.1 表单标签汇总
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <label> | 绑定内容和表单标签的关系 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist> | 和select下拉菜单标签类似，搭配text文本框可以输入文字 |
| <keygen> | 密钥对生成器 |
| <output> | 用于放置输出内容 |
程序清单2_11_1
<!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>Document</title>
</head>
<body>
<h1>账号注册</h1>
<br>
<form action = "">
<form action="">
<!-- 文本框 -->
账号：<input type="text" placeholder="邮箱/手机号码/ID">
<br>
<!-- 密码框 -->
密码：<input type = "password" placeholder="密码">
<br>
<input type="reset" value="重置按钮">
</form>
<!-- 单选框+label标签 -->
<input type="radio" name = "sex" id = "nan"><label for="nan">男</label>
<input type="radio" name = "sex" id = "nv"><label for="nv">女</label>
<br>
<!-- 下拉菜单 -->
所在地：<select>
<option>意大利</option>
<option>美国</option>
<option selected>中国</option>
</select>
<br>
<!-- 多选框 -->
是否单身：<input type = checkbox>
<!-- 提交按钮 -->
<input type = submit value = "注册账号">
</form>
<br>
<!-- 文件选择框 -->
提交头像：<input type = file multiple>
<br>
<!-- 文本域 -->
<Textarea cols = 12 rows = 3></Textarea>
<br>
<!-- 普通按钮 -->
<input type = button value = "测试按钮1">
<!-- 按钮标签 -->
<button type = button>测试按钮2</button>
<form action="" method="post">
<fieldset>
<legend>请选择你的爱好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="运动">
<option value="羽毛球">篮球</option>
<option value="乒乓球">足球</option>
</optgroup>
<optgroup label="娱乐">
<option value="看电影">看电影</option>
<option value="看小说">看电视</option>
</optgroup>
</select>
</fieldset>
</form>
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
2.9.2 input标签
input标签
input属于单向标签，其必须指定属性type使其具有不同的功能。
| type属性值 | 说明 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件选择 |
| submit | 提交按钮，点击之后提交数据给后台服务器 |
| reset | 重置按钮，点击之后恢复表单默认值 |
| button | 普通按钮，默认无功能，配合js可以添加功能 |
| 邮箱框，提供了邮箱格式的完整验证 | |
| tel | 电话框，==可以在移动端提供数字键盘== |
| url | 网址框，提供合法网址的输入 |
| number | 数量框，提供单位数量控制以及控制数字输入 |
| search | 查找框，可以清空输入框的内容 |
| range | 滑动条，可用于调解音量 |
| time | 时间选择框，支持时分秒 |
| date | 日期选择框，支持年月日 |
| datetime | 只有safari和edge支持，等价于datetime-local |
| datetime-local | 日期选择框，支持年月日时分秒 |
| month | 设置月份 |
| week | 设置周 |
对于以上的按钮，如果在没有添加==预标签form==的情况下，是无法实现其功能的，如果想要使功能和对应的组件相结合，就需要把实现功能的组件和该按钮放在同一个地方，用form括起来即可。
input标签属性
| 附加属性 | 说明 |
|---|---|
| value | 用于指定按钮上的文字，submit和reset按钮默认有文字；指定数量框的默认值；指定滑动条的默认值 |
| multiple | 用于一次性上传多个文件 |
| placeholder | 文本框中出现提示内容 |
| name | 用于单选框和多选框分组，同个组中只能有一个选项被选中 |
| checked | 用于单选框和多选框，指定默认选中的选项 |
| autocomplete | 用于任何类型文本框，提示已经提交过的数据，只有两个值on或off |
| max | 指定数量框的最大值；指定滑动条的最大值 |
| min | 指定数量框的最小值；指定滑动条的最小值 |
| autocomplete | 用于任何类型文本框，自动获取焦点 |
| required | 用于文本框，指定该文本框必须输入，否则无法提交 |
| pattern | 用于文本框，可用正则表达式限定文本框输入内容 |
注：autocomplete需要两个要求才能生效，一是必须提交过，二是该input标签必须带有name属性。
2.9.3 按钮标签
按钮标签及其分类
双标签 <button type = “”>按钮文本</button>。
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后台服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，配合js可以添加功能 |
注：一般在使用按钮时，程序员大多数愿意使用button按钮标签而非input表单标签。
2.9.4 下拉菜单标签
| 标签 | 说明 |
|---|---|
| select | 单标签，下拉菜单的整体 |
| option | 单标签或双标签，下拉菜单的每一项 |
注：
-
option属性selected可以指定默认选项。
-
option属性label可以在每个选项后面显示提示文字。
2.9.5 文本域标签
| 属性 | 说明 |
|---|---|
| col | 指定几列 |
| rows | 指定几行 |
2.9.6 label标签
label标签的两种使用方式
方法一：
- 使用label标签把内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
方法二：
- 直接使用label标签把内容和表单标签一直包裹起来
- 把label标签的for属性删除即可
2.9.7 datalist标签
datalist标签详解
-
datalist是双标签，和select标签相同，里面可以嵌套option作为选项；
-
使用datalist标签需要指定label属性的值为text标签的id属性的值，否则无法关联生效；
-
如果datalist关联的并非是input的text类型，而是url类型，则要求选项option中的每一项都是网址格式，否则无法显示；
-
datalist不太实用，因为不同浏览器对这个标签的支持程度不同；
2.9.8 keygen（了解）
keygen元素是密钥生成器。当提交表单时，会生成两个键，私钥存储于客户端，公钥则被发送到服务器；公钥可用于之后验证用户的客户端证书，即实现非对称加密。目前很少有浏览器支持该标签。
2.9.9 output（了解）
属于语义标签，用于放置输出的内容，但是不能自动计算结果，需搭配js方式来动态修改结果。
2.10 框架标签
iframe用于在网页内显示网页。
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>
2.11 头部标签
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息。 |
| <title> | 定义了文档的标题。 |
| <base> | 定义了页面链接标签的默认链接地址。 |
| <link> | 定义了一个文档和外部资源之间的关系。 |
| <meta> | 定义了HTML文档中的元数据。 |
| <script> | 定义了客户端的脚本文件。 |
| <style> | 定义了HTML文档的样式文件。 |
2.12 字符实体
字符实体
文字中如果要显示多个空格，就需要用到字符实体。如果你在html中写入无数个空格，其渲染后也只会显示一个空格。
对于字符实体不只有表示空格的，但是我们用的最多的是空格，其他的需要再查即可。
字符实体分类
程序清单2_12
<!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>Document</title>
</head>
<body>
我们坚持学习 才能走向成功
</body>
</html>
2.13 Emmet语法
概述
Emmet语法的前身是ZenCoding，用于提高html和css的书写速度，在VSCode已经集成了该语法。
快速生成HTML结构语法
- 生成标签只需输入标签名然后按tab即可。
- 如果想要生成多个标签，只需输入标签名*数字即可。
- 如果有父子级标签，可以用>。
- 如果有兄弟级标签，可以用+。
- 如果想生成一个带有类别的标签，可以使用==标签名.类名==然后按tab；如果想生成一个带有id的标签，可以使用==标签名#id==然后按tab。
- 如果想要生成有序类别的div盒子，可以使用==.类名$*数量==。
- 如果想要生成的标签里有初始内容，可以输入==标签{}==然后按tab。
快速生成CSS语法
只需采取简写即可，如width:200只需输入w200然后按tab即可。
2.14 进度条标签
进度条标签及其属性
双标签<progress></progress>，用于显示当前进度，但绝大部分进度条还是使用div和CSS搭配制作
其中max表示进度条的最大值，value表示进度条的默认值
度量条机器属性
双标签<meter></meter>，常用于表示注册账号输入密码时的安全级别阶段。
| 属性 | 说明 |
|---|---|
| hign | 规定较高的值 |
| low | 规定较低的值 |
| max | 最大值 |
| min | 最小值 |
| value | 默认度量值 |
2.15 HTML中设置背景（拓展）
HTML中的body标签允许设置背景。使用bgcolor可以设置颜色，使用background可以设置背景图片。但是这样的写法在HTML4中也被废除，所以我们这里作为了解而不再去仔细探究。
2.16 案例
程序清单2_16
<!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>Document</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form>
昵称:<input type="text" placeholder="请输入昵称">
<br/>
<br/>
性别：
<label >
<input type="radio" name = "sex" checked>男
</label>
<label >
<input type="radio" name = "sex">女
</label>
<br/>
<br/>
所在城市：
<select name="" id="">
<option value="" selected>上海</option>
<option value="">广州</option>
<option value="">北京</option>
</select>
<br/>
<br/>
婚姻状况:
<label >
<input type="radio" name = "marry" checked>未婚
</label>
<label >
<input type="radio" name = "marry">已婚
</label>
<label >
<input type="radio" name = "marry">保密
</label>
<br/>
<br/>
喜欢的类型：
<label><input type = "checkbox" >可爱</label>
<label><input type = "checkbox" >性感</label>
<label><input type = "checkbox" >御姐</label>
<label><input type = "checkbox" >萝莉</label>
<label><input type = "checkbox" >清纯</label>
<label><input type = "checkbox" >甜美</label>
<br/>
<br/>
个人介绍：
<textarea cols = 20 rows = 4></textarea>
<br/>
<br/>
<h3>我承诺：</h3>
<ul>
<li>年满18岁、单声</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<br/>
<br/>
<label><input type="checkbox">我同意所有条款</label>
<br/>
<br/>
<button type="submit">免费注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
- 点赞
- 收藏
- 关注作者
评论（0）