1.描述HTML与HTTP是什么,他们之间有什么联系? HTML是一种超文本标记语言，（全称是Hypertext Markup Language）它包括一系列标签．通过这些标签可以将网络上的文档格式统一，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTTP是一种超文本传输协议，（全称是Hypertext Transfer Protocol）它通常运行在能够联网的设备上，它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。 他们之间有什么联系?HTML做成的客户端需要HTTP的传输协议，没HTTP协议，数据不能传输，HTML也没有什么用了。
HTML的文档结构：
HTML的元素，标签，属性
HTML的常用标签：
细说表格：
1.表格是最重要的数据格式化工具, 早期还是主要网页布局工具(基本废弃)。
2.表格是由一组标签组成,要注意正确的嵌套关系。
3.<table>: 表格所有元素都应该包含在一组<table>标签中
4.表格是由行<tr>与列<td>组成,一行中多个称为列的单元格
5.表格中的数据仅允许保存在单元格标签中: <td>...</td>
6.<table>中有四个常用的子标签<caption>:
设置表格标题,如"学生信息表"<thead>:
表头部分, 内部应该是<tr><th>...</th>...</tr><tbody>:
表格主体, 内部应该是:<tr><td>...</td>...</tr><tfoot>:
表格底部, 内部子标签与<tbody>相同<tbody>可以不只一个, 而其它三个仅允许出现一次
7.表格可以通过属性设置基本样式, 例如边框,宽度等, 推荐使用CSS实现。
8.表格单元格的合并操作:
列方向: <td colspan="n">
行方向: <td rowspan="n">
实例：制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品表</title> </head> <body> <h1>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h1> <!--border:设置表格的边框。 cellpadding:设置表格单元边界与单元内容之间的间距。 cellspacing:设置表格单元格间距--> <table border="1" width="500px;" cellpadding="0" cellspacing="0" style="text-align: center;"> <caption>商品信息表</caption> <!-- 声明表格 --> <thead> <!-- 表格页眉 --> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </thead> <tbody> <!-- 表格主体 --> <tr> <td>1</td> <td>小米9</td> <td>3999</td> <td>4</td> <td rowspan="5" >52991</td> </tr> <tr> <td>2</td> <td>华为10</td> <td>4999</td> <td>2</td> </tr> <tr> <td>3</td> <td>苹果11</td> <td>8999</td> <td>3</td> </tr> <tfoot> <!-- 表格页脚 --> <tr> <td colspan="3">签名:</td> <td colspan="2">陈小虎</td> </tr> </tfoot> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
细说表单
表单是用户与服务器交互的重要入口,请求与数据, 都要通过表单发送 所以表单是服务器受到攻击的主要来源, 表单数据的安全性非常重要 表单的用户数据存在于各种类型的表单控件中, 例如文本框,下拉列表,复选框等 表单元素是由由一组标签组成: <form>,<input>, <select>,<textarea>...
<form>元素属性 <form>元素,也叫表单元素, 它是组织表单控件的载体(可选,但推荐总是写上它)。 action: 后台处理脚本地址。 method: 请求提交方式,GET / POST。 name: 表单名称,用在js中较多 <input>元素属性 <input>: 表单控件元素, 控件类型由type属性决定, 常用属性: type: 默认为text,输入文本框 name: 后台接收用户数据的变量名称, 这里称为表单字段 value: 默认值,可选 required: 是否是必填项? placeholder: 输入提示文本信息 size: 控件显示长度, 推荐使用css控制 maxlength: 允许用户输入的最多字符数量 disabled: 字段禁用, 此时数据不会被提交到服务器 readonly: 只读字段, 允许提交,但不允许用户修改 <input type="">type类型 text: 输入文本框, 默认值 password: 输入文本用星号*或实心圆点代替 email: 输入文本必须为邮箱格式 url: 输入内容为URL地址格式 tel: 电话号码, 移动端会自动调出数字键盘 search: 搜索框 number: 只允许输入数字,允许设置取值区间,有自增/减小按钮 hidden: 隐藏域, 数据会发送, 但是页面上用户看不到 radio: 单选按钮, 与name, checked配合. checkbox: 复选框, 与name, checked配合 file: 文件上传控件 date / week / month: 日期控件,不同浏览器可能表现不同 <select><option>下拉列表 下拉列表, 可以预置一些选项供用户选择, 用户体验好,并且很安全 下拉列表中的字段名name和值value属性分别在二个标签中< select name="..."><option value="...">... 允许多选, 使用selected设置默认选项 按钮 <input type="button">: 普通按钮, 点击不会提交表单 <input type="submit">: 提交按钮, 点击后会提交表单 <input type="reset">: 重置按钮,点击后会重置控件为默认值 <button>: 提交按钮,等价<button type="submit"> <button type="button">: 普通按钮, 点击不会提交表单 <textarea>文本域 文本域本质上就是一个多行文本框, 大家可课后查阅相关资料学习
实例：制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <h1>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</h1> <!-- action:数据接收地址。 method:数据提交方式，get/post accept-charset：数据的编码--> <div style="background: #ccc; width: 500px;"> <h3>用户注册</h3> <form action="demo1_submit" method="post" accept-charset="utf-8" > 用户名:<input type="text" name=""> <br> 密码：<input type="password" name=""> <br> 邮箱:<input type="email" placeholder="email@email.com" name=""> <br> 性别： <input type="radio" name="xb">男 <input type="radio" name="xb" checked>女 <br> 爱好: <input type="checkbox" name="">篮球 <input type="checkbox" name="">足球 <input type="checkbox" name="">跑步 <br> 所在城市: <select> <option value="">请选择</option> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select> <br> 头像上传: <input type="file" name=""> <br> <button type="">注册</button> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style type="text/css" media="screen">
img{
width: 50px;
}
li{
float:left;
list-style: none;
}
</style>
</head>
<body>
<h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1>
<div>
<ul>
<li><a href="#"><img src="https://static.easyicon.net/preview/123/1237610.gif" alt=""><br>首页</a></li>
<li><a href="#"><img src="https://static.easyicon.net/preview/123/1237617.gif" alt=""><br>查找</a></li>
<li><a href="#"><img src="https://static.easyicon.net/preview/123/1237555.gif" alt=""><br>消息</a></li>
<li><a href="#"><img src="https://static.easyicon.net/preview/123/1237515.gif" alt=""><br>娱乐</a></li>
<li><a href="#"><img src="https://static.easyicon.net/preview/123/1237618.gif" alt=""><br>设置</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联样式</title> </head> <body> <div> <h1>制作一个网站后面, 要求使用`iframe`内联框架实现</h1> <br> <ul style="float: left; margin-right: 20px;"> <li><a href="navigation.html" target="content">导航</a></li> <li><a href="commodity.html" target="content">商品信息表</a></li> <li><a href="register.html" target="content">注册</a></li> </ul> <iframe srcdoc="<h1>欢迎━(*｀∀´*)ノ亻!</ h1>" frameborder="1" name="content" width="600px" height="500px"></iframe> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6.总结:使用语义化的标签有助于SEO的优化，也是未来大势所趋。
