![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：代码应该放在代码块中提交,写得很认真, 望坚持下去
Collection
Collection
一、
html：超文本标记语言
http：超文本传输协议
联系：html是通过http进行传输的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我和我的祖国</title>
</head>
<body>
<!-- 二、列表 -->
<nav>
<ul>
<li><a href="#" target="_blank"><img src="/img/1.jpg" alt="我和我的祖国">首页</a></li>
</ul>
</nav>
<!-- 三、表格 -->
<table border="1" cellpadding="5" cellspacing="0">
<caption><h3>购物车</h3></caption>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>华为</td>
<td>8699</td>
<td>1</td>
<td>8699</td>
</tr>
<tr>
<td>2</td>
<td>苹果</td>
<td>18199</td>
<td>2</td>
<td>36398</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">合计</td>
<td>3</td>
<td>45097</td>
</tr>
</tfoot>
<!-- 四、表单 -->
<h3>用户注册</h3>
<form action="login.php" method="post">
<p>
<label for="username">账号：</label>
<input type="username" id="username" name="username" placeholder="用户名不能为空">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="不能少于6位">
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="邮箱必须包含@">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" id="" age"" name="age" min="16" max="80">
</p>
<p>
<label for="">课程</label>
<select name="coures" id="">
<optgroup label="后端">
<option value="">php</option>
<option value="" selected>mysql</option>
<option value="">laravel</option>
</optgroup>
</select>
</p>
<p>
<label for="male">性别：</label>
<input type="radio" name="gender" id="male"><label for="male">男生</label>
<input type="radio" name="gender" id="female"><label for="female">女生</label>
</p>
<p>
<label for="game">爱好</label>
<input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
<input type="checkbox" name="hobby[]" value="proramme" id="proramme" checked><label for="proramme">撸代码</label>
<input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看片</label>
</p>
<p>
<label for="photo">头像上传：</label>
<input type="file" name="photo" id="photo">
</p>
<p>
<input type="button" name="button" value="按钮">
<input type="submit" name="submit" value="提交">
<button>提交</button>
</p>
</form>
<!-- 五、内联框架-->
<ul style="float:left; margin-right:15px;">
<li><a href="#">商品列表</a></li>
<li><a href="#">添家用户</a></li>
<li><a href="#">系统设置</a></li>
</ul>
<iframe srcdoc="<h2>欢迎使用我的后台</h2>" frameborder="1" name="content" width="500" height="450"></iframe>
</body>
</html>
六、
语义化利于优化 便于搜索引擎爬虫抓取