描述HTML与HTTP是什么,他们之间有什么联系?
HTML：超文本标记语言
HTTP：超文本传输协议
HTML是用来进行前端展示的语言，所有浏览器上显示的内容，无论后端是用什么语言编写，都得转化成HTML显示，而HTTP协议，是互联网浏览器与服务器端进行交互传输所要遵循的协议，就像加密一样，只有遵循了某种相同协议才能进行交互
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <!--容器：头部--> <header> <!--容器：导航--> <nav> <!--无序列表--> <ul> <li><a href="">首页</a></li> <li><a href="">产品</a></li> <li><a href="">案例</a></li> <li><a href=""><img src="" alt="图片描述文本"></a></li> </ul> </nav> </header> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <main> <!--设置表格边框为1，单元格线间距0，宽度为400--> <table border="1" cellspacing="0" width="400px"> <caption>商品信息表</caption> <thead> <tr> <td>名称</td> <td>数量(斤)</td> <td>单价(￥)</td> </tr> </thead> <tbody> <tr> <td>苹果</td> <td>5.00</td> <td>2.00</td> </tr> <tr> <td>香蕉</td> <td>15.00</td> <td>3.00</td> </tr> <tr> <td>桔子</td> <td>3.00</td> <td>1.00</td> </tr> </tbody> <tfoot> <tr> <td>总金额</td> <!--列合并--> <td colspan="2">58.00</td> </tr> <tr> <!--行合并--> <td rowspan="2">备注</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tfoot> </table> </main> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</title> </head> <body> <h3>用户注册</h3> <!--表单接收数据的处理文件为login.php,传输方法为Post，post不使用键值对显式传输数据，隐式--> <form action="login.php" method="post"> <p> <label for="username">账号：</label> <!--文本类型--> <input type="text" id="username" name="username" value="请输入用户名"> </p> <p> <label for="password">密码：</label> <!--密码类型，密码显示为*--> <input type="password" id="password" name="password" placeholder="请输入密码"> </p> <p> <label for="age">年龄:</label> <!--数字类型--> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <!--不分组下拉列表--> <label for="">不分组课程</label> <select> <option>请选择</option> <option value="">不分组01</option> <option value="">不分组02</option> <option value="">不分组03</option> </select> </p> <p> <!--分组下拉列表，并默认选中分组0101--> <label for="">分组课程</label> <select> <optgroup label="分组01"> <option value="" checked>分组0101</option> <option value="">分组0102</option> <option value="">分组0103</option> </optgroup> <optgroup label="分组02"> <option value="">分组0201</option> <option value="">分组0202</option> <option value="">分组0203</option> </optgroup> </select> </p> <p> <label for="">性别：</label> <!--单选按钮，同属gender按钮组--> <input type="radio" name="gender" id="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female"><label for="female">女</label> </p> <p> <label for="">兴趣爱好：</label> <!--复选框，可多先，同属hobby[]--> <input type="checkbox" name="hobby[]" value="program" id="program"><label for="program">编程</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label> </p> <p> <label for="photo">头像上传</label> <input type="file" name="photo" id="photo"> </p> <p> <!--推荐按钮，其它形式可使用input,设置Input的type属性，type:submit提交 type:reset 重置 type:button--> <button type="button">注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个网站后面, 要求使用`<iframe>`内联框架实现</title> </head> <body> <header></header> <main> <!--无序列表--> <ul> <!--target=content,菜单被点击会在iframe名为content的内联框架显示 href里页面内容，--> <li><a href="" target="content">菜单01</a></li> <li><a>菜单02</a></li> <li><a>菜单03</a></li> <li><a>菜单04</a></li> <li><a>菜单05</a></li> </ul> <!--设置iframe边框国1，宽度为400，高度为300--> <!--如果需要使用html代码，可以用srcdoc替代src，--> <iframe src="" frameborder="1" name="content" width="400" height="300"></iframe> </main> <footer></footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
1，语义化标签利于搜索引擎优化，都是英文词汇，也利于人为理解
2，块级元素，直观，易于布局，块级元素默认占据一行
作业总结：
1，能够使用语义化标签的尽量使用语义化标签
2，内联框架 iframe不要用在网站前台，不利于SEO，
3，input的类型text,password,email,file,number,radio,checkbox
4，表单form method有两种方式 post和get,get为显式传输，post为隐式，密码之类隐私数据使用post
5，html文档需要设置html版本，编码，语言之类信息