首页 > 代码库 > web前端基础知识！
web前端基础知识！
【HTML文档的基本结构和语法】
【基本结构】：
<HTML> HTML 文件开始
<HEAD> HTML 文件的头部开始
<title> 网页的标题</title>
......
...... HTML文件的头部内容
</HEAD> HTML文件的头部结束
<BODY> HTML文件的主体开始
......
...... HTML文件的主体内容
</BODY> HTML文件的主体结束
</HTML> HTML文件结束
|
【语法】__【Text Elements】:
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)(水平分割线)
<pre>This text is preformatted</pre>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
__________【Logical Styles】
<em>This text is emphasized</em>（斜体强调）
<strong>This text is strong</strong>（加粗强调）
<code>This is some computer code</code>（表示计算机源代码或者其他机器可以阅读的文本内容）
__________【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="http://www.mamicode.com/URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
<a name="tips">Useful Tips Section</a>
<a href="http://www.mamicode.com/#tips">Jump to the Useful Tips Section</a>
__________【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="http://www.mamicode.com/page1.htm">
<frame src="http://www.mamicode.com/page2.htm">
</frameset>
__________【Forms】
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="http://www.mamicode.com/Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="10" cols="20"></textarea>
__________【Entities】//实体
< is the same as <
> is the same as >
© © is the same as ? //版权
& is the same as &
"is the same as "
? 已注册商标 ® ®
? 商标（美国） ? ™
× 乘号 × ×
÷ 除号 ÷ ÷
__________【Other Elements】
<!-- This is a comment -->
<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="http://www.mamicode.com/提交按钮" /><br />
<input type="reset" value="http://www.mamicode.com/重置按钮" /><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="http://www.mamicode.com/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等。
web前端基础知识！