网站是指在因特网上根据一定规则，使用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>
经过我的排查， 我的路径，命令都没问题，很可能是图片本身被损坏
换了个图片就好了
记得安装扩展
基础语法
标签
标签大多数为成对出现，称之为双标签,包含在尖括号内，/表示结束标签
<html></html>特殊标签无需成对出现，如<br />,称之为单标签
双标签分为两种关系：包含关系、并列关系
包含：
<head><title><title>
</head>并列：
<head></head>
<body></body>结构标签
html是一个html文档中最大的标签，被称为根标签
<html></html>
head标签是我们每个页面打开的头部，就像这样：
<head></head>titile标签是负责的这部分：
body标签是一个html文档的主体，元素文档的内容都是写在body标签内的
<body></body>ctrl h查找替换
ctrl g定位行数
语义标签
让页面结构更清晰
标题标签
标题标签共分6级，和csdn一样
段落标签
分段
<p></p><!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>就应该：
< p >是一个段落标签
如何我们可以把我们学到的东西用一下：
<!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>
好累，就这样吧