1.描述HTML与HTTP是什么,他们之间有什么联系?
答:HTML是超文本标记语言是用于描述网页文档的一种标记语言,HTTP是超文本传输协议,html是基于http的基础上,设计http的最初目的是为了提供一种发布和接收html页面的方法.
2.制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
2.1实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <ul> <li> <a href="https://www.php.cn/blog/scrui9.html" target="_self">我的PHP中文网博客</a> </li> <li> <a href="https://www.php.cn" target="_self">PHP中文网</a> </li> <li> <a href="https://www.php.cn/blog/scrui9.html" target="_blank"> <img src="https://img.php.cn/upload/avatar/000/303/575/5db67c87cd368643.gif" alt="我的PHP中文网博客"> </a> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.2手抄代码
3.制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
3.1实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table border="1px" cellspacing="0px" cellpadding="5px" width="500px"> <caption><h3>货物清单</h3></caption> <thead> <tr bgcolor="#6495ed"> <th>类型</th> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td rowspan="3" align="center">手机类</td> <td>1</td> <td>iPhone 11 Pro</td> <td>9999</td> <td>1</td> <td>9999</td> </tr> <tr> <td>2</td> <td>HUAWEI P30 Pro</td> <td>6288</td> <td>2</td> <td>12576</td> </tr> <tr> <td>3</td> <td>Galaxy Note10</td> <td>7999</td> <td>10</td> <td>79990</td> </tr> <tr> <td rowspan="3" align="center">电脑类</td> <td>4</td> <td>华为(2019)MateBookX Pro</td> <td>8699</td> <td>1</td> <td>8699</td> </tr> <tr> <td>5</td> <td>苹果(2019)MacBook Pro</td> <td>18199</td> <td>1</td> <td>18199</td> </tr> <tr> <td>6</td> <td>ThinkPad(2019)X1 extreme</td> <td>13500</td> <td>1</td> <td>13500</td> </tr> </tbody> <!-- 页眉--> <tfoot> <tr> <td colspan="4" align="center">总计:</td> <td>16</td> <td>142963</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.2手抄
4.制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
4.1实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</title> </head> <body> <h3>用户注册</h3> <form action="login.php" method="post"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" value="JasonGuo"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" value="" placeholder="不能少于6位"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" value="" placeholder="xxx@qq.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" value="" min="16" max="80"> </p> <p> <label for="">课程:</label> <select name="coures" id=""> <optgroup label="前端"> <option value="" selected>HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">PHP</option> <option value="">MySQL</option> <option value="">Laraver</option> </optgroup> </select> </p> <p> <label for="sex">性别:</label> <input type="radio" id="sex1" name="sex" checked><label for="sex1">男生</label> <input type="radio" id="sex0" name="sex"><label for="sex0">女生</label> </p> <p> <label for="">爱好:</label> <input type="checkbox" id="game" name="hobby[]" value="game" checked><label for="game">玩游戏</label> <input type="checkbox" id="proramme" name="hobby[]" value="proramme"> <label for="proramme">写代码</label> <input type="checkbox" id="watchMovie" name="hobby[]" value="watchMovie"> <label for="watchMovie">看电影</label> </p> <p> <label for="photo">上传头像:</label> <input type="file" id="photo" name="photo"> </p> <button>提交</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.2手抄
5.制作一个网站后面, 要求使用`<iframe>`内联框架实现
5.1实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个网站后面, 要求使用`<iframe>`内联框架实现</title> </head> <body> <ul style="float: left;margin-right: 15px;"> <li><a href="https://www.php.cn/blog/scrui9.html" target="content">我的博客</a></li> <li><a href="https://www.jd.com" target="content">打开京东</a></li> <li><a href="https://www.baidu.com" target="content">百度一下</a></li> </ul> <iframe src="" frameborder="1" name="content" width="600" height="500"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5.2手抄
6. 总结: 为什么推荐使用语义化的标签?
答:1.网站更好的SEO效果，更容易被搜索引擎收录，符合w3c标准。
2. 网页显示效果的保证，在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3. 方便代码的阅读和维护，从而提高团队的效率和协调能力。
