快速了解前端開發HTML的正確姿勢

摘要：web前端開發（也稱為客戶端開發）主要是通過html，CSS和JavaScript等前端技術，實現網站在客服端的正確顯示及交互功能。

一、web標準介紹

web標準：

  • w3c：萬維網聯盟組織，用來制定web標準的機構（組織）
  • web標準：製作網頁遵循的規範
  • web標準規範的分類：結構標準、表現標準、行為標準。
  • 結構：html。表示：CSS。行為：JavaScript。

總結說明：

  • 結構標準：相當於人的骨架。html就是用來製作網頁的。
  • 表現標準： 相當於人的衣服。CSS就是對網頁進行美化的。
  • 行為標準： 相當於人的動作。JS就是讓網頁動起來，具有生命力的

如果大家還不明白，請看下圖

二、瀏覽器介紹

瀏覽器是網頁運行的平台，常用的瀏覽器有IE、火狐（Firefox)、Google（Chrome）、獵豹瀏覽器、Safari和Opera等

瀏覽器內核：

PS：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。

總結：渲染引擎是兼容性問題出現的根本原因。

三、開發工具介紹

四、html介紹

1、html概念

html全稱HyperText Markup Language，翻譯為超文本標記語言，它不是一種程式語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。比如字體、顏色、大小等。

  • 超文本：音頻，影片，圖片稱為超文本。
  • 標記 ：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。

作用：HTML是負責描述文檔語義的語言。

注意：HTML語言不是一個程式語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。

HTML只是負責描述文檔語義的語言,在html中，除了語義，其他什麼都沒有。

html是一個純本文文件（就是用txt文件改名而成），用一些標籤來描述文字的語義，這些標籤在瀏覽器裡面是看不到的，所以稱為「超文本」，所以就是「超文本標記語言」了。

So，接下來，我們肯定要學習一堆html中的標籤對兒，這些標籤對兒能夠給文本不同的語義。

2、html的網路術語

  • 網頁 ：由各種標記組成的一個頁面就叫網頁。
  • 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
  • 標記： <p>稱為開始標記 ，</p>稱為結束標記，也叫標籤。每個標籤都規定好了特殊的含義。
  • 元素：<p>內容</p>稱為元素.
  • 屬性：給每一個標籤所做的輔助資訊。

五、HTML的規範

  • HTML是一個弱勢語言
  • 區分大小寫
  • 頁面的後綴名是html或者htm(有一些系統不支援後綴名長度超過3個字元，比如dos系統)
  • HTML的結構：
    • 聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準。是HTML5標準。
    • head部分：將頁面的一些額外資訊告訴伺服器。不會顯示在頁面上。
    • body部分：我們所寫的需要顯示出來的程式碼必須放在此標籤內。

1、編寫HTML的規範

（1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）所有的標記都必須小寫。

（3）所有的標記都必須關閉。

  • 雙邊標記：<span></span>
  • 單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />

（4）所有的屬性值必須加引號。<h1 id=”head”></h1>

（5）所有的屬性必須有值。<input type=”radio” checked=”checked” />

2、HTML的基本語法特徵

1）、HTML對換行不敏感，對tab不敏感

HTML只在乎標籤的嵌套結構，嵌套的關係。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

也就是說，HTML不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。但是，我們發現有良好的縮進，程式碼更易讀。要求大家都正確縮進標籤。

2）、空白摺疊現象

HTML中所有的文字之間，如果有空格、換行、tab都將被摺疊為一個空格顯示。

3）、標籤要嚴格封閉

<html></html>
<meta />

六、html結構

新建HTML文件，輸入 html:5,按tab鍵後，自動生成的程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

1、文檔聲明頭

任何一個標準的HTML頁面，第一行一定是一個以

<!DOCTYPE html>

開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。

了解doctype聲明

2、頭標籤（head）

head標籤都放在頭部分之間。這裡面包含了：<title>、<meta>、<link>，<style>

  • <title>：指定整個網頁的標題，在瀏覽器最上方顯示。
  • <meta>：提供有關頁面的基本資訊
  • <link>：定義文檔與外部資源的關係。
  • <style>:定義內部樣式表與網頁的關係

1）、Meta標籤

元素可提供有關頁面的元資訊（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

標籤位於文檔的頭部，不包含任何內容。

提供的資訊是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。

常用的meta標籤：

2）、http-equiv屬性

它用來向瀏覽器傳達一些有用的資訊，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。

<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=//www.luffycity.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

3）、name屬性

主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 『,』號隔開，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找資訊和分類資訊用的。

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,簡訊" />

這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到。

<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及部落格、影片、論壇等互動交流，網聚人的力量。" />

只要設置Description頁面描述，那麼百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優化）。

效果如下：

<meta name=viewport content="width=device-width, initial-scale=1">

上面這個標籤，是讓我們網頁支援移動端，移動設備優先（了解即可）

4）、title標籤

主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。

<title>路飛學城</title>

效果如下：

七、html顏色表示

1、顏色表示

  • 純單詞表示：red、green、blue、orange、gray等
  • 10進位表示：rgb(255,0,0)
  • 16進位表示：#FF0000、#0000FF、#00FF00等

2、RGB色彩模式

  • 自然界中所有的顏色都可以用紅、綠、藍(RGB)這三種顏色波長的不同強度組合而得，這就是人們常說的三原色原理。
  • RGB三原色也叫加色模式，這是因為當我們把不同光的波長加到一起的時候，可以得到不同的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
  • 在數字影片中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是我們常說的真彩色。所有顯示設備都採用的是RGB色彩模式。
  • RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

八、html標籤

1、html標籤分類

html標籤又叫做html元素，它分為塊級元素和內聯元素（也可以叫做行內元素），都是html規範中的概念。

2、塊級元素 詳情

塊級元素是指本身屬性為display:block;的元素。因為它自身的特點，我們通常使用塊級元素來進行大布局（大結構）的搭建。

塊級元素的特點：

獨佔一行，每一個塊級元素都會從新的一行重新開始，從上到下排布
可以直接控制寬度、高度以及盒子模型的相關css屬性
在不設置寬度的情況下，塊級元素的寬度是它父級元素內容的寬度
在不設置高度的情況下，塊級元素的高度是它本身內容的高度

3、文本級和容器級

除此之外，從HTML的角度來講，標籤還可以分為文本級和容器級：

  • 文本級標籤：p、span、a、b、i、u、em。
  • 容器級標籤：div、h系列、li、dt、dd。

文本及標籤的意思是標籤中只可以放文本，不可以放其他內容。你會發現除了p之外，所有的文本級標籤，都是行內元素。p是個文本級，但是是個塊級元素。

PS：為甚麼說p是文本級標籤呢？因為p裡面只能放文字&圖片&表單元素，p裡面不能放h和ul，p裡面也不能放p。

九、html中的特殊字元

  • &nbsp;：空格 （non-breaking spacing，不斷打空格）
  • &lt;：小於號（less than）
  • &gt;：大於號（greater than）
  • &amp;：符號&
  • &quot;：雙引號
  • &apos;：單引號
  • &copy;：版權©
  • &trade;：商標™

要求大家背過的特殊字元：&nbsp;、&lt;、&gt;、&copy

比如說，你想把<p>作為一個文本在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標籤，所以這裡需要用到轉義字元。應該這麼寫：

這是一個HTML語言的&lt;p&gt;標籤

效果顯示：

如果還想知道其它的HTML特殊字元：HTML特殊字元參考表

 

點擊關注，第一時間了解華為雲新鮮技術~

Tags:

VirMach 便宜 VPS

QNews

QNews