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】

<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等。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程