前端三剑客与HTTP协议-CSDN博客

前端(三剑客)

html 内容输出
css 格式渲染
javascripts 动态效果

http协议

http协议的由来：根据软件开发架构，一般软件都是cs或者bs架构，bs本质上也是一种cs架构。
如果是cs架构，开发者可以自定义报文的头部即自定义协议。如果是bs架构，为了适用于所有的软件，browers定义了一种标准，这种标准就是http(超文本传输协议)

http协议的组成及其特点

组成
请求首行 --请求方法、http协议版本
请求头部 --kv键值对
\r\n
请求体

响应首行 —状态码
响应头部
\r\n
响应体

五大特点：

基于请求响应
基于tcp/ip作用于应用层之上的协议
无状态（cookies、sessions、token）
无/短链接(websocket)

状态码的含义：
1xx: 服务端正在处理你的请求，客户端可以再次发送请求
2xx: 服务端已经响应客户请求
3xx: 链接的重定向
4xx: 请求错误（请求资源不存在，请求语法错误等）
5xx:: 服务器内部错误

http的请求方式:
get请求：向服务端要数据
post请求：向服务端发送数据

**url:**统一资源定位符

html–超文本标记语言()

注释方式

<!-- 行注释-->
<!-- 
块注释
-->

html代码结构

<！DOCTYPE html>
<html>
	<head></head>  head内主要是给浏览器看的
	<body></body>  body内主要是给浏览器解释给用户看的
</html>

html常用标签

head内常用标签

<title>定义网页标题</title>
<style>定义内部样式</style>
<scripts>定义js或者引入外部js样式</scripts>
<link/> 引入外部样式文件或者网站图标
<meta> 定义网站源信息，其中有些属性常用：http-equiv、name(description、name)

body内常用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>段落标签</p>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<br/>换行
<hr/>水平线

特殊字符

>  &gt
<  &lt
￥ &yen
空格 &nbsp
@  &copy
注册  &reg

div:块级标签，无实际的意义，为css而生
span:行内标签，无实际的意义，为css而生
注意：p标签是块级标签，但是p标签不能包含块级标签和p标签

img标签
<img src="图片路径" alt="图片未加载成功是显示的提示" title="鼠标悬浮时的提示" width="宽" height="高" （调整其中一个将等比缩放）>
a标签
<a href="链接" target="是否另起一个页面加载内容">
href中的链接可以是网页链接、本地文件、本网页中的某个位置（锚）
target中可以是_blank、_self

列表、标题列表、表格

列表（有序列表和无序列表）
有序列表
<ol type="1" start="2">  #type可以定义有序列表的序号类型（1、A、I）,start可以定义从什么位置开始
	<li>内容一<li>
</ol>
无序列表
<ul type="disc">   #type可以定义无序的头部标记，默认是disc实心的
	<li>内容</li>
	<li>内容</li>
</ul>
标题列表
<dl>
	<dt>标题1</dt>
	<dd>内容1</dd>
	<dt>标题2<dt>
	<dd>内容2<dd>
</dl>
---------------
表格
<table>
	<thead>
		<tr>
		<th>name</th>
		<th>age</th>
		<th>favorites</th>
		</tr>	
	</thead>
	<tbody>
		<tr>
		<td>lzz</td>
		<td>27</td>
		<td>football</td>
		</tr>
	<tbody>
</table>
表格常见属性：
border:表格边框
cellpadding:内边距
cellspacing:外边距
rowspan:单元格竖跨多少行
colspan:单元格横跨多少行

form表单:表单是html中较为复杂的一部分，表单是为了将用户提交的数据给到后端服务器，实现用户和web服务器的交互
表单包含input系列标签（包括单选框、复选框、文本字段、提交按钮）、还包含textarea、select、fieldset、label等标签

input标签
<form  action="" method="" name="">  #action定义表单将提交到什么地方,method定义提交表单的http方法,name规定识别表单的名称
	<input type="text"value="姓名"/>  #input会根据type的不同类型变化为多种形态。text、password、date、checkbox(复选框)、radio、submit、reset、button、hidden、file
</form>

select标签
<form action="" method="">
	<select name="city" id="city">   #multiple定义是多选属性、value定义提交时的选项值
		<option value="1">chinese</option>
		<option selected="selected" value="2">english</option>
	</select>
</form>

lable标签：为input元素定义标记，不会向用户提供任何效果
<form>
	<label for="username" >姓名</label>  #为input输入的内容提供提示信息
	<input type="text" id="username"/>
</form>

textarea标签
<form>	
	<textarea name="" id="" cols="" rows="" >请输入内容</textarea>	
</form>