Web前端:HTML~CSS~JS

Web前端


  網頁主要由3部分組成:結構、表現、行爲。目前網頁的新標準是W3C,模式是HTML、CSS、JavaScript,這是前端開發最核心的3個技術。前2個技術的最新版本分別爲HTML5、CSS3。

“HTML是網頁的結構,CSS是網頁的外觀,而JavaScript是頁面的行爲”

前端開發其他技術

Ajax
  異步JavaScript和XML,Asynchronous Javascript And XML,一種創建交互式網頁應用的網頁開發技術。通過在後臺與服務器進行少量數據交換,Ajax可以使網頁實現異步更新,即在不重新加載(刷新)整個網頁的情況下,僅更新網頁的某部分。
  Ajax是前後端交互的技術,主要實現在前端。

SEO
  搜索引擎優化,Search Engine Optimization,專門利用搜索引擎的搜索規則使網站在搜索結果的前面,提高訪問量。


HTML

  超文本標記語言,Hyper Text Markup Language,爲“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一門描述性標記語言,超級文本標記語言是萬維網(Web)編程的基礎。HTML 使用標記標籤(HTML 標籤,HTML tag)來描述網頁。
  
 HTML結構
  ·. 頭Head部分:提供關於網頁的(公共)信息;
  <head> 元素是所有頭部元素的容器,包含腳本、指示瀏覽器在何處可以找到樣式表、提供元數據(metadata)信息等,<title>、<base>、<link>、<meta>、<script> 以及 <style>可以添加到 head 部分。
  ·. 主體Body部分:提供網頁的具體內容;
    <html> 與 </html> 描述網頁,定義HTML文檔
    <body> 與 </body> 可見的頁面內容,文檔主體
    <h1> 與 </h1> 顯示標題,有h1-h6
    <p> 與 </p> 顯示段落
 特點
  ·. 簡單易擴展:版本升級採用超集方式;
  ·. 平臺無關性:網絡的通用語言;
 html樣式
  根據樣式表對文檔進行格式化,插入樣式表的3種方法:
  a. 外部樣式表:一表多用,通過更改一個文件來改變整個站點(多個頁面)的外觀。 

 <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

  b. 內部樣式表:針對單個文件(頁面)需要特別的樣式。

 <head>
  <style type="text/css">
   body {background-color: green}
   p {margin-left: 20px}
  </style>
 </head>

  c. 內聯樣式:特殊的樣式需要應用到個別元素,在相關的標籤中使用樣式屬性。

 <p style="color:blue; margin-left:20px">This is a Paragraph.</p>

 URL - 統一資源定位器
  Uniform Resource Locator,URL 不能包含空格,用+代替,遵循以下語法規則:
  <a href="scheme://host.domain:port/path/filename">自定義文本</a>
   - scheme:定義因特網服務的類型,最常見的類型是 http
   - host:定義域主機(http 的默認主機是 www)
   - domain:port:定義因特網域名和主機上的端口號(http 的默認端口號是 80)
   - path:定義服務器上的路徑(如果省略則文檔必須位於網站的根目錄中)
   - filename:定義文檔/資源的名稱 
 


XHTML

  可擴展超文本標籤語言(EXtensible HyperText Markup Language),XML+HTML,XML 描述數據,HTML 顯示數據。與 HTML 4.01 幾乎相同,是一個 W3C 標準,XHTML 是更嚴格更純淨的 HTML 版本,目標是取代 HTML,是作爲一種 XML 應用被重新定義的 HTML。
 特點
  ·. 元素必須被關閉且要正確嵌套;  
  ·. XHTML 文檔必須擁有根元素,嵌套於<html> 根元素中,<html> 標籤內的 xmlns 屬性是默認必需的; 
  ·. 屬性不能簡寫,屬性名稱(標籤)必須小寫,屬性值必須加引號,id 屬性可以代替 name 屬性; 
  ·. XHTML DTD 定義了強制使用的 HTML 元素; 
 所有 XHTML 文檔必須進行文件類型聲明(DOCTYPE declaration)。文件類型聲明並非 XHTML 文檔自身的組成部分,不是 XHTML 元素,也沒有關閉標籤。在 XHTML 文檔中必須存在html、head、body元素, title 元素必須位於 head 元素中。
  XHTML結構
  ·  !DOCTYPE
    文檔類型聲明,用於驗證XHTML文檔。
  ·  head
  ·  body


CSS

  層疊樣式表,Cascading Style Sheets,一種用來表現HTML或XML等文件樣式的計算機語言,真正可以做到網頁表現與內容分離的一種樣式設計語言,是目前基於文本展示的最優秀的表現設計語言。
 特點
  ·. 表現與內容“解耦合”,後期易維護和改版;
  ·. 精簡代碼,減小網頁文件大小,加快網頁加載速度;
  ·. 對象位置排版像素級的精確控制;
  ·. 層疊性和繼承性;


JS


初識JS

  JS,即JavaScript,一種腳本語言,網站的動態性更強。

發佈了60 篇原創文章 · 獲贊 21 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章