web前端基础知识！

时间 2019-11-19

标签 web 前端基础知识栏目 HTML 繁體版

原文原文链接

【HTML文档的基本结构和语法】
【基本结构】：javascript

<HTML> HTML 文件开始
<HEAD> HTML 文件的头部开始
<title> 网页的标题</title>
......
...... HTML文件的头部内容
</HEAD> HTML文件的头部结束
<BODY> HTML文件的主体开始
......
...... HTML文件的主体内容
</BODY> HTML文件的主体结束
</HTML> HTML文件结束css

|
【语法】__【Text Elements】:html

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)(水平分割线)
<pre>This text is preformatted</pre>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本一般会保留空格和换行符。而文本也会呈现为等宽字体。java

__________【Logical Styles】web

<em>This text is emphasized</em>（斜体强调）
<strong>This text is strong</strong>（加粗强调）
<code>This is some computer code</code>（表示计算机源代码或者其余机器能够阅读的文本内容）ajax

__________【Physical Styles】

<b>This text is bold</b>（加粗）
<i>This text is italic</i>（斜体）数据库

__________【Links, Anchors, and Image Elements】编程

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>json

__________【Unordered list】//无序列表数组

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

__________【Ordered list】

<ol start="10">
<li>First item</li>
<li>Next item</li>
</ol>

__________【Definition list】//定义表

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

__________【Tables】

<table border="1">
<tr>
<th>someheader</th> //<th>定义表格内的表头单元格。
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

__________【Frames】

<frameset cols="25%,75%"> //百分比设置宽度
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>

__________【Forms】

<option>Apples

<option selected>Bananas

<option>Cherries

</select>

__________【Entities】//实体

< is the same as <
> is the same as >
© © is the same as © //版权
& is the same as &
"is the same as "

® 已注册商标 ® ®
™ 商标（美国） ™ ™

× 乘号 × ×
÷ 除号 ÷ ÷

__________【Other Elements】

<blockquote> //定义块引用
Text quoted from some source.
</blockquote>

<address> //定义文档或文章的做者/拥有者的联系信息
Address 1<br>
Address 2<br>
City<br>
</address>

【HTML表单与经常使用控件】

【表单】：HTML 表单用于搜集不一样类型的用户输入。

【经常使用控件】：

<input type="text" />文本输入框<br />
<input type="submit" value="提交按钮" /><br />
<input type="reset" value="重置按钮" /><br />
<input type="radio" />单选按钮<br />
<input type="password" />密码输入框<br />
<input type="image" />图像<br />
<input type="hidden" />隐藏域<br />
<input type="file" />文件提交<br />
<input type="checkbox" />复选框<br />
<input type="button" />普通按钮<br />
<select>
<option>选择列表</option>
<optgroup><option>下拉子菜单</option></optgroup>
</select>
<textarea>文本区域</textarea>
<label>标签</label>
<fieldset>分组</fieldset>
<legend>描述元素，必填信息</legend>

【CSS的基本概念和做用】
|
【概念】：CSS (Cascading Style Sheet) 中文译为层叠样式表，是一系列格式规则，用于控制网页内容的外观(样式)并容许将样式信息和网页内容分离的一种标记语言。HTML与CSS的关系就是“网页结构”与“表现形式”的关系。

【做用】：用于网页中样式的定义，解决内容与表现分离的问题。

【CSS的基本语法和基本使用方法】

【基本语法】：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
| selector{declaration1; declaration2; ... declarationN }
| 每条声明由一个属性和一个值组成，每一个属性有一个值。属性和值被冒号分开。
| selector {property: value}
【基本使用方法】：
内联样式：直接对HTML的标记使用style属性，将CSS代码直接写在其中。
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

内部样式表：将CSS写在<style>与</style>之间。
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

外部样式表： <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>。

【CSS的层次及其做用优先级】：样式表的优先级由高到低：行内样式表(内联样式表) > 内部样式表 > 外部样式表
补充规则：优先级相同的状况下，后定义的属性会覆盖先前定义的。
标有"!important"的规则有最高优先级

【JavaScript的基本概念和做用】

【基本概念】：JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

【做用】：主要用来向HTML页面添加交互行为。

【JavaScript的基本语法】
【】
1.区分大小写：变量名、函数名、运算符以及其余一切东西都是区分大小写的。
2.变量属于弱类型(var)。弱类型是指弱类型变量能够被赋予任何类型的值。
3.每行结尾的分号无关紧要。
4.注释：单行注释 // 多行注释 /**/
5.括号表示代码块:{}
6.变量的定义：使用var关键字来声明。变量的命名规范是：字母数字，$符和下划线构成，可是不能够以数字开始。变量名不可使用关键字.
7.JavaScript的数据类型：
undefined 类型
null 类型（对象）
boolean 类型
number 类型(int整型 float浮点型)
八进制数和十六进制数 012
浮点数
特殊的 Number 值
string 类型
funciton -- 函数类型
object引用类型。
8. 类型转换：

