WEB前端的主要技术：HTML CSS javacript jquery
开发工具：HBuilderX
别问我为什么以代码和图片为主，这是学习笔记。
标题标签及斜体加粗效果
动手尝试：标签的嵌套使用
文件名为：index.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<!-- html 是一门超文本标记语言，同时也是一门弱语言（代码写错不报错）
双标签的标签语法：<标签名称 标签属性名="属性值">内容</标签名称>；
单标签的标签语法：<标签名称 标签属性名="属性值"/>；
标签可以不添加属性，也可以添加多个属性。
标题标签 ：h1 ~ h6 逐级加粗变大，独占一行 -->
<h1>这是一个文章标题</h1>
<h2>这是一个文章标题</h2>
<h3>这是一个文章标题</h3>
<h4>这是一个文章标题</h4>
<h5>这是一个文章标题</h5>
<h6>这是一个文章标题</h6>
<!-- 水平分割线 -->
<hr />
<!-- 加粗标签，内容不是独占一行 -->
<strong>加粗文本</strong>
<!-- 斜体标签，内容不是独占一行 -->
<em>斜体文本</em>
<!-- 图片标签，src属性，属性值是图片地址 -->
<img src="./img/xiaox.png"/>
</body>
</html>
运行效果如下：
HBuilderX编辑界面如下图：
音视频标签的使用
文件名为：demo1.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<strong><em>标签的嵌套使用</em></strong> <!-- 标签的嵌套使用 -->
<h5>《野望》</h5>
<h6>唐·王绩</h6>
<p>东皋薄暮望，徙倚欲何依。</p> <!-- 段落标签：<p> （独占一行） -->
<p>树树皆秋色，山山唯落晖。</p>
<p>牧人驱犊返，猎马带禽归。</p>
<p>相顾无相识，长歌怀采薇。</p>
<hr />
<!--
换行标签：<br />
空格效果： ；（后面带分号）一个代表一个空格
-->
<p>HTML是一门 超文本标记语言，<br />其简单易学，<br />容易上手。</p>
<!-- 音频标签：<audio> （src属性，属性值是音频地址；controls属性，属性值：controls）controls属性值使得音频显示进度条 -->
<audio src="" controls="controls"></audio>
<hr />
<!-- 视频标签：<video> （src属性，属性值是视频地址；controls属性，属性值：controls）controls属性值使得视频显示进度条 -->
<video src="" controls="controls"></video>
<hr />
<p>日期：<input type="date"><p/> <!-- （type属性，属性值date）date属性值使得浏览器显示日期选择框 -->
<p>名称：<input type="text"><p/> <!-- （type属性，属性值text）text属性值使得浏览器显示一个文本框 -->
<p>密码：<input type="password"><p/> <!-- （type属性，属性值password）password属性值使得浏览器显示一个密码框 -->
<p>文件：<input type="file"><p/> <!-- （type属性，属性值file）file属性值使得浏览器显示一个文件选择器 -->
<!--
（type属性，属性值radio）radio属性值使得浏览器显示一个普通选择器
（name属性，属性值gender）gender属性值使得当多个input标签的name属性的属性值[gender]相同时，实现选择器内容单选
（所谓单选：就是在多个特定的内容里只允许选择一个）
-->
<input type="radio" name="gender" />男<input type="radio" name="gender" />女
<!--
（type属性，属性值button）button属性值使得浏览器显示一个按钮
（value属性，属性值：“登录”）value属性的属性值使得浏览器显示按钮上的文字）
-->
<input type="button" value="登录" />
</body>
</html>
运行效果如下：
HBuilderX编辑界面如下图：
表单标签的使用
文件名为：demo2.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<p>
下拉框：<select>
<option>江苏省</option>
<option>江西省</option>
<option>湖南省</option>
<option selected="selected">山西省</option> <!-- 属性selected：默认选中 -->
<option>甘肃省</option>
</select>
<p/>
<form> <!-- input标签通常使用form包裹 -->
<p>用户名：<input type="text" placeholder="请输入用户名" /></p>
<p>密 码：<input type="password" placeholder="请输入密码" /></p>
<!-- 复选框：<input type="checkbox" /> -->
<p>兴趣爱好：
打篮球<input type="checkbox" />
打羽毛球<input type="checkbox" />
下象棋<input type="checkbox" />
踢足球<input type="checkbox" />
</p>
<!-- 文本域标签：textarea；placeholder属性 ：提示信息，又称占位符；rows：高；cols：宽-->
<p>文本域：<textarea rows="10" cols="50" placeholder="这是一个留言板,请留言......"></textarea></p>
</form>
<!-- 水平分割线 -->
<hr />
</body>
</html>
运行效果如下：
HBuilderX编辑界面如下图：
实现简单的登录
文件名为：demo3.html 和 demo3.1.html
思考一下：当 input 标签作为按钮时，type 属性值 submit reset 和 button 有什么不一样
[demo3.html]
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<!--
常用的表单标签：input [text password submit ...] 和 select
input标签的属性：
value：存放输入信息
-->
<form action="./demo3.1.html"> <!-- 点击登录按钮时跳转到./demo3.1.html -->
<p>用户名：<input type="text" /></p> <!-- 文本输入框 -->
<p>密 码：<input type="password" /></p> <!-- 密码输入框 空格 转义字符 -->
<p>
<input type="submit" value="登录"/> <!-- submit 效果：实现网页的跳转 -->
<input type="reset" value="重置"/> <!-- reset 效果：重置输入的内容 -->
</p>
</form>
</body>
</html>
[demo3.1.html]
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<h1>登录成功</h1> <!-- 标题：登录成功 -->
</body>
</html>
运行效果如下：
HBuilderX编辑界面如下图：
正则表达式的使用
文件名为：demo4.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<!--
pattern属性：用来存放正则表达式
required属性：当值为required时，表示此部分内容为必填内容
前端使用正则表达式来校验用户输入的数据是否符合要求，有局限性，正则表达式容易被破解。
属性：readonly="readonly" 该文本输入框为只读状态，用户无法修改内容
-->
<form action="https://www.baidu.com"> <!-- 点击登录按钮时跳转到百度 -->
<!-- 正则表达式：pattern="[\u4e00-\u9fa5]{2,8} -->
<p>订单号：<input type="text" readonly="readonly" value="ST33496272215"/></p> <!-- readonly效果：该文本输入框为只读状态，用户无法修改内容 value：存放输入信息 -->
<p>用户名：<input type="text" placeholder="请输入2-8位中文字符" pattern="[\u4e00-\u9fa5]{2,8}" required="required"/></p> <!-- 文本输入框 -->
<p>密 码：<input type="password" placeholder="请输入6-16位密码" pattern="[\w]{6,16}" required="required"/></p> <!-- 密码输入框 空格 -->
<p>邮 箱：<input type="email" placeholder="请输您的邮箱" required="required"/></p>
<p>
<input type="submit" value="提交"/> <!-- submit 效果：实现网页的跳转 -->
<input type="reset" value="重置"/> <!-- reset 效果：重置输入的内容 -->
<input type="hidden" name="hid" value="将标签隐藏"/> <!-- hidden 效果：将标签隐藏，name和value的值正常提交 -->
</p>
</form>
</body>
</html>
运行效果如下：
HBuilderX编辑界面如下图：
文件名为：index.html
<!-- a标签：用来做超链接
href：存放网页URL地址 （绝对地址和相对地址）
target：以什么方式打开新窗口显示新网页
属性值：_blank ：在一个新的标签页显示新网页
属性值 ：_self ：在当前窗口中显示新网页 -->
<a href="https://www.baidu.com" target="_blank">渡娘欢迎你！</a> <br />
<a href="./demo1.html" target="_blank">第一个练习：音视频标签的使用</a> <br />
<a href="./demo2.html" target="_blank">第二个练习：表单标签的使用</a> <br />
<a href="./demo3.html" target="_blank">第三个练习：实现简单的登录</a> <br />
<a href="./demo4.html" target="_blank">第四个练习：正则表达式的使用</a> <br />
<!-- 无序标签（组合标签） -->
<ul>
<li>谁还宅在过去</li>
<li>明天既是未来</li>
<li>岁月总归孤独</li>
<li>尘埃也懂方向</li>
</ul>
<!-- 有序标签 （组合标签） -->
<ol>
<li>首先，还是学习的心态啊！</li>
<li>然后，结合现实多敲轻盈键盘。</li>
<li>之后，漫长的学习过程要不忘初心。</li>
<li>最终，希望你成为自己心目中的样子。</li>
</ol>
</body>
</html>运行效果如下：
HBuilderX编辑界面如下图：
表格标签的使用
文件名为：demo5.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云瑶网络</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<!-- 表格标签：table--tr--td （表格--行--列） -->
<!-- table属性：
border：设置表格线条的粗细，单位像素（px），默认粗细为0（不可见）
width：设置宽度，单位像素（px）
height：设置高度，单位像素（px）
cellspacing：设置单元格之间的间隙，单位像素（px）
cellpadding：设置单元格之间的填充距离， 单位像素（px）
同属性不同属性值（就近原则） -->
<!-- td属性：
align：设置文本内容对齐方式；left：左对齐 right：右对齐 center：居中对齐
<thead><tbody>
表头标签：<th> （加粗居中）
表格的合并：
colspan属性：合并行
rowspan属性：合并列 -->
<center>
<h2>课 程 表</h2>
<table border="1px" width="900px" height="820px" cellspacing="0px"> <!-- 表格标签 -->
<thead> <!-- 表示表头部分 -->
<tr height="40px">
<th>/</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center"><!-- 表示表体部分 -->
<tr>
<td rowspan="5">上午</td>
<td colspan="5"><img src="./img/早读.png" width="30px"><br />早读</td>
</tr>
<tr>
<td><img src="./img/英语.png" width="30px"><br />英语</td>
<td><img src="./img/语文.png" width="30px"><br />语文</td>
<td><img src="./img/数学.png" width="30px"><br />数学</td>
<td><img src="./img/物理.png" width="30px"><br />物理</td>
<td><img src="./img/地理.png" width="30px"><br />地理</td>
</tr>
<tr>
<td><img src="./img/数学.png" width="30px"><br />数学</td>
<td><img src="./img/生物.png" width="30px"><br />生物</td>
<td><img src="./img/语文.png" width="30px"><br />语文</td>
<td><img src="./img/英语.png" width="30px"><br />英语</td>
<td><img src="./img/物理.png" width="30px"><br />物理</td>
</tr>
<tr>
<td><img src="./img/地理.png" width="30px"><br />地理</td>
<td><img src="./img/数学.png" width="30px"><br />数学</td>
<td><img src="./img/英语.png" width="30px"><br />英语</td>
<td><img src="./img/数学.png" width="30px"><br />数学</td>
<td><img src="./img/英语.png" width="30px"><br />英语</td>
</tr>
<tr>
<td><img src="./img/体育.png" width="30px"><br />体育</td>
<td><img src="./img/英语.png" width="30px"><br />英语</td>
<td><img src="./img/化学.png" width="30px"><br />化学</td>
<td><img src="./img/生物.png" width="30px"><br />生物</td>
<td><img src="./img/语文.png" width="30px"><br />语文</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td colspan="5"><img src="./img/午休.png" width="30px"><br />午休</td>
</tr>
<tr>
<td><img src="./img/物理.png" width="30px"><br />物理</td>
<td><img src="./img/美术.png" width="30px"><br />美术</td>
<td><img src="./img/历史.png" width="30px"><br />历史</td>
<td><img src="./img/地理.png" width="30px"><br />地理</td>
<td><img src="./img/数学.png" width="30px"><br />数学</td>
</tr>
<tr>
<td><img src="./img/生物.png" width="30px"><br />生物</td>
<td><img src="./img/语文.png" width="30px"><br />语文</td>
<td><img src="./img/英语.png" width="30px"><br />英语</td>
<td><img src="./img/体育.png" width="30px"><br />体育</td>
<td><img src="./img/美术.png" width="30px"><br />美术</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
运行效果如下：
HBuilderX编辑界面如下图：
商品项目
文件名：index.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head> <!-- 头部 -->
<meta charset="utf-8" /> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>云都商品管理系统</title> <!-- 网页标题 -->
</head>
<!-- frameset标签和body标签是平级标签，故而替代了body标签 -->
<frameset border="3px" rows="10%, *, 10%"> <!-- frameset 标签定义一个分栏列表，分栏数量由子标签frame的数量决定，border定义分栏边界线粗细，rows横向分割占比，cols横向分割占比 -->
<frame src="./top.html" name="top" /> <!-- frame 为当标签，frame标签不能嵌套frame标签 -->
<frameset border="2px" cols="15%, *"> <!-- cols="15%, *" ，*号代表剩余的空间占比，剩余的空间占比不一定对于100%-15%（不写死） -->
<frame src="./left.html" name="left" />
<frame name="right" />
</frameset>
<frame src="./bottom.html" name="bottom" /> <!-- frame标签通过 src属性引入一个页面 -->
</frameset >
</html>
文件名：left.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html> <!-- 整个页面的开始标签 -->
<head> <!-- 头部 -->
<meta charset="utf-8"> <!-- 字符编码：utf-8 ，meta是单标签，meta是标签名，charset是标签属性，"utf-8"是属性值-->
<title>菜单链接</title> <!-- 网页标题 -->
</head>
<body> <!-- 身体 -->
<center> <!-- 居中 -->
<br /> <!-- 换行 -->
<p><a href="./medicine.html" target="right"><img src="../img/medicine.png" width="100px" /><br />灵丹妙药</a></p> <!-- 带图片的链接，图片大小100px -->
<p><a href="./weapon.html" target="right"><img src="../img/weapon.png" width="100px" /><br />神器宝珠</a></p>
<p><a href="./Signin.html" target="right"><img src="../img/Signin.png" width="100px" /><br />掌柜注册</a></p>
<p><a href="./Login.html" target="right"><img src="../img/Login.png" width="100px" /><br />掌柜登录</a></p>
<p><a href="./workbench.html" target="right"><img src="../img/workbench.png" width="100px" /><br />掌柜工作台</a></p>
</center>
</body>
</html>文件名：bottom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>版权信息</title>
</head>
<body>
<center><h3>©版权所有 | 琦鱼笔记</h3></center> <!-- ©版权符号 -->
</body>
</html>文件名：Login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>掌柜登录</title>
</head>
<body>
<center>
<h3>掌柜登录</h3>
<form method="post">
<p>姓 名：<input name="username" type="text" pattern="[\u4e00-\u9fa5]{2,12}" required="required" placeholder="请输入姓名或编号" /></p>
<p>密 码：<input name="password" type="password" pattern="[\w]{3,16}" required="required" placeholder="请输入密码" /></p>
<p>邮 箱：<input name="mailbox" type="email" required="required" placeholder="请输你的邮箱" /></p>
<p><input type="submit" value="登录"> <input type="reset" value="重置"></p>
</form>
</center>
</body>
</html>文件名：medicine.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>灵丹妙药</title>
</head>
<body>
<center>
<br />
<br />
<br />
<table border="2px" cellspacing="0px" cellpadding="10px">
<tr>
<th>灵丹名称</th>
<th>灵丹价格</th>
<th>灵丹功效</th>
<th>灵丹演图</th>
<th>灵丹现货</th>
<th>妙药名称</th>
<th>使用方法</th>
<th>妙药效果</th>
<th>妙药草图</th>
<th>现货数量</th>
<th>妙药价格</th>
</tr>
<tr align="center"> <!-- align="center" ：居中 -->
<td>三仙丹</td>
<td>89云币</td>
<td>加15血量</td>
<td><img src="../img/17.png" width="30px"></td>
<td>12件</td>
<td>凤火灵果</td>
<td>吞服</td>
<td>强健体魄</td>
<td><img src="../img/18.png" width="30px"></td>
<td>2</td>
<td>93斗金</td>
</tr>
<tr align="center">
<td>紫升丹</td>
<td>76云币</td>
<td>加25血量</td>
<td><img src="../img/19.png" width="30px"></td>
<td>16件</td>
<td>千灵参</td>
<td>吞服</td>
<td>抗衰老</td>
<td><img src="../img/20.png" width="30px"></td>
<td>6</td>
<td>75斗金</td>
</tr>
<tr align="center">
<td>白降丹</td>
<td>82云币</td>
<td>加40血量</td>
<td><img src="../img/21.png" width="30px"></td>
<td>21件</td>
<td>血蟒枝</td>
<td>滋补养血</td>
<td>一般</td>
<td><img src="../img/22.png" width="30px"></td>
<td>3</td>
<td>81斗金</td>
</tr>
<tr align="center">
<td>六神丸</td>
<td>92云币</td>
<td>加35血量</td>
<td><img src="../img/23.png" width="30px"></td>
<td>28件</td>
<td>铁经参</td>
<td>吞服</td>
<td>断臂再生</td>
<td><img src="../img/24.png" width="30px"></td>
<td>9</td>
<td>120斗金</td>
</tr>
<tr align="center">
<td>小灵丹</td>
<td>90云币</td>
<td>加30血量</td>
<td><img src="../img/25.png" width="30px"></td>
<td>11件</td>
<td>冰火蛇鳞果</td>
<td>吞服</td>
<td>调理身体</td>
<td><img src="../img/26.png" width="30px"></td>
<td>5</td>
<td>92斗金</td>
</tr>
<tr align="center">
<td>紫宝丹</td>
<td>112云币</td>
<td>加70血量</td>
<td><img src="../img/27.png" width="30px"></td>
<td>16件</td>
<td>望断秋肠露</td>
<td>吞服</td>
<td>提升攻击力</td>
<td><img src="../img/28.png" width="30px"></td>
<td>2</td>
<td>57斗金</td>
</tr>
<tr align="center">
<td>紫雪丹</td>
<td>105云币</td>
<td>加75血量</td>
<td><img src="../img/29.png" width="30px"></td>
<td>12件</td>
<td>九品紫芝</td>
<td>吞服</td>
<td>抗寒</td>
<td><img src="../img/30.png" width="30px"></td>
<td>3</td>
<td>59斗金</td>
</tr>
<tr align="center">
<td>水韵丹</td>
<td>88云币</td>
<td>加60血量</td>
<td><img src="../img/31.png" width="30px"></td>
<td>10件</td>
<td>玉龙涎</td>
<td>外用</td>
<td>洗髓通脑</td>
<td><img src="../img/32.png" width="30px"></td>
<td>1</td>
<td>40斗金</td>
</tr>
</table>
</center>
</body>
</html>文件名：Signin.html
<!DOCTYPE html> <!-- 声明这是一个html文件，该行内容可以不写 -->
<html>
<head>
<meta charset="utf-8">
<title>掌柜注册</title>
</head>
<body>
<center>
<h3>掌柜注册</h3>
<form method="post">
<p>编 号：<input name="number" type="text" value="20241067935" readonly="readonly" /></p>
<p>姓 名：<input name="username" type="text" pattern="[\u4e00-\u9fa5]{2,4}" required="required" placeholder="请输入2-4位中文字符" /></p>
<p>密 码：<input name="password" type="password" pattern="[\w]{3,16}" required="required" placeholder="请输入3-16位字符" /></p>
<p>邮 箱：<input name="mailbox" type="email" required="required" placeholder="请输你的邮箱" /></p>
<p><input type="submit" value="提交"> <input type="reset" value="重置"></p>
</form>
</center>
</body>
</html>文件名：top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题主旨</title>
</head>
<body>
<center><h1>云都商品管理系统</h1></center>
</body>
</html>文件名：weapon.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>神器宝珠</title>
</head>
<body>
<center>
<br />
<br />
<br />
<table border="2px" cellspacing="0px" cellpadding="10px">
<tr>
<th>宝珠名称</th>
<th>宝珠价格</th>
<th>宝珠功效</th>
<th>宝珠丹图</th>
<th>宝珠现货</th>
<th>神器名称</th>
<th>使用难度</th>
<th>杀伤力</th>
<th>神器鸿图</th>
<th>现货数量</th>
<th>神器价格</th>
</tr>
<tr align="center"> <!-- align="center" ： 居中 -->
<td>巨型黑章鱼宝珠</td>
<td>19云币</td>
<td>加8力量</td>
<td><img src="../img/1.png" width="30px"></td>
<td>10件</td>
<td>屠龙刀</td>
<td>难</td>
<td>高</td>
<td><img src="../img/9.png" width="30px"></td>
<td>1</td>
<td>5530斗金</td>
</tr>
<tr align="center">
<td>漫游者麦吉宝珠</td>
<td>33云币</td>
<td>加15力量</td>
<td><img src="../img/2.png" width="30px"></td>
<td>18件</td>
<td>倚天剑</td>
<td>相对简单</td>
<td>高</td>
<td><img src="../img/10.png" width="30px"></td>
<td>1</td>
<td>6200斗金</td>
</tr>
<tr align="center">
<td>牛头统帅宝珠</td>
<td>52云币</td>
<td>加23力量</td>
<td><img src="../img/3.png" width="30px"></td>
<td>22件</td>
<td>玄铁重剑</td>
<td>难</td>
<td>一般</td>
<td><img src="../img/11.png" width="30px"></td>
<td>1</td>
<td>5980斗金</td>
</tr>
<tr align="center">
<td>罗斯特宝珠</td>
<td>62云币</td>
<td>加26力量</td>
<td><img src="../img/4.png" width="30px"></td>
<td>21件</td>
<td>金蛇剑</td>
<td>相对简单</td>
<td>相对一般</td>
<td><img src="../img/12.png" width="30px"></td>
<td>1</td>
<td>5820斗金</td>
</tr>
<tr align="center">
<td>机械吉赛尔宝珠</td>
<td>70云币</td>
<td>加30力量</td>
<td><img src="../img/5.png" width="30px"></td>
<td>19件</td>
<td>打狗棒</td>
<td>相对简单</td>
<td>高</td>
<td><img src="../img/13.png" width="30px"></td>
<td>1</td>
<td>5990斗金</td>
</tr>
<tr align="center">
<td>哥布林王高格宝珠</td>
<td>72云币</td>
<td>加35力量</td>
<td><img src="../img/6.png" width="30px"></td>
<td>11件</td>
<td>君子剑</td>
<td>相对简单</td>
<td>高</td>
<td><img src="../img/14.png" width="30px"></td>
<td>1</td>
<td>5570斗金</td>
</tr>
<tr align="center">
<td>安祖赛弗宝珠</td>
<td>75云币</td>
<td>加38力量</td>
<td><img src="../img/7.png" width="30px"></td>
<td>14件</td>
<td>圣火令</td>
<td>难</td>
<td>一般</td>
<td><img src="../img/15.png" width="30px"></td>
<td>1</td>
<td>5880斗金</td>
</tr>
<tr align="center">
<td>熔弹萨缪尔宝珠</td>
<td>60云币</td>
<td>加30力量</td>
<td><img src="../img/8.png" width="30px"></td>
<td>12件</td>
<td>淑女剑</td>
<td>相对简单</td>
<td>一般</td>
<td><img src="../img/16.png" width="30px"></td>
<td>1</td>
<td>5740斗金</td>
</tr>
</table>
</center>
</body>
</html>文件名：workbench.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>掌柜工作台</title>
</head>
<body>
<center><h2>掌柜工作台</h2>
<marquee direction="left" width="1400px" height="40px">我司于10月1日到10月5日放假5天，祝大家国庆假期愉快！</marquee> <!-- 一个横幅 -->
<form method="post">
<table border="2px" cellspacing="0px" cellpadding="5px">
<tr>
<td colspan="6"><strong>添加商品：</strong></td>
</tr>
<tr>
<td> </td>
<td>
<p>请选择商品类型：
<select>
<option>宝珠</option>
<option>神器</option>
<option>灵丹</option>
<option>妙药</option>
</select>
</p>
</td>
<td><p>请输入商品名称：<input type="text" pattern="[\u4e00-\u9fa5]{2,12}" required="required" placeholder="请输入2-12位中文字符"/></p></td>
<td><p>请输入商品价格：<input type="text" pattern="[\w]{1,12}" required="required" placeholder="请输入1-12位中文字符"/></p>
<p>请选择货币类型：<select>
<option>云币</option>
<option>斗金</option>
</select></p>
</td>
<td><p>请输入商品库存数量：<input type="text" pattern="[\w]{1,10}" required="required" placeholder="请输入1-10位中文字符"/></p></td>
<td><p><p>请选择商品图腾：<input type="file"><p/></p></td>
</tr>
<tr>
<td colspan="6">请输入商品描述：<p><textarea rows="3" cols="200" placeholder="请输入商品功效等信息..."></textarea></p></td>
</tr>
<tr>
<td colspan="6" align="center"><p><input type="submit" value="提交" /> <input type="reset" value="重置" /></p></td>
</tr>
</table>
</form>
<br />
<br />
<br />
<br />
<form method="post">
<table border="2px" cellspacing="0px" cellpadding="5px">
<tr>
<td colspan="2"><strong>删除商品：</strong></td>
<tr>
<tr>
<td>
<p>请选择商品类型：
<select>
<option>宝珠</option>
<option>神器</option>
<option>灵丹</option>
<option>妙药</option>
</select>
</p>
</td>
<td><p>请输入商品名称：<input type="text" pattern="[\u4e00-\u9fa5]{2,12}" required="required" placeholder="请输入2-12位中文字符"/></p></td>
</tr>
<tr>
<td colspan="2" align="center"><p><input type="submit" value="确认删除" /></p></td>
</tr>
</table>
<form>
</center>
</body>
</html>运行效果图：
HBuilderX编辑界面如下图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
