Lesson2-周二（7.13）
问题总结
- HTML只能做网页结构，大小写不区分，由浏览器执行
- 开发重点：表单、表格、 超链接、图片、列表、iframe
一、HTML表格
表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。
<table></table> 表格标记
<tr></tr> 表格行
<td></td> 表格列
在<table>里放<tr>,在<tr>里放<td>
table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生列表-中北软院</title>
</head>
<body>
<table border="1px" align="center"><!--数字越大，边框越粗,align表示对齐方式-->
<tr>
<td>姓名</td>
<td>学校</td>
<td>专业</td>
</tr>
<tr>
<td>郭泳妍</td>
<td>中北大学</td>
<td>软件学院</td>
</tr>
<tr>
<td>闫序晨</td>
<td>中北大学</td>
<td>软件工程</td>
</tr>
<tr>
<td>合计</td>
<td colspan="2"></td><!--跨两列即合并两个单元格，行也可以-->
</tr>
</table>
</body>
</html>
表格的嵌套使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<form action="checkuser.html" method="post">
<table align="center">
<tr>
<td>用户名</td>
<td>
<input name="uname" type="text"> <!--HTML标记可以嵌套使用-->
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input name="upsw" type="password"> <!--HTML标记可以嵌套使用-->
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录">
</td>
</tr>
</table>
</form>
</body>
</html>
二、HTML超链接
- 链接可以到自己的网页或者外部网站超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
- 语法：在标签
<a>中使用了href属性来描述链接的地址。
<a href="链接地址">网页提示文字</a>
<a href="url">链接文本</a>
line.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="table.html">链接到我写的表格网页</a><br>
<a href="http://www.qq.com">腾讯官网</a><br>
<a href="http://www.nuc.edu.cn">友情链接：中北官网</a><br>
</body>
</html>
HTML图片
image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片使用</title>
</head>
<body>
<img width="200px" height="200px" src="图片/1.png"><br> <!--src后面添加图片路径-->
<img src="图片/2.png"><br>
<a href="http://www.qq.com"><img src="图片/2.png"></a><!--把图片设置为超链接-->
</body>
</html>
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
HTML列表
分类
- 有序列表
<ul> </ul> - 无序列表
<ol> </ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<ul> <!--ul表示无序列表，li表示列表中的项-->
<li>中北大学</li>
<li>北京理工大学</li>
<li>东北大学</li>
</ul>
<hr> <!--hr表示一条横线-->
<ol> <!--ol表示有序列表-->
<li>软件工程</li>
<li>自动化专业</li>
<li>电子信息工程</li>
</ol>
</body>
</html>
标题
HTML中共6级标题，从H1-H6
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<h1>中北大学软件学院2020级</h1>
<h2>暑假小学期实训</h2>
<h3>同学们很优秀</h3>
<h4>祝大家成功！</h4>
<ul> <!--ul表示无序列表，li表示列表中的项-->
<li>中北大学</li>
<li>北京理工大学</li>
<li>东北大学</li>
</ul>
<hr> <!--hr表示一条横线-->
<ol> <!--ol表示有序列表-->
<li>软件工程</li>
<li>自动化专业</li>
<li>电子信息工程</li>
</ol>
</body>
</html>
段落和DIV块
<p>这是个段落</p> <!--效果相同关键认识标记不同-->
<div><b>这是一个块</b></div> <!--<b>表示加粗-->
<span>用户名不能为空</span><!--一般用于提示，span和label不会自动换行，而段落和块会自动换行，但效果均一样-->
<span>密码必须是6位！</span>
<label>这是一个标签</label>
<label>软件学院</label>
HTML颜色
屏幕取色器
颜色的值（主要用）为十六进制，以#开头
所有颜色均由三种色调配而成（RGB）
十六进制颜色值与颜色名列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML颜色与字符实体</title>
</head>
<body bgcolor="blanchedalmond"> <!--bgcolor表示背景色-->
</body>
</html>
字符实体(后面的分号切记要写)
面试题中常问：HTML中空格如何表示？
HTML字符实体参考手册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML颜色与字符实体</title>
</head>
<body bgcolor="blanchedalmond"> <!--bgcolor表示背景色-->
¥8000 <!--所有字符实体 分号一定不能丢-->
<!--一个 表示一个空格--->
©软件学院版权所有
</body>
</html>
iframe框架（常用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML框架</title>
</head>
<body>
<iframe width="500px" height="500px" src="http://www.qq.com" name="mycontent" frameborder="10"></iframe><!--一个网页显示另一个网页-->
</body>
</html>
高频面试题：get和post请求有什么区别？
get和post请求 HTTP协议中的两种发送请求的方法
HTTP是基于TCP/IP的关于数据在万维网中如何通信的协议。
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark（书签），而POST不可以。
GET请求会被浏览器主动cache（存储），而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
GET请求在URL中传送的参数是有长度限制的，而POST没有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
GET和POST本质上就是TCP链接，GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。但这并不能为了高速把所有的post替换成get，因为：
GET与POST都有自己的语义，不能随便混用。- 据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的
TCP在验证数据包完整性上，有非常大的优点。 - 并不是所有浏览器都会在
POST中发送两次包，Firefox就只发送一次。
概括
post方式提交表单，表单数据在地址栏不显示，比较安全
get方式提交表单，数据会显示在地址栏上，不安全。post提交数据，数据量大小不限，get一般最大为2K
课后作业
12306注册使用表格的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12306注册页面</title>
</head>
<body>
<table border="10" align="center">
<tr align="center">
<td>用户名：</td>
<td>
<input type="text" placeholder="用户名设置成功后不可修改">6-30位字母、数字或"_",字母开头
</td>
</tr>
<tr align="center">
<td>登陆密码：</td>
<td>
<input type="password" placeholder="6-20位字母、数字或符号">
</td>
</tr>
<tr align="center">
<td>确认密码：</td>
<td>
<input type="password" placeholder="再次输入您的登录密码">
</td>
</tr>
<tr align="center">
<td>证件类型：</td>
<td>
<select>
<selected option>中国居民身份证</option>
<option>港澳居民来往内地通信证</option>
<option>台湾居民来往大陆通行证</option>
<option>护照</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="1"></td>
<td>
<input checked type="radio" name="license type">中国居民身份证<br>
<input type="radio" name="license type">外国人永居留身份证<br>
<input type="radio" name="license type">港澳台居民居住证<br>
</td>
</tr>
<tr align="center">
<td>姓名：</td>
<td>
<input type="text" placeholder="请输入姓名">姓名填写规则（用于身份核验，请正确填写）
</td>
</tr>
<tr align="center">
<td>证件号码：</td>
<td>
<input type="text" placeholder="请输入您的证件号码">（用于身份核验，请正确填写）
</td>
</tr>
<tr align="center">
<td>邮箱：</td>
<td>
<input type="text" placeholder="请正确填写邮箱地址">
</td>
</tr>
<tr align="center">
<td>手机号码（+86）：</td>
<td>
<input type="text" placeholder="请输入您的手机号码">请正确填写手机号码，稍后将向该手机号码发送短信验证码
</td>
</tr>
<tr align="center">
<td>旅客类型：</td>
<td>
<select>
<option selected>成人</option>
<option>儿童</option>
<option>学生</option>
<option>残旧军人、伤残人民警察</option>
<select>
</td>
</tr>
<tr align="center">
<td colspan="1"></td>
<td>
<input type="radio" name="typedef">我已阅读并同意遵守 《中国铁路客户服务中心网站服务条款》 《隐私权政策》
</td>
</tr>
<tr align="center">
<td colspan="1"></td>
<td>
<input type="submit" value="下一步" >
</td>
</tr>
</table>
</body>
</html>
