前端内容整理
Posted ghostant
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端内容整理相关的知识，希望对你有一定的参考价值。
正文前：
前端是和用户直接交互的界面的称呼。
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
四、header中常用的标签
- 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.特殊符号
& &
> >
< <
® ?
©?
¥ ￥
空格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以上是关于前端内容整理的主要内容，如果未能解决你的问题，请参考以下文章