前端基础

时间 2019-11-30

标签前端基础繁體版

原文原文链接

web

（World wild web）即全球广域网，也称为万维网，它是一基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是创建在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级连接将Internet上的信息节点组织成一个互为关联的网状结构。css

1、超文本（Hyper text）超文本是一种用户接口方式，用以显示文本及与文本相关的内容。html

2、超媒体（hypermedia）是超文本（hypertext）和多媒体在信息浏览环境下的结合。用户不只能从一个文本跳到另外一个文本，并且能够激活一段声音，显示一个图形，甚至能够播放一段动画。前端

3、超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为普遍的一种网络协议。web

网页，是网站中的一个页面，一般是网页是构成网站的基本元素，是承载各类网站应用的平台。通俗的说，网站就是由网页组成的。
所谓网站(Website)，就是指在因特网上，根据必定的规则，使用HTML等工具制做的用于展现特定内容的相关网页的集合。简单地说，网站是一种通信工具，就像布告栏同样，人们能够经过网站来发布或收集信息。
构成元素
文字与图片是构成一个网页的两个最基本的元素。你能够简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此以外，网页的元素还包括动画、音乐、程序等等。
网页的类型
一般咱们看到的网页，都是以 htm 或html后缀结尾的文件，俗称 HTML文件。不一样的后缀，分别表明不一样类型的网页文件，例如以 CGI 、 ASP 、 PHP 、 JSP 甚至其余更多。
网页的分类
网页有多种分类，咱们传统意义上的分类是动态和静态的页面，原则上讲静态页面多经过网站设计软件来进行从新设计和更改,相对的比较滞后，固然有网站管理系统，也能够生成静态页面，咱们称这种静态页面为静态。动态页面经过网页脚本与语言自动处理自动更新的页面，比方说贴吧，就是经过网站服务器运行程序，自动处理信息，按照流程更新网页。编程

一个简单的示例能够帮助咱们认识web 与http后端

就结果而言 ,使用套接字基础上使用浏览器输入相应ip/端口后对正在运行的后端 socket对象发送连接请求,而后依据代码,向申请连接者 .浏览器

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面安全

HTTP是一个简单的请求-响应协议，它一般运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及获得什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具备一个相似MIME的格式。这个简单模型是早期Web成功的有功之臣，由于它使得开发和部署是那么的直截了当。服务器

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制做所必备的。“超文本”就是指页面内能够包含图片、连接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。websocket

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

四大特性:
1.基于请求响应
2.基于TCP/IP之上的做用于应用层的协议
3.无状态(服务端没法保存用户的状态,一我的来一千次我都记不住还当你如初见)
4.无链接(请求来一次我响应一次以后立马断开链接二者之间就再也不有任何关系了)
websocket 至关因而HTTP协议的一个大的补丁它支持长链接

请求数据格式
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
/r/n
请求体(携带的是一些敏感信息好比密码,身份证号...)

响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
/r/n
响应体(返回给浏览器页面的数据一般响应体都是html页面)

请求方式
1.get请求
朝服务端要资源(好比浏览器窗口输入www.baidu.com)
2.post请求
朝服务端提交数据(好比用户登陆提交用户名和密码)

URL:统一资源定位符(就能够理解为网址)

url是统一资源定位符，对能够从互联网上获得的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每一个文件都有一个惟一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

HTML

注释
写网页的一套标准

超级文本标记语言文档制做不是很复杂，但功能强大，支持不一样数据格式的文件镶入，这也是万维网（ WWW）盛行的缘由之一，其主要特色以下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的普遍应用带来了增强功能，增长标识符等要求，超级文本标记语言采起子类元素的方式，为系统扩展带来保证。
平台无关性：虽然我的计算机大行其道，但使用 MAC等其余机器的大有人在，超级文本标记语言可使用在普遍的平台上，这也是万维网（WWW）盛行的另外一个缘由。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它容许网页制做人创建文本与图片相结合的复杂页面，这些页面能够被网上任何其余人浏览到，不管使用的是什么类型的电脑或浏览器。

注释是代码之母


通常状况下 html的注释都会按照下面的方式书写

HTML文档结构
<html>
<head></head>:head内的标签不是用来展现给用户看的而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签就是浏览器展现给用户看的内容
</html>

常见实体

