1、HTML与HTTP是什么？它们之间有什么联系？
HTML是一种通用的编写超文本的标记语言，HTTP是一套客户端和服务器端都必须遵守的请求和响应的标准或规范，HTML采用HTTP协议在服务器端与客户端之间传输。
2、导航
以下代码使用无序列表并使用图片作为链接元素。
实例
<h3>导航</h3> <!--无序列表--> <ul> <li><a href="https://www.php.cn/course/1078.html"><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="2019python自学视频" width="150"></a></li> <li><a href="https://www.php.cn/course/1077.html"><img src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png" alt="PHP开发免费公益直播课" width="150"></a></li> <li><a href="https://www.php.cn/course/1076.html"><img src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg" alt="从零开始到WEB响应式布局" width="150"></a></li> </ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、商品信息表
以下代码用到了标题、头部与底部，并实现了行与列方向的合并
实例
<table border="1" cellspacing="0" cellpadding="5"> <caption><h3>商品信息表</h3> </caption> <thead> <tr bgcolor="aqua"> <th>品类</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td rowspan="2">手机</td> <td>小米9</td> <td>1000</td> <td>1</td> <td>1000</td> </tr> <tr> <td>IPHONEX</td> <td>1000</td> <td>1</td> <td>1000</td> </tr> <tr> <td rowspan="2">电脑</td> <td>联想</td> <td>1000</td> <td>1</td> <td>1000</td> </tr> <tr> <td>方正</td> <td>1000</td> <td>1</td> <td>1000</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计</td> <td>4</td> <td>4000</td> </tr> </tfoot> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4、用户注册表单
以下实例用到了text、password、email、age、date、checkbox、radio、select、optgroup等表单控件
实例
<h3>用户注册</h3> <form action="login.php" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" value="username"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="不得小于6位" > </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="18" max="60"> </p> <p> <label for="date">生日</label> <input type="date" id="date" name="date"> </p> <p> <label for="">课程</label> <select name="" id=""> <optgroup label="前端"> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" ><label for="programme">写程序</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="secret" checked><label for="secret">保密</label> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <p> <button>提交注册</button> <input type="reset" name="reset" value="重新填写"> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5、网站后台
以下网站后台使用<iframe>内联框架实现
实例
<!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> <ul style="float: left;margin-right: 15px;"> <li><a href="#" target="_self">首页</a></li> <li><a href="demo1.html" target="content">系统设置</a></li> <li><a href="demo2.html" target="content">添加文章</a></li> <li><a href="demo3.html" target="content">修改文章</a></li> <li><a href="demo4.html" target="content">友情链接</a></li> </ul> <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="90%" height="100%"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6、为什么推荐使用语义化的标签？
语义化的标签有以下好处：1.有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。4.支持多终端设备的浏览器渲染。
