次日·初識HTML

時間 2019-12-04

標籤次日 html 欄目 HTML 简体版

原文原文鏈接

一·什麼是HTML

HTML（HyperText Markup Language）是超文本標記語言，「超文本」的意思就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。不只如此，它還能夠從一個文件跳轉到另外一個文件，與世界各地主機的文件鏈接。HTML不是一種編程語言，而是一種標記語言。所謂的標記語言實際上就是一套標記標籤。總之，HTML的做用就是經過標記標籤來描述網頁，使得網頁的結構在瀏覽器中展示出來。html

二·HTML的結構

1.骨架

HTML有本身的語法骨架格式：編程

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

2.標籤

如下圖這個標籤爲例
瀏覽器

這樣的標籤通常包括如下幾部分：
1.開始標籤（The opening tag）：這裏包含了元素的名稱（本例爲p），被開、閉尖括號所包圍。這表示元素今後開始或者開始起做用——在本例中即段落由此開始。
2.閉合標籤（The closing tag）：與開始標籤類似，只是其在元素名以前包含了一個斜槓。這表示着元素的結尾——這表示元素在此結束——在本例中即段落在此結束。
3.內容（The content）：這是一個元素的內容，這個例子中就是所輸入的文本自己。
4.元素（The element）：開標籤、閉標籤與內容相結合，即是一個完整的元素。編程語言

3.元素的屬性

元素有時候會有屬性，好比下圖：

屬性（Attribute）包含了關於元素的一些額外信息，這些信息不會出如今內容中，可是通常會影響元素的顯示或者動做。上面的例子中，class是一個屬性名，editor-note是屬性的值。
一個屬性通常包括如下三點：ide

在屬性與元素名稱（或上一個屬性，若是有超過一個屬性的話）之間的空格符。
屬性的名稱，並接上一個等號。
由引號所包圍的屬性值。

4.元素之間的嵌套

咱們能夠將一個元素置於其餘元素之中，這種方式被稱爲嵌套，例如咱們強調某一部分文字，可使用元素包裹，意味着這段文字被強調：
My cat is very grumpy.
在嵌套過程當中，標籤的順序是很重要的，在這個例子中咱們首先使用 p 標籤，而後是 strong 標籤，接着咱們須要先閉合 strong 標籤，最後再閉合 p 標籤。下面是個錯誤的示範：
My cat is very grumpy.網站

5.空元素

有一些元素並不包含內容，也沒有閉標籤，例如「骨架」中的<img>元素：
<img src="images/firefox-icon.png" alt="My test image">
它包含了兩個屬性，可是這裏並無 </img> 閉合標籤，也沒有內部內容。由於圖像元素不須要包含內容來產生效果，它的做用是向其所在的位置嵌入一個圖像。ui

三.解析HTML文檔

咱們再回頭看咱們的HTML骨架：搜索引擎

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

<!DOCTYPE html>用於聲明文檔類型，文檔類型的聲明必須位於HTML的第一行，它的意思是該HTML是HTML5。若是是其餘版本的HTML那麼聲明方法會不一樣，可是咱們如今只要用HTML5的聲明就能夠了。具體其餘HTML版本的聲明能夠參考HTML <!DOCTYPE> 標籤

瀏覽器解析HTML有三種方式：
1.標準模式（非怪異模式）：在該模式中，頁面按照HTML與CSS的定義渲染。
2.怪異模式：在該模式中則嘗試模擬更舊的瀏覽器的行爲。
3.部分怪異（近乎標準）模式：一些瀏覽器（例如，那些基於Mozilla的Gecko渲染引擎的，或者Internet Explorer 8在strict mode下）也使用一種嘗試於這二者之間妥協的「近乎標準」(almost standards)模式，實施了一種表單元格尺寸的怪異行爲，除此以外符合標準定義。
總結：一個不含任何 DOCTYPE 的網頁將會以怪異(quirks) 模式渲染。HTML5提供的<DOCTYPE html>是標準模式，向後兼容的, 等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。

<html>元素包含了整個頁面的內容，有時也被稱做根元素或根標籤。
<head>元素規定了文檔相關的配置信息，包括文檔的標題，引用的樣式和腳本等等，<head>標籤中的內容通常不會直接出如今頁面中。具體內容能夠參考<head>標籤裏有什麼? Metadata-HTML中的元數據
<body>元素含了想讓用戶在訪問頁面時看到的內容，不論是文本，圖像，視頻，遊戲，可播放的音軌或其餘內容。
<meta charset="utf-8">元素指定了當前的字符編碼是UTF-8，它包括了很是多人類已知語言的字符。基本上 UTF-8 能夠處理任何文本內容，具體的字符編碼原理能夠參考字符編碼筆記：ASCII，Unicode 和 UTF-8
<meta>元素用於表述那些不能由其餘元素表述的任何元數據，包括頁面的說明，關鍵字，最後修改日期，和其它的元數據。具體能夠參考HTML meta標籤總結與屬性使用介紹、<meta> - HTML（超文本標記語言） | MDN
<title>元素設置了頁面的標題，標題顯示在瀏覽器標籤頁上，並且在你將網頁添加到收藏夾或喜好中時將做爲默認名稱。

四·HTML其餘

1.關於屬性

（1）布爾屬性

有時候咱們會看到一些屬性沒有值，可是仍然合法，例如：<input type="text" disabled>（disabled屬性用於使表單輸入變爲不可用(變灰色)，此時用戶不能向他們輸入任何數據。）只有當屬性值和屬性名相等的時候才能這樣使用屬性，這是一種簡寫。編碼

（2）屬性值的引號

有一些粗糙的網站中會用一些奇怪的標記風格，有的開發者會不給屬性值加引號，有時瀏覽器會誤解咱們的標記，始終添加引號會避免不少問題，使得代碼更易讀。spa

（3）單引號或雙引號

屬性值用單引號或者雙引號均可以，這只是代碼風格的問題，可是千萬不要在一條屬性值裏混用，儘可能避免在同一套代碼中混用，這樣能夠增長你代碼的易讀性。而若是你已經使用了一種引號，在這個引號中你能夠嵌套另一種引號。

2.HTML中的空白

有一些代碼中會包含不少的空格，可是實際上這是沒有必要的，例以下面兩端代碼是等價的：

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

不管用了多少空白（包括空白字符和換行），當咱們渲染這些代碼的時候，HTML解釋器會將連續出現的空白字符減小爲一個單獨的空格符·

3.HTML中的特殊字符

在HTML中，<、>、"、'、&是特殊字符，它們自己就是HTML語法的一部分，所以，若是直接把它們包含進咱們的文本中有時會出現錯誤，若是想要在文本中使用它們就必須使用字符引用（表示字符的特殊編碼），它們每一個字符以&開始，以;結束，具體以下表：

原義字符	等價字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

維基百科這一篇中收錄了所有的字符引用表：XML和HTML字符實體引用列表

4.HTML註釋

就如同大部分的編程語言同樣，在HTML中也能夠書寫註釋，註釋是被瀏覽器忽略，且對用戶不可見的，它們的目的是容許咱們來描述代碼的工做的。若是咱們在若干年之後從新查看咱們的代碼庫，或者處理別人的代碼，註釋是頗有用的。爲HTML添加註釋，須要特殊記號：包括起來，例如：

<p>I'm not inside a comment</p>
<!-- <p>這是一條註釋!</p> -->

5.HTML標籤的語義化

語義化的標籤，旨在讓標籤有本身的含義，選擇最合適最正確的標籤，具體左右有三：

代碼結構清晰，方便閱讀，有利於團隊合做開發。
方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。

3.搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。