web前端小白科普集

智雲程式設計發表於2019-12-10
Web前端

每一個寫前端的人都有不同的故事.但是都是基礎從零開始.實習公司用的框架也好,網上查到的例子也好,都是需要基礎才可以看懂的.那基礎是什麼呢,我覺得就是常用的前端的一切.我剛寫前端三個月.整理一下自己學到的知識.

web前端小白科普集

1:什麼是html?

HTML是World Wide Web上統一的語言。指的是超文字標記語言 (Hyper Text Markup Language)，使用它所提供的標籤，人類已經建立了令人驚奇、姿態萬千的超連結的文件網路。這裡要注意的是：HTML不是一種程式語言，而是一種標記語言 (markup language)。

它的基本語法是以"<>"尖括號標籤開始，以""尖括號中帶剛斜槓的標籤結束，標籤通常是成對出現的，標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤，或者稱為開放標籤和閉合標籤.

使用到的場景:
比如說你需要寫一個頁面.那你可以這樣寫:

<html>
<body>
<h1>我是你的第一個頁面！</h1>
    <p>hello world!</p>
</body>
</html>
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（詳細的前端專案實戰教學視訊，PDF）

效果圖:


web前端小白科普集

2:什麼是css樣式?

CSS是一種向網頁新增樣式的機制，樣式表可描述文件如何被顯示、列印或發音。CSS（Cascading Style Sheet），中文意思為“層疊樣式表”或“級聯樣式表”

CSS層疊樣式表是一系列格式設定的規則，它們控制網頁內容的外觀。使用CSS設定頁面格式時，可以將內容與表現形式分開。頁面內容存放在HTML文件中，而用於定義表現形式的CSS規則則存放在另一個檔案中或HTML文件的某一部分，通常為檔案頭部分。可以更加靈活地控制具體的頁面外觀，從精確的佈局定位到特定的字型和樣式，還可以使HTML文件程式碼更加簡練，縮短瀏覽器的載入時間。對了，CSS是由W3C的CSS工作組產生和維護的。

知道了CSS是什麼以後，我們就可以利用html+css來構建我們的網頁.

比如給div中的文字加個顏色:
程式碼:

<html>
<body>
    <style>
        div{
            color: brown;
        }
    </style>
<h1>我是你的第一個頁面！</h1>
    <p>hello world!</p>
    <div>我會好好努力</div>
</body>
</html>

效果圖:


web前端小白科普集

還有很多種樣式的寫法,都可以實現同樣的效果,先舉例兩個:
例子1:
程式碼:

<html>
<body>
    <style>
        .div{
            color: brown;
        }
    </style>
<h1>我是你的第一個頁面！</h1>
    <p>hello world!</p>
    <div class="div">我會好好努力</div>
</body>
</html>
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（詳細的前端專案實戰教學視訊，PDF）

效果圖:

web前端小白科普集

例子2:
程式碼:

<html>
<body>
<h1>我是你的第一個頁面！</h1>
    <p>hello world!</p>
    <div style="color:brown;">我會好好努力</div>
</body>
</html>

效果圖:

web前端小白科普集

實現想要的效果有很多種方式.但是等你知道如何實現效果後就要開始考慮效能了,考慮修改起來是否方便.所以推薦的還是我的第一種寫法,把css樣式提出來,寫到style裡面.這是簡單的一個頁面裡包含樣式.如果是在專案裡.最好把樣式寫在less檔案裡.然後在需要的地方匯入引用.整理起來就會方便很多.

3:css的版本背景:

1996年12月17日，CSS1作為一項 W3C推薦被髮布。而後於1999年1月11日被重新修訂。其中包含非常基本的屬性，比如字型，顏色、空白邊。

1999年1月11日，CSS2作為一項 W3C推薦被髮布。CSS2新增了對媒介（印表機和聽覺裝置）和可下載字型的支援。CSS2 在CSS1基礎上新增了高階概念（比如浮動和定位）以及高階的選擇器（比如子選擇器、相鄰同胞選擇器和通用選擇器）。

CSS3計劃將 CSS劃分為更小的模組。CSS3把很多以前需要使用圖片和指令碼來實現的效果，只需要短短几行程式碼就能搞定。比如圓角，圖片邊框，文字陰影和盒陰影等。CSS3不僅能簡化前端開發工作人員的設計過程，還能加快頁面載入速度。

4:XHTML,XML,HTML有什麼區別?

HTML：HyperText Markup Language / 超文字標記語言
XML: Extensible Markup Language / 可擴充套件標記語言
XHTML: Extensible Hypertext Markup Language / 可擴充套件超文字標記語

HTML 是用來描述和定義網頁內容的標記語言，是構成網頁的最基本的東西。
所謂超文字，就是說它除了能標記文字，還能標記其他的內容，比如：圖片，連結，音訊，視訊等。
它的作用就是一個規範，告訴所有瀏覽器都統一標準，比如我給這段文字加個 <p> 標籤，那就是告訴瀏覽器：這是一個段落。我加個 <img> 標籤：這是一張圖片，別弄錯了。瀏覽器看到後，就會正確解析，產生相應的行為。

XML 它的表現形式就是給一個文件加一堆標籤，說明每段文字是幹什麼的，有什麼意義。這樣做的目的是方便儲存、傳輸、分享資料，人和機器都可以很方便的閱讀。XML 和 HTML 有一個明顯的區別就是：HTML 的標籤都是預定義的，你不可以自己隨便增加，比如你不能自造一個標籤叫 <nihao>, 但是 XML 可以，你可以自己“發明”標籤————這也是“可擴充套件的”一個含義。

XHTML 就是以 XML 的語法形式來寫 HTML.
XHTML 出現的原因是：HTML 是一種語法形式比較鬆散的標記語言，語法要求也不嚴格。比如大小可以混用，屬性值隨便你加不加引號，單引號還是雙引號也隨便你，標籤也可以不閉合。HTML 標準的制定者 W3C 一看這樣下去不行，所謂無規矩不成方圓，所以就把 XML 的語法形式往 HTML 上一套，出現了 XHTML，所以你也可以把 XHTML 理解為 HTML 的嚴格語法形式，除此之外，其它方面基本一樣。
比如 XHTML 有一些強制的要求，如下：

必須包含一個檔案頭宣告 <!DOCTYPE>

  1. 所有元素名必須小寫
  2. 所有空元素必須關閉
  3. 所有屬性名必須小寫
  4. 所有屬性值必須加引號
  5. 所有布林值屬性必須加上屬性值

5:常用的程式碼編輯器,網頁編輯器

程式碼編輯器:Eclipse,VScode,IDEA


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2667853/，如需轉載，請註明出處，否則將追究法律責任。

相關文章