前端内容整理(一)

正文前：

前端是和用户直接交互的界面的称呼。
web是基于B/S，本质上是基于C/S。为什么用一个浏览器，可以访问百度，访问博客园....等等服务器？因为都遵循着HTTP协议

HTTP协议

HTTP协议全称叫超文本传输协议。规定了浏览器与服务端之间数据传输的格式。

一、四大特性

基于请求响应。一次请求对应一次响应
基于TCP/IP作用于应用层上的协议
无状态，不保留客户端的状态。（cookies，session，token来源）
无连接（长连接 websocket---类似于http协议的大补丁）

二、数据格式

1.请求格式：

请求首行（请求方式、请求url、协议版本、）
请求头（key=value键值对）
请求体（get请求无请求体）

2.响应格式：

响应首行（状态码）
响应头（key=value键值对）
响应体（存放浏览器对用户展示的数据）

3.响应状态码

用数字来表示响应的状态。

1XX：服务端已经成功接收到客户端的数据正在处理

2XX：200请求成功。

3XX：重定向

4XX：404请求资源不存在，403不具备请求该资源的条件

5XX：500服务端内部错误。

HTML语言

html全称是超文本标记语言，是浏览器的语言，浏览器可以通过识别html语言将数据加以渲染，然后对用户进行展示。

从这个角度看，浏览器之所以能访问各个服务器得到数据，是因为在遵循HTTP协议的前提下，各个服务器都通过html的语言格式返回数据，让浏览器能够正确的渲染数据。

一、html注释：

二、html文档结构

<html>
    <header>
        <!--存放给浏览器看的内容-->
    </header>
    <body>
        <!--真正的数据-->
    </body>
</html>

三、标签的分类

1.按标签数量

双标签
自闭合标签

2.按标签所占区

块级标签 h1~h6 p br hr div
行内标签 u s i b span

title：定义网页的标题
style：内部支持直接写css代码
link：引入外部的css文件
script：内部可以直接编写js代码，可以通过src属性引用外部js代码。
meta：name属性。keywords，decription

五、body内常用的标签

1.基本标签

h1~h6：标题标签
s：删除线 strikethrough
b：加粗 bold
u：下划线 underline
i：斜体 italic
p：段落 paragraph
br：换行 break
hr： Horizontal rule 水平线

2.特殊符号

&amp; & 
&gt;  >
&lt;  <
&reg; ®
&copy;© 
&yen; ￥
&nbsp; 空格

3.常用标签

div 块级标签和span 行内标签本身没有任何特殊意义，但用的频率很高。可以用来做前期的页面布局。

标签应该具备的属性
1.id属性:类似于身份证号  用来唯一标识当前html页面中的某一个标签在同一个html页面中 id值不能重复
2.class属性:类似于面向对象的继承直接引用别的类的样式
----------------------------------------------------
<img> 自闭合标签
src：
1.可以写url
2.可以写本地的图片地址
alt：当图片加载失败时默认展示的提示信息
title：当鼠标悬浮在图片上的时候展示的信息
width，height: 修改图片的大小，只修改一个时自动缩放图片。
---------------------------------------------------
<a></a> achor 双标签
href:
放一个url，点击自动跳转。
target：
控制是否在当前页跳转: _self,_blank
锚点功能：
href可以填写另一个标签的id值。如#aaa
----------------------------------------------------
<ul>   unorder list 双标签 无序列表
    <li> list item
        在页面上实现规则排列的文本，可以用无序列表实现。
    </li>
</ul>
----------------------------------------------------
<ol>  order list 双标签  排序列表
    <li> list item
        
    </li>
</ol>
----------------------------------------------------
<dl>  Definition List 标题列表
    <dt> Definition Term
        标题
    </dt>
    <dd> Definition Description
        内容
    </dd>
</dl>
------------------------------------------------------
<table> 表格标签（******）
    <thead> 表头
        <tr> 表行
            <th>  表头名
            </th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>   单元格数据
            </td>
        </tr>
    </tbody>
</table>
tr---table row
th---table header cell
td----table data cell
---------------------------------------------------------
<form> 表单标签（*******） POST提交数据的标签块。
</form>
参数：
	aciton：数据的提交的路径。1.不写默认当前地址。2.全路径(https://www.baidu.com)3.只写路径后缀/index/
*************************************************
<input> 自闭合标签
type:
	text
	password
	radio
	checkbox
	date
	reset
	button
	submit
	file
*************************************************
<textarea> 获取大段文本
</textarea>
*************************************************
<select>   下拉框标签
    <option></option>
</select>
参数：
	selected
	multiple