1.描述HTML与HTTP是什么,他们之间有什么联系?
HTML：超文本标记语言。一种通用的编写超文本的标记语言。
HTTP：超文本传输协议。
超文本：使用html标记语言编写的文档，以“.html”为扩展名。
传输协议：http是一套客户端和服务器端都必须遵守的请求和响应的标准或规范。
HTML与HTTP与之间的联系：HTML用来编写超文本文档，HTTP用来在客户端和服务器端间传输HTML编写的超文本文档。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <!--导航语义标签--> <nav> <!--无序列表开始--> <ul> <li> <!-- 以图片为链接元素链接到php中文网的php开发栏目--> <a href="https://www.php.cn/course/list/29.html"><img src="1.png" alt="php开发"></a></li> <li> <!-- 以图片为链接元素链接到php中文网的前端开发栏目--> <a href="https://www.php.cn/course/list/1.html"><img src="2.png" alt="前端开发"></a></li> <li> <!--以图片为链接元素链接到php中文网的服务端开发栏目--> <a href="https://www.php.cn/course/list/3.html"><img src="3.png" alt="服务端开发"></a></li> <li> <!--以图片为链接元素链接到php中文网的移动开发栏目--> <a href="https://www.php.cn/course/list/5.html"><img src="4.png" alt="移动开发"></a></li> <li> <!--以图片为链接元素链接到php中文网的数据库栏目--> <a href="https://www.php.cn/course/list/4.html"><img src="5.png" alt="数据库"></a></li> </ul> </nav> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
实例
<!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <title>商品信息表</title> </head> <body> <!-- 商品信息表 --> <table border='1' cellspacing="0" width='500'> <!-- 表格标题 --> <caption>商品信息表</caption> <!-- 表格部头信息 --> <thead> <tr bgcolor="lightgray"> <th>产品名称</th> <th>品牌</th> <th>数量</th> <th>单价</th> </tr> </thead> <!-- 表格主体内容 --> <tbody> <tr> <td>手机</td> <td>华为</td> <td>1</td> <td>6000</td> </tr> <tr> <td>电视</td> <td>小米</td> <td>2</td> <td>16000</td> </tr><tr> <td>笔记本</td> <td>联想</td> <td>3</td> <td>18000</td> </tr> <tr> <td>苹果</td> <td>ipad</td> <td>1</td> <td>8000</td> </tr> </tbody> <!-- 表格底部内容 --> <tfoot> <tr> <td colspan=3>总价</td> <td>48 000</td> </tr></tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册信息表</title> </head> <body> <!-- 用户注册信息表单 --> <form action="login.php" method="post"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> </p> <p> <label for="pw">密码:</label> <input type="password" id="pw" name="pw" placeholder="请输入密码"> </p> <p> <label for="age">年龄:</label> <input type="number" name="age" id="age" min="18" max="60"> </p> <p> <label for="">性别:</label> <input type="radio" id="man" name="sex" ><label for="man">男</label> <input type="radio" id="woman" name="sex" checked><label for="woman">女</label> <input type="radio" id="screct" name="sex"><label for="screct">保密</label> </p> <p> <label for="origin">籍贯:</label> <select name="origin" id="origin"> <optgroup label="四川省"> <option value="0">成都市</option> <option value="1">遂宁市</option> <option value="2">自贡市</option> <option value="3">宜宾市</option> </optgroup> <optgroup label="广东省"> <option value="0">深圳市</option> <option value="1">广州市</option> <option value="2">佛山市</option> </optgroup> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" id="game" name="hobby[]"><label for="game">玩游戏</label> <input type="checkbox" id="dance" name="hobby[]"><label for="dance">跳舞</label> <input type="checkbox" id="sing" name="hobby[]"><label for="sing">唱歌</label> </p> <p> <label for="photo">头像上传:</label> <input type="file" id="photo"> </p> <p> <button>按钮</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <h2>网站后台</h2> <ul style="float: left; margin-right: 15px;"> <li><a href="daohang.html" target="content">导航栏</a></li> <li><a href="goods.html" target="content">商品信息表</a></li> <li><a href="registration.html" target="content">用户注册</a></li> </ul> <iframe name="content" width="600px" height="580px" srcdoc="<h2>欢迎使用后台管理</h2>"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
1、有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2、便于开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。