目录
网站是指在因特网上根据一定规则，使用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">玩无畏契约<input
type="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">玩无畏契约<input
type="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">玩无畏契约<input
type="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">玩无畏契约<input
type="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">玩无畏契约<input
type="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">玩无畏契约<input
type="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">玩无畏契约<input
type="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">玩无畏契约<input
type="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>
好累，就这样吧
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
