一、HTML与HTTP是什么,他们之间有什么联系?
1.HTML：HTML全称Hypertext Markup Language，也就是“超文本链接标示语言”。HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 即平常上网所看到的的网页。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。
2.HTTP : HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议。当你上网浏览网页的时候，浏览器和web服务器之间就会通过HTTP在Internet上进行数据的发送和接收。HTTP是一个基于请求/响应模式的、无状态的协议。
3.联系：，我们使用HTTP协议打开的一个网站 ，而这个网站显示出来的内容是由HTML这种标签语言编写的。
二、 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作导航</title> </head> <body> <ul> <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">首页</a></li> <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">头部</a></li> <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">内容</a></li> <li style="list-style:none"><a href="#"><img src="img/timg.jpg" alt="" style="width: 200px;">底部</a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <!--border 简写属性在一个声明设置所有的边框属性--> <!--cellspacing 属性规定单元格之间的空间--> <!--cellpadding 属性规定单元边沿与其内容之间的空白。--> <table border="1" width="500" cellspacing="0" cellpadding="5"> <caption> <h3>购物车</h3> </caption> <!--头部--> <thead> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!--主体--> <tr> <td>1</td> <td>oppo</td> <td>2000</td> <td>1</td> <td>2000</td> </tr> <tr> <td>2</td> <td>vive</td> <td>2000</td> <td>1</td> <td>2000</td> </tr> <tr> <td>3</td> <td>华为</td> <td>2000</td> <td>1</td> <td>2000</td> </tr> <tr> <!--colspan 合并单元格--> <td colspan="3" align="center">合计:</td> <!-- <td>x</td> --> <!-- <td>x</td> --> <td>3</td> <td>6000</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与控件</title> </head> <body> <h3>用户注册</h3> <form action="" method="post"> <p> <label for="user_name">账户:</label> <input type="text" name="user_name" id="user_name" value="huang"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="6-12位之间"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" > </p> <p> <label for="ages">年龄:</label> <input type="number" name="ages" id="ages" max="80" min="15" style="width: 170px"> </p> <p> <label for="">水果:</label> <select name="" id="" style="width: 170px"> <option value="">请选择水果</option> <!--optgroup 分组--> <optgroup label="树上"> <option value="">苹果</option> <option value="">梨</option> <option value="">桃</option> </optgroup> <optgroup label="地上"> <option value="">西瓜</option> <option value="">哈密瓜</option> <option value="">白瓜</option> </optgroup> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="Jitter" id="Jitter"><label for="Jitter">抖音</label> <input type="checkbox" name="hobby[]" value="Novel" id="Novel" checked><label for="Novel">小说</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看片</label> </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> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="img">图片:</label> <input type="file" name="img" id="img"> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="reset" value="按钮"> <button type="button">注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <ul> <li><a href="form.html" target="content">用户注册</a></li> <li><a href="commodity_information.html" target="content">商品信息</a></li> <li><a href="Production_navigation.html" target="content">系统</a></li> </ul> <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：为什么推荐使用语义化的标签?
语义化标签是构建一个html的基础，由其构建的页面可以由浏览器直接运行不需要搭配环境，有利于seo的优化。
手抄：上班缘故手抄板上课之前再交
