html语法

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

网站由很多网页组成，网页是构成网站的基本元素，通常由图片、连接、视频、声音、文字等元素组成，一般用.htm和.html做后缀，又被称为html文件

html是一种超文本标记语言，描述网页的一种语言，不是编程语言

标记语言是由标记标签组成的

浏览器内核：渲染引擎，负责读取网页内容，整理讯息，计算网页的显示方式并显示

webkit、blink年轻内核

trident、gecko旧内核

web标准，和协议是一个作用，适用多个浏览器

构成部分：结构、表现、行为

结构：对网页元素进行整理分类

表现：设置网页元素的版式、颜色、大小等外观样式，主要为css

行为：网页模型定义及其交互的编写，主要为js

恨，学html都能遇到bug

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="miku.jpg" alt="Image">
</body>
</html>

经过我的排查，我的路径，命令都没问题，很可能是图片本身被损坏

换了个图片就好了

记得安装扩展

基础语法

<!DOCTYPE html>
<!-- 文档类型声明,告诉浏览器是哪种html版本显示网页 本身不属于html文档内部，起声明作用-->
<html lang="zh-CN">
<!-- 语言：英文网页，其实里面也能写中文，主要是告诉浏览器的 --><head><meta charset="UTF-8"><!-- 定义字符集，防止乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="微信图片_20241105174427.jpg" alt="Image"><div>我是一个神经病</div><h1>我是一个一级标签</h1><h2>我是一个二级标签</h2><h3>我是一个三级标签</h3><h4>我是一个四级标签</h4><h5>我是一个五级标签</h5><h6>我是一个六级标签</h6><p>女士，恭喜您当选第47任美利坚合众国总统!请于11月6日凌晨12点前，前往美利坚合众国华盛顿哥伦比亚特区合众国最高法院(1FirstStreet, NE,Washington, DC 20543,</p><p>USA)宣誓就职。并于同日前往美国总统府受领总统住所以及总统办公室。此外，您可以自由的将您的家人与个人物品接到美国总统府中。再次祝贺您当选47任美国总统，希望您能够让美利坚再次辉煌!回复td以退订</p></body></html>

换行标签

<br></br>

<!DOCTYPE html>
<!-- 文档类型声明,告诉浏览器是哪种html版本显示网页 本身不属于html文档内部，起声明作用-->
<html lang="zh-CN">
<!-- 语言：英文网页，其实里面也能写中文，主要是告诉浏览器的 --><head><meta charset="UTF-8"><!-- 定义字符集，防止乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="微信图片_20241105174427.jpg" alt="Image"><div>我是一个神经病</div><h1>我是一个一级标签</h1><h2>我是一个二级标签</h2><h3>我是一个三级标签</h3><h4>我是一个四级标签</h4><h5>我是一个五级标签</h5><h6>我是一个六级标签</h6><p>女士，恭喜您当选第47任美利坚合众国总统!请于11月6日凌晨12点前，<br>前往美利坚合众国华盛顿哥伦比亚特区合众国最高法院(1FirstStreet, NE,Washington, DC 20543,</p><p>USA)宣誓就职。并于同日前往美国总统府受领总统住所以及总统办公室。此外，<br>您可以自由的将您的家人与个人物品接到美国总统府中。再次祝贺您当选47任美国总统，希望您能够让美利坚再次辉煌!回复td以退订</p></body></html>

是个单标签

和段落的区别就是只是换了个行，没有垂直方向的距离

文本格式化标签

给文字整花样，突出重要性

可以加粗：

<strong></strong>
或者<b></b>

我是一个<strong>神经病</strong><br>

光标放在该行的中间，复制粘贴

优先使用strong，语义更强烈

可以倾斜：

<em></em>
或者<i></i>

添加删除线

<del></del>
或者<s></s>

下划线

<ins></ins>
或者<u></u>

其他常用标签

<div></div>和<span></span>

是没有语义的，主要起到一个分区的作用，用来装内容

div:divison表示分割分区

span:span表示跨度

多个div里面的内容独占一行，而多个span里面的内容可以放在同一行

当然我们自己加换行符也是可以换行的：

图像标签

是个单标签，定义html页面的图像

<img src="图像url或路径"/>

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

前面其实也用到了：

<img src="lofter_1666024992076.jpg" alt="miku">