使用：Number（）、parseInt() 和parseFloat（）作类型转换
Number()强转一个数值(包含整数和浮点数)。
*parseInt()强转整数，
*parseFloat（）强转浮点数
函数isNaN()检测参数是否不是一个数字。 is not a number

ECMAScript 中可用的 3 种强制类型转换以下：
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（能够是整数或浮点数）；
String(value) - 把给定的值转换成字符串；

【JavaScript经常使用内置对象】
|
【】JavaScript内置对象有如下几种。
● String对象：处理全部的字符串操做
● Math对象：处理全部的数学运算
● Date对象：处理日期和时间的存储、转化和表达
● Array对象：提供一个数组的模型、存储大量有序的数据
● Event对象：提供JavaScript事件的各类处理信息
内置对象都有本身的方法和属性，访问的方法以下：
对象名.属性名称
对象名.方法名称(参数表)

【浏览器对象模型BOM的基本概念和做用】
|
【基本概念】： BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、能够与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中表明浏览器窗口的Window对象是BOM的顶层对象，其余对象都是该对象的子对象。
|
【做用】：
1. 弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小；
2. 提供WEB浏览器详细信息的导航对象；
3. 提供装载到浏览器中页面的详细信息的定位对象；
4. 提供用户屏幕分辩率详细信息的屏幕对象；
5. 对cookie的支持。

【文档对象模型DOM的基本概念和做用】
【基本概念】：DOM是Document Object Module的缩写，即文档对象模型。DOM是表示文档和访问、操做构成文档的各类元素的应用程序接口(API)，全部支持JavaScript的web浏览器都支持DOM。
|
【做用】：DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型。把整个页面映射为一个多层节点结构。

【Internet与Web技术的基本概念】
【Internet】：Internet是一个开放的、由位于世界不一样地方的众多网络和计算机互联而成、依靠TCP/IP协议实现通讯的互联网络。
【Web技术】：World Wide Web（WWW或Web）

Web是分布在全世界的、基于HTTP通讯协议的、存储在Web服务器中的全部互相连接的超文本集。它采用客户/服务计算模式。Web服务器端存放用Web文档组织的各类信息；客户端经过浏览器软件(如IE or Netscape等) 浏览这些信息资源。

Web就是存储在Internet上的计算机中数以千万计、彼此关联的文档集合。
Web其实是一种全球性的资源系统，而Internet是它的通讯基础设施。

Web服务器：基于HTTP 通讯协议的服务器称为Web服务器。Web服务器中存放Web文档。
Web文档：Web服务器中存放的相似于用HTML语言组织的各类信息称为Web文档。

【Web技术的主要组成】
⑴超文本传送协议(HTTP, Hyper-Text Transfer Protocol)
⑵统一资源定位地址(URL, Uniform Resource Locator)
⑶超文本标记语言(HTML)
⑷Web服务器
⑸ Web浏览器

【Web浏览器与服务器的基本概念和工做原理】
【Web浏览器】：用于经过URL来获取并显示Web网页的一种软件工具。
【Web服务器】：基于HTTP 通讯协议的服务器称为Web服务器。Web服务器中存放Web文档。
【工做原理】：

（1）用户请求（URL地址）
（2）根据用户请求查找信息资源地址
（3）应用程序服务器对数据库执行查询操做
（4）查询结果返回应用程序服务器
（5）应用程序服务器将数据嵌入页面
（6）Web服务器把完成页面发给浏览器
（7）浏览器为用户显示查找结果

____
|客| __________ ___________ ________
|户| ==>(1)==> | | ==>(2)==> | | ==>(3)==> | |
|端| | | | | | |
(7)|浏| |internet| |Web服务器| |数据库|
|览| <==(6)<== | | <==(5)<== | | <==(4)<== | |
|器| |________| |_________| |______|
|__|

【Web应用开发构架和开发技术】

Web应用框架（Web application framework）是一种电脑软件框架，用来支持动态网站、网络应用程序及网络服务的开发。这种框架有助于减轻网页开发时共通性活动的工做负荷，例如许多框架提供数据库访问接口、标准样板以及会话管理等，可提高代码的可再用性。

种类： MVC框架（模型-视图-控制器）MVC（Model view controller）
三部分组织组织模式
内容管理系统（CMS）

模型 - 视图 - 控制器（MVC（Model view controller））

