一、HTML与HTTP
HTML：超文本编辑语言，是一种语言；
HTTP：超文本传输协议，是一种协议。
联系：HTML 是通过 HTTP协议将它从服务器传输到本地浏览器，经过浏览器解析，再显示在页面上，然后浏览器对html 文件进行渲染和展示。
二. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏制作</title> </head> <body> <header> <!--作业要求--> <h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1> <!--列表链接--> <p> <ul> <!-- 在新窗口打开 --> <li><a href="#" target="_balnk">秒杀</a></li> <!-- 在父级窗口打开 --> <li><a href="#" target="_parent">优惠券</a></li> <!-- 在框架中打开 --> <li><a href="#" target="content">PLUS会员</a></li> <!-- 在顶层窗口打开 --> <li><a href="#" target="_top">***闪购</a></li> </ul> </p> <!--图片链接--> <p> <!-- 在当前页面打开 --> <a href="https://www.jd.com/" target="_self"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/49773/39/14147/90141/5daed37dE3ac5d1c9/11e175f30f015f09.jpg.webp" alt="京东购物"></a> </p> </header> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption><h3>手机库存表</h3></caption> <thead> <tr bgcolor="#90ee90"> <th>序号</th> <th>名称</th> <th>数量</th> <th>单价</th> <th>金额</th> <th>库管</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>苹果7</td> <td>1</td> <td>5000</td> <td>5000</td> <td rowspan="3" align="center">张三</td> </tr> <tr> <td>2</td> <td>华为P30</td> <td>2</td> <td>4300</td> <td>8600</td> </tr> <tr> <td>3</td> <td>联想手机</td> <td>1</td> <td>2500</td> <td>2500</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计:</td> <!-- <td></td>--> <!-- <td></td>--> <td>4</td> <td colspan="2" align="center" >16100</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件--> <title>用户注册</title> </head> <body> <h2>用户注册</h2> <p> <label for="username">账号：</label> <input type="text" id='username' name="username1" placeholder="请输入您的账号"> </p> <p> <label for="names">姓名：</label> <input type="text" id="names" name="username2" placeholder="请输入您的姓名"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入您的密码"> </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="18" max="70" > </p> <p> <label>爱好：</label> <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" id="movies" value="movies"><label for="movies">看电影</label> <input type="checkbox" name="hobby[]" id="music" value="music"><label for="music">听音乐</label> <input type="checkbox" name="hobby[]" id="swim" value="swim"><label for="swim">打豆豆</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> </p> <p> <label >学习课程</label> <select> <option>请选择</option> <optgroup label="前端课程"> <option>HTML5</option> <option >CSS3</option> <option>JavaScript</option> </optgroup> <optgroup label="后端课程"> <option>PHP</option> <option>C++</option> <option>JAVA</option> </optgroup> </select> </p> <p> <label for="file">文件上传</label> <input type="file" name="file" id="file"> </p> <p> <button type="button">注册</button> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 五、制作一个网站后面, 要求使用`<iframe>`内联框架实现--> <title>网站后台</title> </head> <body> <h2>网站后台界面</h2> <u1 style="float: left;margin-right: 20px;"> <li><a href="https://www.taobao.com/" target="content">淘宝后台管理</a></li> <li><a href="https://www.jd.com/" target="content">京东后台管理</a></li> <li><a href="https://www.pinduoduo.com/" target="content">拼多多后台管理</a></li> <li><a href="https://www.suning.com/" target="content">苏宁易购后台管理</a></li> </u1> </body> <!--srcdoc代替src, 可以在属性值中直接写html代码, 实现后台首页的功能--> <!--name属性非常重要, 它是链接到该框架页面的入口--> <iframe srcdoc="<h2 style='color:red'>欢迎使用Monster管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六. 总结: 推荐使用语义化的标签的原因。
1. 方便代码的阅读和维护；
2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容；
3.使用语义化标签会具有更好地搜索引擎优化；
4.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。