后面的alt也是图片的属性，属性值是文本，功能是当图片不能正常显示的时候，就用alt里面的文本替换不能显示的图片：

图片的其他属性：

title(和前面的title不一样)：提示文本，鼠标放在图片上显示的文字

<img src="lofter_1666024992076.jpg" alt="miku" title="我不要上学！！！！">

width:给图片设置宽度

height:给图片设置高度

这二者如果只设置一个，另一个会随比例自己改变大小

border:设置图像的边框粗细

试试：

   <img src="微信图片_20241105174427.jpg" alt="Image" height="50" width="50" border="15">

加了个黑色的框框，以后还有更细致的修改，用css改

超链接标签

格式：

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

herf：指定链接的目标url地址

target:指定链接页面的打开方式，_self为默认在本页面打开，_black为在新窗口打开

<a href="https://vdse.bdstatic.com//192d9a98d782d9c74c96f09db9378d93.mp4" target="_black">点我看刺激内容</a>

内容是你被骗了的视频

如果我们想在链接里加入我们自己写的网页，只要写我们的路径就好了：

<a href="test2.html" target="_black">点我也可以看刺激内容</a>

这里的test2.html是我们写的另一个html文件

也可以引入图片：

<a href="https://www.csdn.net/"><img src="微信图片_20241105174427.jpg" alt="链接图片"></a>

鼠标放在图片上会变成小手

如果你的页面还没有做好，你们可以用#来标识

<a href="#">我恨你们所有人</a>

可以看见颜色不太一样，也是可以点的，但是点进去只会把原页面刷新一遍

如果你的href里是个压缩包或者一个文件，会下载这个文件

 <a href="../test/process/socket/socket.tar.gz">下载我的小聊天室</a>

但是我的出了bug哈哈，好像下载不了。。明明我用的是相对路径

解决了，把文件移到同一个目录下了

锚点链接：点击链接，定位到页面的某个位置

<a href="tow">索引标签</a>
<h3 id="tow">索引的内容</a>

<!DOCTYPE html>
<!-- 文档类型声明,告诉浏览器是哪种html版本显示网页 本身不属于html文档内部，起声明作用-->
<html lang="zh-CN">
<!-- 语言：英文网页，其实里面也能写中文，主要是告诉浏览器的 --><head><meta charset="UTF-8"><!-- 定义字符集，防止乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>霍格沃茨教务系统</title>
</head><body><a href="#shit">我是索引标签</a><br />我是一个<strong>神经病</strong><br>我是一个<strong>神经病</strong><br>我是一个<strong>神经病</strong><br>我是一个<strong>神经病</strong><br>我也是一个神经病<b>神经病</b><br>我也是一个神经病<b>神经病</b><br>我也是一个神经病<em>神经病</em><br>我也是一个神经病<i>神经病</i><br>我也是一个神经病<del>神经病</del><br>我也是一个神经病<ins>神经病</ins><br><img src="微信图片_20241105174427.jpg" alt="Image" height="50" width="50" border="1"><h1>我是一个一级标签</h1><h2>我是一个二级标签</h2><h3>我是一个三级标签</h3><h4>我是一个四级标签</h4><h5>我是一个五级标签</h5><h6>我是一个六级标签</h6><p>女士，恭喜您当选第47任美利坚合众国总统!请于11月6日凌晨12点前，<br>前往美利坚合众国华盛顿哥伦比亚特区合众国最高法院(1FirstStreet, NE,Washington, DC 20543,</p><p>USA)宣誓就职。并于同日前往美国总统府受领总统住所以及总统办公室。此外，<br>您可以自由的将您的家人与个人物品接到美国总统府中。再次祝贺您当选47任美国总统，希望您能够让美利坚再次辉煌!回复td以退订</p><div>我要当纽约<br>市市委书记</div><div>我要当纽约市市委书记</div><span>嵌入式</span><span>模电</span><span>大物</span><br><img src="lofter_1666024992076.jpg" alt="miku" title="我不要上学！！！！"><br><a href="https://vdse.bdstatic.com//192d9a98d782d9c74c96f09db9378d93.mp4" target="_black">点我看刺激内容</a><br><a href="test2.html" target="_black">点我也可以看刺激内容</a><br><a href="#">我恨你们所有人</a><br><a href="socket.tar.gz">下载我的小聊天室</a><br><a href="https://www.csdn.net/"><img src="微信图片_20241105174427.jpg" alt="链接图片"></a><h3 id="shit">我是目标标签</h3><br /></body></html>

