2. 程式人生 > >前端 基礎理論總結（一）

前端 基礎理論總結（一）

阿新 • • 發佈：2018-12-19

一、什麼是B/S

  • 軟體主要分為兩種架構B/S和C/S，我們主要從事B/S的軟體開發
  • B/S中的B指的是browsers,是瀏覽器的意思，S指server是伺服器的意思

二、軟體開發流程

  • 網頁設計師根據需求設計網頁
  • 前端工程師將設計做成靜態網頁
  • 後臺工程師將靜態網頁修改為動態網頁

三、網頁三要素

  • 結構 HTML 用於描述頁面的結構
  • 表現 CSS 用於空值頁面中的元素樣式
  • 行為 JavaScript 用於相應使用者操作

四、HTML

  • HTML 是超文字標記語言
  • 它負責網頁的三個要素之中的結構
  • HTML使用標籤的形式來標識網頁中的不同組成部分
  • 所謂超文字指的是超連結，使用超連結可以讓我們從一個頁面跳轉到另一個頁面

五、HTML基本結構

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>網頁標題</title>
</head>
<body>
	<h1>網頁正文</h1>
</body>
</html>

六、標籤

  • HTML中的標記指的就是標籤
  • HTML使用標記標籤來描述網頁
  • 結構：
<標籤名>標籤內容</標籤名>
<標籤名 />

七、元素

  • 我們還將一個完整的標籤稱為元素
  • 這裡我們可以將元素和標籤認為是一個同義詞
<h1>一級標題</h1>

上邊的h1我們稱為元素

<p>我是一個<em>段落</em></p>

p也是一個元素，em是p的子元素，p是em的父元素

<body>
	<p><em>內容</em><p>
</body>

body也是一個元素，body是p和em的祖先元素，p和em是body的後代元素

八、屬性

  • 可以為HTML標籤設定屬性
  • 通過屬性為HTML元素提供附加資訊
  • 手續ing需要設定在開始標籤或自動結束標籤中
  • 屬性總是在以名稱/值對的形式出現
  • 有些屬性可以是任意值，有些則必須是指定值
<h1 title="我是一個標題">標題</h1>
<img src="" alt=""  />
常見屬性
  • id 作為標籤的唯一標識，在同一個網頁中不能出現相同的id屬性值
  • class 用於來標籤分組，擁有相同class屬性的標籤我們認為就是一組，可以出現相同的class屬性，可以為一個元素指定多個class
  • title 用來指定標籤的標題，指定title以後，滑鼠移入到元素上方時，會出現提示文字

九、註釋

  • HTML註釋中的內容不會在網頁中顯示
  • 格式：
<!-- 註釋內容  -->
  • 合理的使用註釋可以幫助開發人員理解網頁的程式碼
  • 註釋不能巢狀！

十、HTML5文件宣告

<!DOCTYPE html>

十一、 怪異模式

  • 為了相容一些舊的頁面，瀏覽器中設定了兩種解析模式：
    標準模式和怪異模式
  • 怪異面膜是解析網頁時會產生一些不可預期的行為，所以我們應該避免怪異模式的出現，避免的最好方式就是在頁面中編寫正確的doctype

十二、常見字符集

  • ASKII、ISO8859-1、GBK、GB2312、UTF-8

十三、亂碼

  • 如果我們儲存檔案時使用的時urf-8進行編碼，而瀏覽器讀取頁面時使用gb2312，這樣舊會導致頁面中的內容不能正常顯示，也就是我們所說的亂碼
  • 所以我們只需要統一兩者使用的字符集就可以解決亂碼問題
  • 這裡為了頁面有更好的實用性，我們一般使用utf-8
  • 解決
  • 在html5中只需要使用meta標籤即可完成這個任務：
<meta charset="utf-8" />

十四、< meta>

< meta >作用：可提供有關頁面的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞
< meta >標籤位於文件的頭部，不包含任何涅日榮。< meta >標籤的屬性定義了與文件相關聯的名稱/值對

meta的用法
  • 設定頁面的字符集
<meta charset="utf-8">
  • 設定網頁的描述
<meta name="description" content="">
  • 設定網頁的關鍵字
<meta name="keywords" content="">

-請求的重定向

<meta http-equiv="refresh" content="5;url=地址"/>