显示结果	描述	实体名称	实体编号
`	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
￡	镑	£	£
￥	日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

打开html页面的两种方式
1.找到文件路径选择浏览器打开
2.文本编辑器快捷方式直接打开

标签的分类1:
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>)

head内经常使用标签
title用来显示网页标题
style用来控制样式的内部支持写css代码
script内部支持写js代码也支持导入外界的js文件
link专门用来引入外部的css文件

标签的分类2
1.块儿级标签(独占浏览器一行)
div p h
1.块儿级标签能够修改长宽
2.块儿级标签内部能够嵌套任意的块级标签
可是p标签虽然是块儿级标签可是他不可以其余块儿级标签包括自身
能够嵌套行内标签
总结:
只要是块儿级标签均可以嵌套行内标签
p标签只能嵌套行内其余块儿级能够嵌套任意的块儿级标签
2.行内标签(自身文本多大就占多大)
span b s i u

div和span一般都是用来构建网页布局的

body内经常使用标签
基本标签
h标签:标题标签
p标签:段落标签

符号

经常使用标签
div
span
p

img
src存放的是图片的路径(该路径能够是本地的也能够是网上的)
1.也能够放url(会自动请求该url获取相应数据)
2.也能够直接放图片的二进制数据会自动转换成图片

alt当图片加载不出来的时候显示的提示信息

title当鼠标悬浮在图片上提示的信息

height,width 当你只指定一个参数的时候另一个会等比例缩放

a 常做为连接

href后面存放url的时候点击跳转到该url
若是该连接没有被点过那么默认是蓝色,只要点过依次以后都是紫色

target 默认是_self当前页面跳转
_blank新建页面跳转

锚点功能(回到顶部)
href还能够写另外一个a标签的id值,点击就会跳到id值所对应的a标签

每个标签都应该有三个比较重要的属性
1.id值该值就相似于人的身份证号在用一个html文档id应该保证惟一不重复
2.class值该值就相似于面向对象里面的继承能够写多个
3.style(不是必备) 支持在标签内直接写css代码属于行内样式优先级最高
补充任何标签都支持自定义属性!!!

列表标签

表格标签(*****)
<table>
<thead></thead>
<tbody></tbody>
</table>

tr表示一行
th和td都是文本
建议在thead内用th
tbody内用td

colspan表示的水平方向
rowspan表示的竖直方向

表单标签(******)
可以接收用户输入(输入选择上传)并将其发送给后端

标签分类:

双标签：

p段落标签、h1-h6标题标签、b/strong字体加粗标签、i/em字体倾斜标签、pre换行标签、small字体变小标签、bdo文字方向、div/span无心义、Itr左到右/rtl右到左（文本方向的属性值）、sub下标文本、sup上标文本、a连接标签

以注册实例位例讲解form表单

单标签：

br换行符标签、hr水平线标签、img图片标签、input文本输入框标签、link连接标签

按区域大小分

块级标签：

div、p、ul、li、ol、dd、dt、address、dir、table、dl、fieldset、form、menu、noframe、h1-h六、hr、pre

行内标签：

a、b/strong、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、sub、sup、textarea

行内块标签

img、input

控制标签类型的样式

display：block块级/inline行内/inline-block行内块/none隐藏

给标签设置基点

vertical-align：top/middle/bottom

action控制数据提交的目的地
1.不写的状况下默认提交到当前页面所在的路径
2.写全路径(https://www.baidu.com)
3.路径后缀(/index/)

input input标签使用状况很是丰富

但一般咱们将其和label配合使用

<label> 标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，由于若是用户点击 label 元素内的文本，则会切换到控件自己。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

例如

<form>

<input type="radio" name="sex" id="male" />
<br />

<input type="radio" name="sex" id="female" /> </form><label for="male">Male</label><label for="female">Female</label>

type
text:普通文本
password:密文不展现明文
date:日期
submit:触发提交动做
button:普通按钮没有实际意义可是能够经过js绑定事件实现自定义动做
reset:重置表单内容
radio:单选能够经过checked控制默认选择(当属性值和属性名相同的状况下能够简写 checked) checked="checked"
checkbox:多选同上能够设置默认值
file:获取用户上传的文件

select标签
默认是单选能够经过multiple变成多选
若是想默认选择用selected (selected="selected")

textarea标签
获取用户输入的大段文本

form表单默认是get请求你须要经过method参数换成post提交
form表单中要想触发提交动做
只有两种状况能够
1.input标签type指定成submit
2.直接写button标签

获取用户输入(输入选择上传...)的标签都必须有一个name属性
这个name属性就相似于字典的key,而标签获取到的用户写入的值就相似于字典的value

<input type="text" id="d1" name="username" value="默认值">
name就至关因而字典的key
value就是字典的值
获取都的用户输入都会被放入value属性中

form表单传文件的时候须要指定enctype参数

表单元素指的是不一样类型的 input 元素、复选框、单选按钮、提交按钮等等。

什么时候使用 GET？

您可以使用 GET（默认方法）：

若是表单提交是被动的（好比搜索引擎查询），而且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

在传输敏感数据的表单时

应该使用 POST：

若是表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，由于在页面地址栏中被提交的数据是不可见的。

emmet插件

是一款功能丰富的代码自动补全插件

Emmet是一款Web前端开发工具Sublime很是有用的插件，使用仿CSS选择器的语法来生成代码，大大提升了HTML和CSS代码编写的速度。只需按住Tab键便可把一个简写展开成HTML和CSS的代码块防呆措施(Poka-yokes) 防止不可避免的错误出现，成为服务的缺点之程序必须能适时用于顾客及服务做业人员,简单来讲 ,就是将程序的操做限定在必定范围类,使用户可以便利的的使用产品,而不用担忧由于错误操做而致使的程序错误或崩溃