点击索引标签可以传送到页面内对应标签的位置

<a></a>
<a href="#">点我返回顶部</a>

这样可以返回顶部

注释和特殊字符

注释：快捷键ctrl /

有时候我们想把我们的标签直接打印出来，但是我们的标签是特殊字符，正常情况是不能呈现在html页面上的，在C语言我们是用转义字符解决的，在html里我们用特殊字符来标识

比如我们想在html里呈现一个<p>就应该：

&lt; p &gt;是一个段落标签

如何我们可以把我们学到的东西用一下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Linux:网络基础</title>
</head><body><h1>linux:网络基础</h1><a href="#网络">一、网络</a><br><a href="#协议">二、协议</a><br><a href="#传输">三、传输</a><br><h2 id="网络">一、网络</h2>计算机是人的工具，人需要协作，于是有了网络<br><img src="哈哈哈.png" alt="picture1"><br>专用服务器->专用计算机<br>局域网：随着计算机的数量增加，通过交换机和路由器连接计算机<br>广域网：将远隔千里的计算机都连在一起<br><h2 id="协议">二、协议</h2>协议就是约定俗成计算机之间用光信号和电信号传输通信，通过电信号的频率、光信号的强弱来表示0和1，传递信息那么为了方便大家，就要有约定好的规矩，大家才能都看懂很多问题都可以通过添加软件层来解决：<p>来看看这篇：</p><a href="https://blog.csdn.net/Au_ust/article/details/139863396?spm=1001.2014.3001.5502"target="_blank">网络传输协议-Au-ust博客</a><p>对于一台主机, 它的操作系统内核实现了从传输层到物理层的内容;<br>对于一台路由器, 它实现了从网络层到物理层;<br>对于一台交换机, 它实现了从数据链路层到物理层;<br>对于集线器, 它只实现了物理层;<br></p><h2 id="传输">三、传输</h2><p>多个计算机的通信需要经过一个或多个路由器<br>数据包封装和分用<br>不同的协议层对数据包有不同的称谓,在传输层叫做段(segment),在网络层叫做数据报 (datagram),在链路层叫做帧(frame).应用层数据通过协议栈发到网络上时,每层协议都要加上一个数据首部(header),称为封装(Encapsulation).<br>首部信息中包含了一些类似于首部有多长, 载荷(payload)有多长, 上层协议是什么等信息.<br>数据封装成帧后发到传输介质上,到达目的主机后每层协议再剥掉相应的首部, 根据首部中的 "上层协议字段" 将数据交给对应的上层协议处理.<br>好多八股。。</p></body></html>

表格标签

表格不是用于布局页面的，而是用于显示数据的

我们的表格分为列和行，行用tr标签，用td可以在单元格内划分空间

<!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><h1>喜欢学前端的小朋友们你们好啊,这是我学表格标签的练习文件</h1><table><td>科目</td><td>教师质量</td><td>课程难度</td><td>课程安排</td></tr><td>嵌入式</td><td>溺爱</td><td>海星</td><td>海星</td></tr><td>大物</td><td>海星</td><td>凑合</td><td>忍耐</td></tr><td>模电</td><td>抽象</td><td>想吐</td><td>这谁给我排的课</td></tr></table>
</body></html>

我们也可以用th对表头单元格加粗

<!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><h1>喜欢学前端的小朋友们你们好啊,这是我学表格标签的练习文件</h1><table><tr><th>科目</th><th>教师质量</th><th>课程难度</th><th>课程安排</th></tr></tr><td>嵌入式</td><td>溺爱</td><td>海星</td><td>海星</td></tr><tr><td>大物</td><td>海星</td><td>凑合</td><td>忍耐</td></tr><tr><td>模电</td><td>抽象</td><td>想吐</td><td>这谁给我排的课</td></tr></table>
</body></html>

表格相关属性

写在table内

加边框：

<table align="center" border="1">

设置边框和内容直接的空白部分，默认1像素

设置边框和边框的距离为0

 <table align="center" border="1" cellpadding="20" cellspacing="0">