十五、常用標籤

  • < html >
    • 作用：用於告訴瀏覽器這個文件中包含的資訊時用HTML編寫的。
    • 用法：所有的網頁的內容都需要編寫到html標籤中，一個頁面中html標籤只能由一個
    • html標籤中由兩個子標籤head和body
  • < head>
    • 作用：用來表示網頁的元資料，head中包含了瀏覽器和搜尋殷勤使用的其他不可見資訊
    • 用法：作為html標籤的子元素的出現，一個網頁中只能由一個head
  • < title>
    • 作用：表示網頁的標題，一般會在網頁的標題欄上顯示
      • 標籤中的文字，是頁面優化的最重要因素，在搜尋引擎的搜尋時最先看到的、最醒目的內容
    • 用法：建議將title標籤緊貼著head標籤編寫，這樣搜尋引擎可以快速檢索到標題標籤
      • 網站中的多個頁面的title也不應該重複，這樣不利於搜尋隱藏檢索
  • < body >
    • 作用：用來設定網頁的主體，所有在頁面中能看到的內容都應該編寫到body標籤中
    • 用法：作為html的子標籤使用
  • < h1 >~< h6 >
    • 作用：都是網頁中的標題標籤，用來表示網頁中的一個標題，不同的是，從h1~h6重要性越來越低
    • 標題標籤相當於正文的標題，通常認為重要性僅次於頁面的title
    • 一般標題標籤我們只會使用到h3,h3以後的標題標籤對於搜尋引擎舊沒有什麼意義了
    • 一個頁面中只會使用一個h1標籤
  • < p >
    • 作用：表示網頁中的一個段落
    • 一般瀏覽器會在段落的前和後各加上一個換行，也就是段落會在頁面中自成一行
  • < br />
    • 作用：表示一個換行標籤，使用br標籤可以使br標籤後的內容另起一行
  • < hr />
    • 作用：是水平線標籤，使用hr標籤可以在頁面中列印一條水平線，水平線可以將頁面分成上下兩個部分
  • < img />
    • 作用：是圖片標籤，可以用來向頁面中引入一張外部的圖片
    • 屬性：
      • src:指向一個外部的圖片的路徑
      • alt:圖片的描述
  • < a >
    • 作用：是超連結標籤，通過a標籤，可以快速跳轉到其他頁面
    • 屬性：
      • href:指向一個連結地址
      • target:設定開啟目標頁面的位置，可選值：_blank新視窗、_self當前視窗

實體（轉義字元）

  • 字元實體
    • 小於號< &lt；
    • 大於號> &gt；
    • 空格 &nbsp；
    • 和符號& &amp；
    • 版權 &copy；
    • 引號 &quot；
    • 註冊商標 &reg；
    • 商標 &trade；

課外知識點

  • 重點注意：…/代表返回上一級目錄 傳圖片的時候要注意src和img的路徑要求

相關推薦

前端 基礎理論總結（一）

一、什麼是B/S 軟體主要分為兩種架構B/S和C/S，我們主要從事B/S的軟體開發 B/S中的B指的是browsers,是瀏覽器的意思，S指server是伺服器的意思 二、軟體開發流程 網頁設計師根據需求設計網頁 前端工程師將設計做成靜態網頁

前端 基礎理論總結（二）

CSS 層疊樣式表 css可以用來為網頁建立樣式表，通過樣式表可以對網頁進行裝飾 所謂層疊，可以將整個網頁相象成是一層一層的結構，層次高的將會覆蓋層次低的 而css就可以分別為網頁的各個層次設定樣式 基本語法 CSS的樣式表由一個一個的樣式

前端知識點總結（一）盒子模型你是怎麼理解的？

從今天開始打算陸陸續續寫一些前端方面的知識點總結，也方便自己鞏固和複習。如果有人能看見還幫助了你，那也是極好的hhhh。分析與解答：1.盒子模型有兩種，W3C的標盒模型和IE的怪異盒模型（1）W3C定義的標準盒模型包括margin、border、padding、content

ElasticSearch學習總結（一）：資訊檢索基礎理論

本系列文章為Elasticsearch 的學習筆記，主要是為了便於日後對於相關知識點的回顧，在內容的範圍以及正確性上可能存在一定出入。另外由於Elasticsearch的發展速度很快，很多特性會隨著版本的演變而發生變化，具體的特性說明，如有疑問請參考對應版本的官方文件。本系列部落格主要基於5

