本次课程主要学习了html5的基本构造以及常用标签的使用方法。
一、HTML与HTTP
HTML是超文本标记语言，HTTP是超文本传输协议，是一套客户端和服务器端都必须遵守的请求和响应的标准或规范。
二、导航栏的制作
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <header> <nav> <ul> <!-- 在新窗口打开 --> <li> <a href="" target="_balnk">首页</a> </li> <!-- 在父级窗口打开 --> <li><a href="" target="_parent"><img src="1.jpg" alt=""></a></li> <!-- 在框架中打开 --> <li><a href="" target="content">css3</a></li> <!-- 在顶层窗口打开 --> <li><a href="" target="_top">PHP</a></li> <!-- 在当前页面打开 --> <li><a href="" target="_self">登录</a></li> </ul> </nav> </header> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
三、表格的制作
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption> <h2>购物车</h2> </caption> <thead> <tr> <th>ID</th> <th>名称</th> <th>数量</th> <th>单价</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mechrevo Z1</td> <td>1</td> <td>7300</td> <td>7300</td> </tr> <tr> <td>2</td> <td>Mechrevo Z2</td> <td>1</td> <td>7500</td> <td>7500</td> </tr> <tr> <td>3</td> <td>Mechrevo X1</td> <td>1</td> <td>7000</td> <td>7000</td> </tr> <tr> <td rowspan="2">4</td> <td>Mechrevo X2</td> <td>1</td> <td>7600</td> <td>7600</td> </tr> <tr> <td>Mechrevo X2</td> <td>1</td> <td>7600</td> <td>7600</td> </tr> </tbody> <tfoot> <tr> <td colspan=4 align="center">合计</td> <td>29400</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
四、注册表单的制作
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单</title> </head> <body> <h2>注册</h2> <form action="reg.php" method="post"> <p> <label for="user">用户名:</label> <!-- lable是控件标题，它的for属性与控件的id绑定，使点击标题时自动获取控件焦点 --> <input type="text" id="user" name="user" value="liu"> </p> <p> <label for="pwd">密 码:</label> <input type="password" id="pwd" name="pwd"> </p> <p> <label for="email">邮 箱:</label> <input type="email" id="email" name="email" placeholder="email@xx"> </p> <p> <label for="age">年 龄:</label> <input type="number" min="16" max="80" id="age" name="age"> </p> <p> <label for="course">课 程:</label> <select name="course" id="course"> <!-- 下拉选项 --> <optgroup label="前端"> <!--用optgroup来分类，lable为类名--> <option value="html5">html5</option> <option value="css3">css3</option> <option value="JavaScript">JavaScript</option> </optgroup> <!-- 下拉选项 --> <optgroup label="后端"> <!--用optgroup来分类，lable为类名--> <option value="php">php</option> <option value="mysql">mysql</option> <option value="laravel">laravel</option> </optgroup> </select> </p> <p> <!-- 复选项 --> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" id="program" value="program"><label for="program">撸代码</label> <input type="checkbox" name="hobby[]" id="movies" value="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="secret" checked><label for="secret">保密</label> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <p> <label for="">提交</label> <input type="submit" name="submit" id="submit" value="提交"> <input type="reset" name="res" id="res" value="重提"> <input type="button" name="btn" id="btn" value="按钮"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
五、用内联框架实现网站后端
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内联框架iframe</title> </head> <body> <!-- 用target="_content"来实现打开到框架中 --> <ul style="float: left;"> <li> <a href="demo2" target="content">商品</a></li> <li> <a href="demo3" target="content">注册</a></li> <li> <a href="1" target="content">首页</a></li> </ul> <!-- content很重要，它是链接到该框架的入口 --> <!-- srcdoc可以直接写html代码，实现网站后台 --> <iframe srcdoc="<h2>欢迎来到首页</h2>" name="content" id="content" frameborder="1" width="600" height="800"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
六、总结
为什么推荐使用语义化标签？
语句结构规范清晰，利于后期维护
使用语义化标签有利于SEO优化。