改变表格的宽和高，还是之前学的属性：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="200">

<table align="center" border="1" cellpadding="5" cellspacing="0" width="200" height="200">

写一个完整的（十日终焉你补药完结啊）

<!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><h1>喜欢学前端的小朋友们你们好啊,这是我学表格标签的练习文件</h1><table align="center" border="1" cellpadding="5" cellspacing="0" width="200" height="200"><tr><th>科目</th><th>教师质量</th><th>课程难度</th><th>课程安排</th></tr></tr><td>嵌入式</td><td>溺爱</td><td>海星</td><td>海星</td></tr><tr><td>大物</td><td>海星</td><td>凑合</td><td>忍耐</td></tr><tr><td>模电</td><td>抽象</td><td>想吐</td><td>这谁给我排的课</td></tr></table><br><table align="center" border="1" cellpadding="5" cellspacing="0"><tr><th>关键词</th><th>今日搜索</th><th>趋势</th><th>相关搜索</th></tr><tr><td>十日终焉</td><td>3600</td><td><img src="微信图片_20241106131128.png" alt="down"></td><td><a href="https://baike.baidu.com/item/%E5%8D%81%E6%97%A5%E7%BB%88%E7%84%89/63368747">百度百科</a></td></tr><tr><td>九日终焉</td><td>57600</td><td><img src="微信图片_20241106131133.png" alt="up"></td><td><a href="#">百度百科</a></td></tr><tr><td>四级词汇</td><td>4000</td><td><img src="微信图片_20241106131128.png" alt="down"></td><td><a href="https://www.eol.cn/html/en/cetwords/cet4.shtml">百度百科</a></td></tr></table>
</body></html>

表格结构标签

像前面一样，分为头部和主题，为<thead>和<tbody>,可以使表格结构更清晰

按f12，选择

可以查看当前页面元素对应的代码

合并单元格

rowspan="合并单元格的个数"//跨行合并
colsspan="合并单元格的个数"//跨列合并

步骤：确认你是跨列/跨行->写代码->删除多余单元格

 <tr><th>关键词</th><th>今日搜索</th><th colspan="2">趋势</th><!-- <th>相关搜索</th> --></tr>

列表标签

列表分为有序、无序、自定义列表

无序列表

格式：

<ul><li>列表内的内容</li>
</ul>

我们的ul标签内不能包含其他标签，只能包含li标签，其他如<p>都是不行的（毕竟是列表）

<ul><li>云</li><li>桔梗</li><li>流沙</li><li>眼泪</li></ul>

但是li标签里面可以方别的标签，li就像个容器

有序列表

ol用来定义有序列表，列表项是有顺序的

使用ol和li，规则和无序列表类似

<ol><li>上学Π</li><li>上大学</li><li>活者</li></ol>

自定义列表

对我们主要的名词或属于进行解释，定义列表的列表项前没有任何项目符号

 <dl><dt>关于实验室</dt><dd>前端</dd><dd>后端</dd><dd>人工智能</dd></dl>

dd和dt是主人公和配角的关系，不是包含关系

和有序无序列表的最大区别是dt和dd里面都可以放任何标签

表单

表单一般是用于统计用户的信息

这就是表单

一个表单由表单域、表单控件（也称为表单元素）和提示信息三个部分组成

表单域

表单域就是个区域，里面包含了表单元素

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

当我们在表单下点提交后，就会把表单域内部的元素提交到后台

表单元素

输入表单元素（input），该标签为单标签，从用户端获取数据

<form >用户名：<input type="text"></form>

text是文本框类型，type值的改变可以决定你的表单元素是以哪种形态展示的

password类型是密码，表现出来的是小圆点

 <form action="">用户名：<input type="text"><br>密码：<input type="password"></form>

radio类型是选项按钮,可以多选一（单选）

但是你点两个的时候其实会发现并没有实现真正的单选：

一个表单里会有很多个这样的选择元素，为了方便，我们的元素还有一个属性值是name，给我们的选项加上name，让我们知道这两个选项是同一个选择题下的选项，也可以让后台知道你选的是哪个元素的选项：

  <form action="">用户名：<input type="text" name="user"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox">玩原神<input type="checkbox">玩无畏契约<input type="checkbox">玩英雄联盟</form>

这样才真正的实现了单选