前端面試題目總結（一）

1.判斷下面輸出內容，並嘗試怎樣正確輸出0,1,2,3,4,5 for (var i = 0; i <= 5; i++) { 　　　 setTimeout（function timer(){ console.log(i) }, i * 1000) } /

前端 盒模式理論總結（一）

CSS盒子模型 盒子模型解釋 元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下： 把元素叫做盒子，設定對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子

前端 CSS基礎理論總結（三）

有序列表 使用ol和li來建立一個有序列表 <ol> <li>列表項1</li> 1.列表項1 <li>列表項2</li> 2.列表項2 <li>列表項3</li>

前端 CSS基礎理論總結（二）

偽類和偽元素 給連結定義樣式 正常連結： ：link 訪問過的連結： ：visited（只能定義字型顏色） 滑鼠滑過的連結： ：hover 正在點選的連結： ：active 其他 獲取焦點：

前端 JS基礎理論總結（六）

迴圈語句 通過迴圈語句可以反覆的執行一段程式碼多次 while迴圈 - 語法： while(條件表示式){ 語句... } while語句在執行時，先對條件表示式進行求值判斷，如果值為true，則執行迴圈體，迴圈體執行完畢以

前端 JS基礎理論總結（七）

定時器用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定時器的基本用法</title> <script t

前端 JS基礎理論總結（九）

閉包存迴圈的索引值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>閉包存迴圈的索引值</title> <sty

前端 JS基礎理論總結（八）

變數的作用域 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>變數的作用域</title> <script ty

Web前端H5之HTML標籤總結（一）

1、Web標準介紹 * web應用領域： PC端 移動端 * 網頁介紹 ** 組成：文字、圖片、按鈕、視訊、音訊。。。。這些元素組成

前端小問題總結（一）

旨在記錄自己在實際專案中遇見的一些小問題，簡單做個記錄。以便以後翻閱。 document.domain 通常，解決跨域問題的方法有： 1. document.domain 2. jsonp 3. iframe 4. 代理 5. CORS

前端面試總結（css）

pan html元素 內容 brush bre 省略號 import als earlier 表格:Cellspacing:單元格間距，cellpadding:單元格內容之間的空隙，colspan：合並列數，rowspan：合並行數,表頭caption，border-sp

前端面試總結（JavaScript）

javascrip 類型 作用域鏈 word doc locals session jsonp 作用域 ajax優缺點 json和jsonP區別 省市聯動 全選 數組去重: 如何消除一個數組裏面重復的元素？ // 方法一： var arr1 =[1,2,2,2,3,3,3

java_web項目開發經驗總結（一）

從數據 簡單 處理 開發 事務 傳輸 記錄 承載 基礎上 　　web項目就像一個動態的記事本，功能很強大，你最初的項目功能調研越給力，項目所能發揮的作用也就越給力。這是因為web網絡的強聯系性，大家都可以通過訪問到自己想要訪問的頁面，頁面裏既可以承載信息，也可以承載做事情的

文檔總結（一）——文檔的概述

理解 需要 軟件需求 是否 研究 strong 開發項目 問題 項目開發 寫完文檔後，本來想寫一篇具體的文檔的總結的，後來看大家都寫的具體文檔總結，於是我就想：我還是寫一些跟大家不一樣的東西吧。 所以，我就說說我對各個文檔的宏觀理解吧。

salesforce零基礎學習（七十二）項目中的零碎知識點小總結（一）

gin 不同 grant dmi ima -m ron 角色 com 項目終於告一段落，雖然比較苦逼，不過也學到了好多知識，總結一下，以後當作參考。 一.visualforce標簽中使用html相關的屬性使用 曾經看文檔沒有看得仔細，導致開發的時候走了一些彎路。還好得到

OpenGL在MFC中的使用總結（一）——基本框架

palette 接受 white 要求 無效 結構 del 一次 是你 項目中要畫3D顯示的模型，於是要用到OpenGL,加上是在MFC中，並且是在MFC中的ActiveX中使用。再並且鑒於他們程序主框架的設定。常規的方法還不一定能實現。所以還是查過不少資料，在此一一總