1.描述HTML与HTTP是什么及二者之间的关系
HTML 是一种超文本标记语言, 即对使用超链接形式文本的标记语言. 使用HTML超文本标记语言编写的文档,使用.html为文件后缀名.
HTTP 是网络传输协议,是一套客户端与服务端都必须遵守的请求和响应的标准与规范.
客户端:用户端,也叫用户代理,是指可发起HTTP请求到指定服务器端口的设备,最常见的为游览器.
服务端:存储着大量的html文档或图像视频资源供客户端访问.
HTML 与 HTTP 二者之间的关系:
客户端通过HTTP协议访问服务端指定端口,服务端接收到HTTP请求,返回存储于服务器上指定的html文件给客户端展示.
2.一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实现功能:使用无序列表制作成导航,列表内嵌套a超连接标签指向页面地址, a超连接标签内可放置图片,制作成超连接图片.
实例
<!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> 标签 --> <header> <!-- <nav>标签定义导航 --> <nav> <!-- ul 定义无序列表 <ol> 有序列表 <dl>定义列表 <dl>:定义列表<dt>:定义标题<dd>:定义内容 --> <ul> <li><a href="index.html">首页</a></li> <li><a href="index.html">一页</a></li> <li><a href="index.html">二页</a></li> <li><a href="index.html">三页</a></li> </ul> </nav> <!-- <a>:定义超连接 href:属性指向连接地址 --> <!-- img:标签定义图片, src:指向图片地址,alt:图片不显示用此内容替换 --> <a href="index.html"><img height="25"src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2842581165,2714498976&fm=26&gp=0.jpg" alt="图片"></a> </header> </body> </html>
点击 "运行实例" 按钮查看在线实例
问题:导航不是横着的的
html超文本标记语言,开头格式为<!DOCTYPE html>用 <html></html>包裹语言.
<head></head>定义文档头部,网页属性
<meta> 定义文档语言.
<a> 标签内的 target属性 定义页面窗口的打开方式.
3制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
使用<table>定义表格<th>表头<tr>行<td>列 标签制作商品表格,使用 rowspan 属性合并列colspan合并行 ,数值规定合并的行或列的格数
实例
<!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" width="500" cellspacing="0" cellpadding="5" > <tr bgcolor="red"> <th></th> <th>序号</th> <th>商品</th> <th>价格</th> </tr> <tr> <td bgcolor="blue" rowspan="3" align="center" >商品详情</td> <td>1</td> <td>手机</td> <td>1000</td> </tr> <tr> <td>2</td> <td>电脑</td> <td>3500</td> </tr> <tr> <td>3</td> <td>电视</td> <td>10000</td> </tr> <tr> <td colspan="3" align="center" >合计:</td> <td>58597</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
rowspan 和colspan 合并行和列, 此属性放置在,td 和th ,放置前后顺序, ,调整其合并表格的位置.
4制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
HTML超文本语言内,form标签用于创建表单,action为表单的发送地址,method为发送方式,post 和get两种
<input>为输入信息, 根据其type属性的不同,展示为不同的输入形态, text文本,password密码,emali邮箱, number数字等,
选择属性:checkbox复选框 radio单选框, name属性要相同才生效果
select选择标签, option为选择框的值, optgroup为选择组
按钮: type属性 submit 表单提交按钮 ,button
特殊按钮reset重置属性.
实例
<!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> <h1>注册</h1> <form> <p> <label for="name">账号:</label> <input type="text" id="name" name="name" placeholder="账号"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="密码"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placehloder="邮箱" value="dollar@qq.com"> </p> <p> <!-- type="number" 只能输入数字 min最小数字,max 最大数字 --> <label for="age">年龄:</label> <input type="number" id="age" name="age" id="age" min="16" max="80"> </p> <p> <!-- <select>选择菜单 --> <select name=" " id=" "> <!-- optgroup选择组 --> <optgroup label="一班"> <option value="张三">张三</option> <option value="李四">李四</option> </optgroup> <optgroup label="二班"> <option value="王五">王五</option> <option value="四六 ">四六</option> </optgroup> </select> </p> <!-- checkbox 多选 gender 单选 --> <!-- type属性设定多选单选, name必须相同 checked 默认选项 --> <p> <lavel>爱好:</lavel> <label for="game">玩</label> <input type="checkbox" name="hobby" value="geme" id="game" checked> <label for="music">音乐</label> <input type="checkbox" name="hobby" value="music" id="music"> </p> <!-- 单选 gender --> <p> <label>性别</label> <label for="male">男</label> <input type="radio" name="gender" value="male" id="male"> <label for="female">女</label> <input type="radio" name="gender" value="female" id="female"> </p> <!-- 文件上传 file--> <p> <label for="p">头像上传</label> <input type="file" name="p" id="p"> </p> <!-- 提交按钮 --> <!-- type 属性为 reset 重置表单输入 --> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填写"> <input type="button" name="buttong" value="按钮"> <button>按钮</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
不足:选择框可以使用默认且不能看到值. 如显示请选择,
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
iframe 内联标签 用来包含显示另一个文档, 一般用来制作后台管理页面.
重点:iframe标签的name属性要等于要显示页面的的 a标签中的 target的值,不然无法使用.
实例
<!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 定义无序列表 <ol> 有序列表 <dl>定义列表 <dl>:定义列表<dt>:定义标题<dd>:定义内容 --> <ul> <li><a href="index.html" target="content">首页</a></li> <li><a href="index.html"target="content">一页</a></li> <li><a href="index.html"target="content">二页</a></li> <li><a href="index.html"target="content">三页</a></li> </ul> </nav> </header> <iframe crcdoc="后台页面" name="content" width="500" height="500"> </iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
语义化标签
<header>头部<nav>导航</nav></header> <main> 页面主题 <article> 主要内容 </article> <aside> 次要内容 </aside> <section> 内容类似的区域 </section></main><footer> 页脚信息</footer>
有利于seo优化, 被搜索引擎收录, 符合w3c标准, 所有语义化标签都是块级元素,独占一行,会撑满父级元素, 所以都是上下排列.