一,表单标签
–1,代码
| 注册表单 | |
|---|---|
| 用户名： |
|
| 密码： |
|
| 确认密码： |
|
| 昵称： |
|
| 邮箱： |
|
| 性别： |
男 女 |
| 爱好： |
篮球 足球 羽毛球 |
<!-- TODO 自己完成 剩下的行 -->
<tr>
<td>城市：</td>
<td>
<select name="city"><!-- 下拉框 -->
<!-- 选项,配置value属性,来减少给服务器输出的数据大小,就提交了bj而不是北京 -->
<option value="bj">北京</option>
<option value="cx">朝鲜</option>
<option value="xa">西安</option>
</select>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="tou" /> <!-- 上传文件-->
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" /> <!-- 普通输入框-->
<img src="images/a.png" /><!-- 验证码图片 -->
<input type="button" value="点我换一张" />
</td>
</tr>
<tr>
<td>自我描述：</td>
<td>
<textarea>请在这儿输入....</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"> <!-- 列合并-->
<!-- 只有form表单的提交,提交的按钮,用来把数据提交到服务器 -->
<input type="submit" value="提交"/>
<!-- reset按钮用来重置网页 -->
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
--2,小票
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永和大王小票</title>
</head>
<body>
<!-- 自带换行的效果 div p br -->
<div>顾客联</div>
<div>请您留意取餐账单号</div>
<div>自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div>--结账单--</div>
<div>账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>
油条豆浆套餐<br />
1 X --非矾油条<br />
1 X --现磨豆浆
</td>
<td>7.0</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>支付宝花呗一元早餐 1</td>
<td>-3.0</td>
</tr>
<tr>
<td>合计</td>
<td>4.0</td>
</tr> <tr>
<td>支付宝</td>
<td>1.0</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td>3.0</td>
</tr>
</table>
<!-- h5特效 -->
<!-- 向网页中加入音频文件
controls属性可以使用控件
-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 向网页中加入视频频文件
controls属性可以使用控件
loop属性用来循环播放
-->
<video controls="controls" loop="loop">
<source src="b.mp4"></source>
</video>
</body>
</html>
--3,标签
--html:表示这是一个网页文件,必须遵循HTML语法
--head:设置网页的基本信息
--title:设置网页的标题
--meta:设置网页的编码
--body:网页的主体
--div:块元素,自带换行
--p:块元素,自带换行
--h1~h6:标题标签
--span:不换行
--hr:水平线
--ol(有序) li / ul(无序) li :定义列表
--form:表单,用来向服务器提交数据
--table:表格
--tr:表里的行元素
--th:表头,自带加粗
--td:行里的列元素
--input:输入框
--type:text/number/password/week/email/submit/button/file
--br:换行
--img:图片标签,用来往网页里加入图片
二,CSS
–1,概述
专门用来修饰HTML网页文件的样式
怎么定位元素位置 + 使用属性修饰
–2,测试
<!-- 向html中引入css代码,使用style标签 -->
<style>
body{/* 把body里的所有元素居中 */
text-align: center; /* 文字居中 */
background-color: bisque; /* 背景色 */
font-size: 20px; /* 字号 */
}
</style>
</head>
<body>
<!-- 需求：文字居中 -->
<div align="center">hello css</div> <!-- 换行-->
<p style="text-align: center;">hello css</p> <!-- 换行-->
<span> 你好 </span> <!-- 不换行-->
</body>
</html>
--3,语法
选择器{
属性名=属性值;
color=red;
属性名=属性值;
font-size:10px;
}
--4,基本选择器
--标签名选择器
span{color:red;} /*选中网页中所有的span,设置字体颜色是红色*/
--类选择器
--给指定元素加class属性
<p class="hi"> 你好 </p>
--通过.获取class属性的位置
.hi{ color:red; } /* 选中网页中所有class=hi的元素,修饰样式*/
--id选择器
--给指定元素加id属性,并且要保证id的值是唯一的
<input id="hello" />
--通过#获取id属性的位置
#hello{ color:red; } /*选中网页中所有id=hello的元素*/
--5,改造小票
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<!-- 内部CSS -->
<style>
body{/* 用来统一网页的风格 */
width: 300px; /* 设置网页的宽度*/
font-size: 10px; /* 统一字号 */
color: black;/* 统一字的颜色 */
/* background-image: url("a.png"); 背景图片 */
}
/* 语法:选择器{样式1;样式2;样式3} */
/* 第一种选择器::: 标签名选择器 */
div{
color: red; /*红色的字,覆盖掉了body原来的效果*/
}
/* 第二种选择器::: 类选择器(给元素加class属性+通过.获取class的值) */
.me{/* 获取网页中所有class=me的元素 */
font-size: 20px; /* 字号加大 */
text-indent: 15px;/* 首行缩进 */
}
/* 第三种选择器:::id选择器(给元素加id属性+通过#获取id的值) */
#please{
text-align: center;/* 居中 */
}
/* 第四种选择器:::分组选择器(统一给多个选择器的元素设置) */
.me,#please{
border: 2px dashed red;
/* 设置边框 2px宽度 虚线 线的颜色*/
border-radius: 5px;/* 边框的圆角 */
}
/* 第五种选择器:::属性选择器 */
input[type='text']{ /* 按照属性的值过滤input*/
background-color: aqua;/* 设置背景色 */
}
</style>
</head>
<body>
<input type="text" />
<input type="password" />
<input type="week" />
<input type="text" />
<!-- 需求:把第一行变成红色的字 -->
<!--行内CSS -->
<div style="color: red;">顾客联</div>
<div class="me">请您留意取餐账单号</div>
<div id="please">自取顾客联</div>
<div class="me">永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div id="please">--结账单--</div>
<div>账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>
油条豆浆套餐<br />
1 X --非矾油条<br />
1 X --现磨豆浆
</td>
<td>7.0</td>
</tr>
</table>
</body>
</html>
扩展:
–把HTML和CSS的综合案例敲5遍(test3.html)
–把form综合案例敲5遍(昨天的test4.html)
–http协议
–作用：用来处理 客户端要给服务器 发送的数据 的格式
用来处理 服务器要给客户端 响应的数据 的格式
–发送数据的方式:get/post…
–请求Request:从客户端到服务器的连接过程
–请求头确定访问哪个服务器的哪个程序
–请求方式:是用了get还是post,如果是是get方式地址栏中就可以看到数据
如果是post方式,数据安全,浏览器无法看到数据
–HTTP状态码:一般是3位数,有不同意义.
常见的有:200成功,404是客户端访问了不存在的资源,5XX是服务器代码的 问题
–响应Response:从服务器到客户端的连接过程
–状态行:要遵循的协议和版本号 HTTP/1.1 404 not found
–响应报头:统计响应数据的大小
通知浏览器用什么编码打开
要展示的数据类型
–HTTP状态码:一般是3位数,有不同意义.
常见的有:200成功,404是客户端访问了不存在的资源,5XX是服务器代码的 问题
–get提交和post提交的区别
–get提交:不安全,数据都会在地址栏做拼接,数据不能太长
http://127.0.0.1/test.html ? name=123 & age=12 & addr=abc
–post提交:安全,不在地址栏中展示,只能编写java代码解析数据