checkbox是复选框，也就是多选

  <form action="">用户名：<input type="text"><br>密码：<input type="password"><br>性别：<input type="radio">男<input type="radio">女<br>爱好：<input type="checkbox">玩原神<input type="checkbox">玩无畏契约<input type="checkbox">玩英雄联盟</form>

同样的，我们的复选框也可以添加name：

  <form action="">用户名：<input type="text" name="user"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox" name="hobby">玩原神<input type="checkbox" name="hobby">玩无畏契约<input type="checkbox"name="hobby">玩英雄联盟</form>

当然，加了以后还是多选，因为他本来就是个复选框

单选框和复选框的name得是一样的（证明他们是同一道题的选项）

除了name这个属性，还有其他属性：

value属性，规定你input的类型是什么，交由后台处理，后台处理会更方便；如果是文本框则会将value值显示在文本框内，选项的话就不会

checked属性，规定对应的input元素首次加载时被选中

   <form action="">用户名：<input type="text" name="user" value="请输入用户名"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br></form>

当然我们也可以取消它

maxlength属性，规定输入字段的字符最大长度

  <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br></form>

type元素除了选项和文本框还有什么？

多着呢

submit属性值，可以一键把内容提交到后台

  <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br><input type="submit" ></form>

改变value值可以改变方框里的内容

 <input type="submit" value="注册">

reset属性值，清除内容，还原表单内容

<input type="reset">

button属性值，一个朴素的按钮

   <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br><input type="submit"><input type="reset"><input type="button" value="获取验证码"></form>

file属性值，上传文件

    <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br><input type="submit"><input type="reset"><input type="button" value="获取验证码">上传头像：<input type="file"></form>

label标签，用作绑定表单元素，优化用户体验

需要对应一个新的属性：for，for内部的属性值要和input里的id属性的属性值一样

    <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex" id="man"><label for="man">男</label><input type="radio" name="sex"id="woman"><label for="woman">女</label><br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br><input type="submit"><input type="reset"><input type="button" value="获取验证码">上传头像：<input type="file"></form>

这样你就可以通过点击“男”和“女”这两个字来选中选项了，同理也可以换成图片

select标签,可以进行选择下拉表单，需要用到option标签

  <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex" id="man"><label for="man">男</label><input type="radio" name="sex"id="woman"><label for="woman">女</label><br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br><input type="submit"><br><input type="reset"><br><input type="button" value="获取验证码"><br><input type="file" value="上传头像"><br>选择籍贯：<select name="district" id="district"><option>冰岛</option><option>霍格沃茨</option><option>艾美莉卡</option><option>XUPT</option></select></form>

我们也可以设置默认选项：

 <option selected="selected">XUPT</option>

前面我们学了文本框，还有一个标签是文本域，比文本框大，一般用作留言板

  <form action="">用户名：<input type="text" name="user" value="请输入用户名" maxlength="6"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex" id="man"><label for="man">男</label><input type="radio" name="sex"id="woman"><label for="woman">女</label><br>爱好：<input type="checkbox" name="hobby" checked="checked">玩原神<input type="checkbox" name="hobby">玩无畏契约<inputtype="checkbox" name="hobby">玩英雄联盟<br><input type="submit"><br><input type="reset"><br><input type="button" value="获取验证码"><br><input type="file" value="上传头像"><br>选择籍贯：<select name="district" id="district"><option>冰岛</option><option>霍格沃茨</option><option>艾美莉卡</option><option selected="selected">XUPT</option></select><br>你有什么想对自己籍贯说的吗：<br><textarea name="area" id="area" cols="50" rows="5">例如：你想投胎吗？你喜欢你的籍贯吗......//默认值放这里</textarea></form>

做一个综合案例：

<!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><h1>注册人生重开模拟器账户</h1><form>用户名：<input type="text"><br>性别：<input type="radio" id="man" name="sex"><label for="man">男</label><input type="radio" id="woman"name="sex"><label for="woman">女</label><br>初始属性：<br><input type="checkbox">智力<br><input type="checkbox">魅力<br><input type="checkbox">财力<br>选择籍贯：<select name="district" id="district"><option>冰岛</option><option>霍格沃茨</option><option>艾美莉卡</option><option selected="selected">XUPT</option></select><br></form></body></html>