许多框架遵循模型 - 视图 - 控制器（MVC）体系模型的结构模式，使数据模型与用户界面分开。这被广泛认为是一个很好的作法，由于它模块化的代码，能提升代码的重复使用，并容许多个接口。在Web应用中，这容许不一样的应用方面，如网页，远程应用程序和Web服务接口。MVC是业界比较承认的架构模型。

三部分组织组织模式

在这种组织模式中，应用程序建立在三个部分：客户端，应用程序和数据库。数据库一般是一个RDBMS。而客户端指的是由Web应用程序生成的HTML，在用户的浏览器运行。应用程序运行在服务器上。

内容管理系统（CMS）

指的是一种内容编辑程序。就像在博客写文章同样，不须要懂得编程的人，也能够经过CMS发布，更改，管理内容。

【开发技术】：
【客户端技术】：HTML、CSS、DOM、JavaScript、AJAX等。
【服务器端技术】：CGI、ASP、PHP、ASP.NET和JSP。

【Java Servlet 和 JSP 基本概念和原理】

【Java Servlet】：Java Servlet是一个专门用于编写网络服务器应用程序的Java组件。全部基于Java的服务器端编程都是构建在Servlet之上的。在J2EE中Servlet已是一个标准的组件。

【ASP.NET基本概念和原理】
【概念】
ASP.NET是Microsoft公司推出的新一代创建动态Web应用程序的开发平台，是一种创建动态Web应用程序的新技术。ASP.NET是.NET框架的一部分，可使用任何.NET兼容的语言（如Visual Basic、C#）来编写ASP.NET应用程序。

ASP.NET是Microsoft.NET的一部分，是Active Server Page（简称ASP）的另外一个版本；ASP.NET提供了一个统一的Web开发模型，其中包括开发人员生成企业级Web应用程序所需的各类服务。ASP.NET的语法在很大程度上与ASP兼容，同时还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。

ASP.NET是一个已编译的、基于.NET的环境，能够用任何与.NET兼容的语言（包括Visual Basic.NET、C#和JScript .NET）创做应用程序。另外，任何ASP.NET应用程序均可以使用整个.NET Framework。开发人员能够方便地得到这些技术的优势，其中包括托管的公共语言运行库环境、类型安全和继承等。

【原理】
ASP.NET的运行原理：在ASP.NET中，当一个HTTP请求发送到服务器并被IIS接收以后，IIS首先经过客户端请求的页面类型为其加载相应的.dll文件，而后在处理过程当中将这条请求发送给可以处理这个请求的模块。在ASP.NET中，这个模块叫作HttpHandler（HTTP处理程序组件），之因此.aspx文件能够被服务器处理，就是由于在服务器端有默认的HttpHandler专门处理.aspx文件。IIS在将这条请求发送给可以处理该请求的模块以前，还须要通过一些HttpModule的处理，这些都是系统默认的Modules（用于获取当前应用程序的模块集合），在该HTTP请求传到HttpHandler以前，要通过不一样的HttpModule的处理。

【PHP基本概念和原理】

【概念】：PHP（外文名: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸取了C语言、Java和Perl的特色，易于学习，使用普遍，主要适用于Web开发领域。

【原理】：PHP的全部应用程序都是经过WEB服务器(如IIS或Apache)和PHP引擎程序解释执行完成的，工做过程：(1)当用户在浏览器地址中输入要访问的PHP页面文件名，而后回车就会触发这个PHP请求，并将请求传送化支持PHP的WEB服务器。(2)WEB服务器接受这个请求，并根据其后缀进行判断若是是一个PHP请求，WEB服务器从硬盘或内存中取出用户要访问的PHP应用程序，并将其发送给PHP引擎程序。(3)PHP引擎程序将会对WEB服务器传送过来的文件从头至尾进行扫描并根据命令从后台读取，处理数据，并动态地生成相应的HTML页面。(4)PHP引擎将生成HTML页面返回给WEB服务器。WEB服务器再将HTML页面返回给客户端浏览器。

【AJAX基本概念和原理】

【概念】：AJAX即“Asynchronous Javascript And XML[1] ”（异步JavaScript和XML[1] ），是指一种建立交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于建立快速动态网页的技术。
经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个网页面。

【原理】：Ajax的工做原理至关于在用户和服务器之间加了—个中间层，使用户操做与服务器响应异步化。这样把之前的一些服务器负担的工做转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

ajax是不少种技术的集合体。其中包括浏览器的xmlHTTPRequest对象，他是负责为你开通另外一条链接通道，能够传递信息。javascript：他是负责调用XMLHTTPRequest对象进行与后台交互的媒介。xml是一种数据格式，用于服务器应答传递信息的格式。除了xml外，还可使用任何的文本格式，包括text，html，json等。