一、HTTP与HTML是什么？ 有什么联系？
HTTP:超文本传输协议
HTML:超文本标记语言
两者的联系是超文本。超文本：超级文本的缩写，采用超链接的方法将各种不同空间的文字信息组织在一起的网状文本，用来表示文本之间相关的内容。HTML是是编写超文本的语言，HTTP是将经过HTML编译的超文本在客户端和服务器端接受请求和响应的时候必须遵守的标准或规范。
二、制作一个导航
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作导航</title> </head> <body> <h3>导航</h3> <ul> <a href="imgie/1.jpg"><li>衣服</li></a> <a href="imgie/2.jpg"><li>裤子</li></a> <a href="imgie/3.jpg"><li>鞋</li></a> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="8"> <caption><h3>商品表</h3></caption> <thead> <tr> <th>编号</th> <th>商品</th> <th>价格</th> </tr> </thead> <!--上面是头部--> <tbod> <tr> <td>1</td> <td>香蕉</td> <td>1元</td> </tr> <tr> <td>2</td> <td>苹果</td> <td>2元</td> </tr> <tr> <td>3</td> <td>梨子</td> <td>3元</td> </tr> </tbod> <tfool> <tr> <td colspan="2" align="center">共计</td> <td>6元</td> </tr> </tfool> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四:制作一张完整的用户注册表
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册表</title> </head> <body> <h1 align="center">注册表</h1> <form action="" method="post" align="center"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" placeholder="请输入你的账号"> </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="16" max="100"> </p> <p> <label for="time">出生时间:</label> <input type="date" id="time" name="time" > </p> <p> <label for="add">地址:</label> <select name="add" id="add"> <optgroup label="省份"> <option value=""selected>浙江</option> <option value="">江苏</option> <option value="">湖南</option> <option value="">安徽</option> </optgroup> <optgroup label="市县"> <option value="">温州</option> <option value="">杭州</option> <option value="">深圳</option> <option value="">广州</option> </optgroup> </select> </p> <p> <label for="">性别:</label> <input type="radio" name="gender" id="male" checked> <label for="male">男</label> <input type="radio" name="gender" id="female"> <label for="female">女</label> <input type="radio" name="gender" id="baomi"> <label for="baomi">保密</label> </p> <p> <label for="sport">爱好:</label> <input type="checkbox" name="hobby" id="game"><label for="game">游戏</label> <input type="checkbox" name="hobby" id="sport" checked><label for="sport">运动</label> <input type="checkbox" name="hobby" id="TV"><label for="TV">看电视</label> </p> <p><button>提交</button></p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、制作一个网站后台，用<iframe>内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联网站后台</title> </head> <body> <form align="center"> <iframe src="https://j.map.baidu.com/d4/FQo" frameborder="2" width="500" height="500"></iframe> </form> <br> <hr> <form align="center"> <ui> <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> </ui> <iframe srcdoc="<h2>网站后台</h2>" frameborder="1" width="500" height="500" name="content"></iframe> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
为什么使用语义化标签？ 有利于SEO优化，搜索引擎可以直接看到网页内容，符合W3C的标准；有利于阅读代码。
