目录
前端的主要内容
html 内容
css 动作
JavaScript 外观
软件开发的架构
CS 客户端 服务端
BS 浏览器 服务端
BS本质也是CS
浏览器中输入网址之后敲回车发生几件事
1.向服务端发生请求
2.服务端接收请求
3.服务端返回相应的请求
4.浏览器接收响应把渲染好的界面返回给用户
HTTP协议
四大特性
1.基于请求响应
2.基于TCP/IP，作用于应用层之上的协议
3.无状态
不保存用户的信息
4.无/短链接
"""
超文本传输协议，规定服务端和浏览器(客户端)之间交互的格式
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP，作用于应用层之上的协议
3.无状态
不保存用户的信息
4.无/短链接
# 请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(k,v 键值对)
\r\n
请求体(并不是所有的请求方式都有，有post，没有get，post用于存放比较敏感的数据如用户名，密码)
# 响应数据格式
响应首行(标识HTTP协议版本，响应状态码)
响应头(k,v 键值对)
\r\n
响应体(并不是所有的请求方式都有，有post，没有get，post用于存放比较敏感的数据如用户名，密码)
# 响应状态码
用一串简单的数字来表达一些复杂的状态和描述性信息
404 请求资源不存在
1XX 服务端已经成功接收你的数据，你可以继续提交数据
2XX 服务端成功响应了你的请求 (200 ok)
3XX 重定向(如 你要访问一个页面，这个页面需要登录之后才能访问，直接访问会跳转到登录界面)
4XX 请求错误
404 请求资源错误
403 请求资源不合法，或者不符合访问资源的条件
5XX 服务器内部错误
500(服务器问题)
# 请求方式
get
朝服务器要数据(也是可以携带数据)(不安全)
url?username=jame&password=123
如: 输入百度网址获取内容
post
向服务器提交数据
如：用户登录之后的响应
# url 网址(统一资源定位符)
HTML
注释
超文本标记语言，用于创建网页的标记语言
HTML的文档结构
- HTML5文档
-
<head></head> : 定义配置给浏览器看 -
<title>Title</title> ：网页标题给用户看 -
<body> </body>: 浏览器渲染部分，给用户看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> ：网页标题给用户看
</head>
<html>
<head></head> : 定义配置给浏览器看
<body> : 浏览器渲染部分，给用户看
</body>
</html>
HTML标签格式
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性：
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
标签的分类
<h1></h1>
<a></a>
<img/>
单标签
双标签(自闭和标签)
head 内标签
-
<title></title> # 展示网页内标题的 -
<style> </style> # 内部书写css代码 -
<script> </script> # 内部书写 Javascript -
<link rel="stylesheet" href="mycss.css"> # 用来书写 css代码 -
<meta name="keywords" content="........"> # 当你在浏览器输入关键字可能被搜索到 -
<meta name="description" content="淘宝网。。。。。。"> # 网页描述信息
<title></title> # 展示网页内标题的
<style>
h1{
color: greenyellow;
}
</style> # 内部书写css代码
<script>
alert(123)
</script> # 内部书写 Javascript
<script src="03%20myjs.js"></script> # 引入外部js文件
<link rel="stylesheet" href="mycss.css"> # 用来书写 css代码
<meta name="keywords" content="........"> # 当你在浏览器输入关键字可能被搜索到
<meta name="description" content="淘宝网。。。。。。"> # 网页描述信息
body内的标签
基本标签
-
<h1>h1标题</h1> -
<div>div标签</div> -
<p>段落标签</p> -
<br> 换行 -
<hr> 水平线
特殊字符
& &
¥ ¥
版权 ©
注册 ®
<!--大于号小于号的实体标签-->
<!--> > < < -->
<p>这是大于号 > <br> 这是小于号 <</p>
列表
表格标签
无序列表
-
<li></li>
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性
- disc 实心圆圈默认值
- circle 空心圆圈
- square 实心方块
- none 无样式
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格
<!--一个tr表示一行-->
<tr></tr>
<!-- 习惯表头加粗使用th(加粗文本)-->
<th>username</th>
<!-- 正常文本-->
<td>username</td>
<!-- 表单 放一些数据信息-->
<tbody></tbody>
<!-- colspan 水平方向占几行-->
<td colspan="2">tony</td>
<!-- rowspan 垂直方向占两行-->
<td rowspan="2">123</td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--border 加外框 10 变为立体-->
<!--cellpadding 框内文字与边框的距离-->
<table border="1" cellpadding="10">
<!-- 表头放一些字段信息-->
<thead>
<!--一个tr表示一行-->
<tr>
<!-- 习惯表头加粗使用th(加粗文本)-->
<th>username</th>
<th>password</th>
<th>hobby</th>
<!-- 正常文本-->
<!-- <td>username</td>-->
</tr>
</thead>
<!-- 表单 放一些数据信息-->
<tbody>
<tr>
<!-- colspan 水平方向占几行-->
<td colspan="2">tony</td>
<!-- <td>123</td>-->
<td>read</td>
</tr>
<tr>
<!-- rowspan 垂直方向占两行-->
<td rowspan="2">123</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--后续一般使用框架封装好的-->
表单标签(form)
在改form标签内部书写的获取用户的数据都会被form表单提交到后端
action 控制数据提交的后端的路径
(给那个服务端提交数据)
1. 什么都不写 默认朝当前页面所在的url进行提交
2. 全路径 朝着指定的路径提交
3. 只写路径后缀 自动识别当前的ip和端口(port)拼接到前面
- label标签
<!-- label for="id" 点击提示到对应的输入框中--> <label for="d1"> <!-- input 用户输入--> username: <input type="text" id="d1" value="默认值"> </label>
能够获取用户输入的数据(包括用户输入的、用户选择的、用户上传的...)
基于网络把数据传给后端进行处理
# 注册功能
- input 标签
text 普通文本
password 密文表示
data 日期
submit 用来出发form表单提交数据的动作
button 按钮
reset 重置内容
checkbox 多选
select 标签 默认选中 selected
file 获取文件
textarea 获取大段文本
target 规定action中默认的地址(_self)
# 能够重置触发form表单提交数据的按钮
1.<input>
2.<button></button>
3.radio 单选
<!-- checked="checked" 默认勾选
属性名和属性值相同可以简写-->
默认选中需要加 check="checked"
# 所有获取用户输入的标签 需要有 name标签(类似 字段中的key value)
# 用户输入的标签 加了value之后有默认值
<label for="d1">
<!-- input 用户输入-->
username: <input type="text" id="d1" value="默认值">
</label>
disable 禁用
readonly 只读
hidden 隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册界面</h1>
<!-- 在改form标签内部书写的获取用户的数据都会
被form表单提交到后端-->
<!-- action 控制数据提交的后端的路径
(给那个服务端提交数据)
1. 什么都不写 默认朝当前页面所在的url进行提交
2. 全路径 朝着指定的路径提交
3. 只写路径后缀 自动识别当前的ip和端口(port)拼接到前面
-->
<form action="">
<p>
<!-- label for="id" 点击提示到对应的输入框中-->
<label for="d1">
<!-- input 用户输入-->
username: <input type="text" id="d1" value="默认值">
</label>
</p>
<p>
<label for="d2">
password: <input type="password" id="d2">
</label>
</p>
<p>
<label for="d3">
生日: <input type="date" id="d3">
</label>
</p>
<p>
<label for="s1">
<!-- 没有指定文本的内容 不同浏览器打开之后
渲染的文本内容不一致-->
<input type="submit" id="s1" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
</label>
</p>
<button>
点击
</button>
<p>
<label for="s2">性别:
<!-- checked="checked" 默认勾选
属性名和属性值相同可以简写-->
<input type="radio" id="s2" name="gender" checked="checked">男
<input type="radio" name="gender">其他
<input type="radio" name="gender">女
</label>
</p>
<p>
<label for="h1">爱好
<!-- 默认选中 checked-->
<input type="checkbox" id="h1" checked>read
<input type="checkbox" id="h2">play
<input type="checkbox" id="h3" checked>sleep
</label>
</p>
<p>省市
<!-- 下拉框-->
<select name="" id="">
<option value="">上海</option>
<option value="" selected>北京</option>
<option value="">广州</option>
</select>
</p>
<p>天气
<select name="" id="" multiple>
<option value="" selected>晴</option>
<option value="">阴</option>
<option value="">多云</option>
</select>
</p>
<p>
<!-- 获取文件-->
<!-- multiple 一次可以选择多个文件-->
<label for="">
文件<input type="file" multiple>
</label>
</p>
<p>
<label for="">自我介绍
<textarea name="" id="" cols="30" rows="10" maxlength="20">
</textarea>
</label>
</p>
</form>
</body>
</html>
扫一扫
5762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
