html语法
图片+跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的小米</title>
</head>
<body>
<h1>红米K70</h1>
<img src="/static/mi.jpg" style="width: 800px;">
<br>
<a href="https://www.mi.com/shop/buy/detail?product_id=19436" target="_blank"><img style="width:200px" src="/static/m1.jpg"></a>
<a href="https://www.mi.com/shop/buy/detail?product_id=19432" target="_blank"><img style="width:200px" src="/static/m2.jpg"></a>
<a href="https://www.mi.com/shop/buy/detail?product_id=19437" target="_blank"><img style="width:200px" src="/static/m3.jpg"></a>
</body>
</html>
点击图标实现转跳
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的表</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
<tbody>
<tr><td>王小明</td><td>男</td><td>20</td></tr>
<tr><td>李小红</td><td>女</td><td>18</td></tr>
<tr><td>王小明</td><td>男</td><td>20</td></tr>
</tbody>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的表</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<th>ID</th>
<th>头像</th>
<th>产品</th>
<th>价格</th>
<th>更多</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="/static/m1.jpg" width="100px" height="100px"/>
</td>
<td>Redmi K70 pro</td>
<td>2599</td>
<td>
<a href="https://www.mi.com/shop/buy/detail?product_id=19436" target="_blank">详细信息</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
<img src="/static/m2.jpg" width="100px" height="100px"/>
</td>
<td>Redmi K70</td>
<td>2399</td>
<td>
<a href="https://www.mi.com/shop/buy/detail?product_id=19432" target="_blank">详细信息</a>
</td>
</tr>
<tr>
<td>1</td>
<td>
<img src="/static/m3.jpg" width="100px" height="100px"/>
</td>
<td>Redmi K70 SE</td>
<td>1999</td>
<td>
<a href="https://www.mi.com/shop/buy/detail?product_id=19437" target="_blank">详细信息</a>
</td>
</tr>
</tbody>
</body>
</html>
input+select+textarea(登陆界面,简单展示向)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<!--输入框-->
<h3>请登录</h3>
<input type="text" placeholder="用户名">
<br>
<!--密码框-->
<input type="password" placeholder="密码">
<br>
<!--单选栏-->
性别：
<input type="radio" name="n1">男
<input type="radio" name="n1">女
<input type="radio" name="n1">外星人
<br>
<!--复选栏-->
爱好：
<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox">Rap
<br>
<!--下拉框 (多选:multiple)-->
你的身份是:
<br>
<select multiple>
<option value="1">京爷</option>
<option value="2">沪爷</option>
<option value="3">92爷</option>
<option value="3">C9爷</option>
<option value="3">屌丝</option>
<option value="3">莫欺少年穷</option>
</select>
<br>
<!--输入多行文本-->
简介：
<br>
<textarea rows="3" placeholder="介绍一下你自己"></textarea>
<br>
<!--按钮-->
<input type="submit" value="登录1"><!--两种不同按钮submit:提交表单按钮 button:普通按钮-->
<input type="button" value="登录2">
<br>
<!--文件上传-->
上传头像:
<input type="file" >
<br>
<a href="register.html">注册</a>
</body>
</html>
input+select+textarea(注册界面,系统开发向)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
</head>
<body>
<h3>请注册</h3>
<!--用户名框(普通输入框)-->
<div>
用户名:<input type="text" placeholder="用户名">
</div>
<!--密码框(内容掩盖输入框)-->
<div>
密码:<input type="password" placeholder="密码">
</div>
<div>
再次确认密码:<input type="password" placeholder="再次确认密码">
</div>
<!--性别(单选框)-->
<div>
性别：
<input type="radio" name="n1">男
<input type="radio" name="n1">女
<input type="radio" name="n1">外星人
</div>
<!--爱好(复选框)-->
<div>
爱好：
<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox">Rap
</div>
<!--身份(下拉菜单(多选))-->
<div>
你的身份是:
<br>
<select multiple>
<option value="1">京爷</option>
<option value="2">沪爷</option>
<option value="3">92爷</option>
<option value="3">C9爷</option>
<option value="3">屌丝</option>
<option value="3">莫欺少年穷</option>
</select>
</div>
<!--城市(下拉菜单(单选))-->
<div>
城市:
<select>
<option value="1">北京</option>
<option value="1">上海</option>
<option value="1">广州</option>
<option value="1">深圳</option>
<option value="1">其他</option>
</select>
</div>
<!--简介(多行文本输入框)-->
<div>
简介：
<br>
<textarea rows="3" placeholder="介绍一下你自己"></textarea>
</div>
<!--注册按钮(提交按钮和普通按钮)-->
<div>
<input type="submit" value="注册1">
<input type="button" value="注册2">
</div>
<!--上传头像(文件上传)-->
<div>
上传头像:<input type="file" >
</div>
</body>
</html>
浙公网安备 33010602011771号