码迷,mamicode.com
首页 > Web开发 > 详细

web前端基础知识!

时间:2017-02-28 00:47:36      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:horizon   perl   单选   阻塞   legend   引用   服务   ide   内联   

【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="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>

__________【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】

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="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】//实体

&lt; is the same as <
&gt; is the same as >
&copy; &#169; is the same as ? //版权
&amp; is the same as &
&quot;is the same as "

? 已注册商标 &reg; &#174;
? 商标(美国) ? &#8482;

× 乘号 &times; &#215;
÷ 除号 &divide; &#247;


__________【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="提交按钮" /><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等。

web前端基础知识!

标签:horizon   perl   单选   阻塞   legend   引用   服务   ide   内联   

原文地址:http://www.cnblogs.com/famensaodiseng/p/6476854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!