不懂HTML？看這篇文章就夠了

05-25

不懂HTML？看這篇文章就夠了

來自專欄程序醬的筆記

很多人都說我是一門很簡單的語言，看看書，看看視頻就能讀懂我。但是，如果你完全沒有接觸過我，就想通過看一遍教程，背背標籤，想要完全了解我，真的有點太天真了。

我叫「超文本標記語言"，英文名字叫HTML，我沒有變數，沒有循環，沒有函數，我只是單純的一門靜態語言而已。你可以用我來描述靜態的東西，比如標題、段落、圖片。

工作的時候，瀏覽器大叔是播放器，我是資源，你們看到的影片是大叔根據我收藏的內容播放出來的。

我們來看一張圖，試著用語言描述一下：

在頁面的頂部有一欄標題欄，下面有張大圖，大圖下面三張圖和圖片介紹，圖文下面有一個標題，標題下面有三個圖文鏈接介紹。

這只是結合圖片來直觀的描述，但是對於瀏覽器來說，需要一個精確的描述。比如：大圖下面三張圖和圖片介紹，介紹中哪些文字需要強調？圖文下面的標題是主標題還是二級標題？

這些都是我作為HTML要表述的。配上CSS來精確的描述字體的顏色，粗細，大小，圖片的寬高，按鈕的位置。

其實了解我並不是一件難事，什麼時候學習都不晚。這取決於你是否有足夠的興趣和毅力去堅持你的選擇問題。如果你要學習的話，那要確定自己是否堅定地走「敲代碼」這條不歸路。

入門容易，精通難，且學且珍惜。

在這裡推薦一個我認為比較好的練習HTML的方法：拋開CSS，做純粹的代碼練習。其實就是單純的書寫HTML，最終的目的是他人可以通過閱讀這個HTML文件理解到頁面是怎樣的結構，甚至可以通過HTML代碼來畫出大概的頁面。

以下是HTML基本（常用）標籤的整理，希望對你有幫助。

基本

<html>…</html> 定義 HTML 文檔

<head>…</head> 文檔的信息

<title>…</title> 文檔的標題

<body>…</body> 可見的頁面內容

注釋

文本

<h1>...</h1> 標題字大小（h1~h6）

<b>...</b> 粗體字

<strong>...</strong> 粗體字(強調)

<i>...</i> 斜體字

<em>...</em> 斜體字(強調)

<u>...</u> 下劃線

<del>...</del> 刪除線(表示刪除)

<center>…</center> 居中文本

<ul>…</ul> 無序列表

<ol>…</ol> 有序列表

<li>…</li> 列表項目

<a href=」…」>…</a> 超鏈接

<font> 定義文本字體尺寸、顏色、大小

<sub> 下標

<sup> 上標

<br> 換行

<p> 段落

圖形

<img src=』」…」> 定義圖像

<hr> 水平線

表格

<table>…</table> 定義表格

<th>…</th> 定義表格中的表頭單元格

<tr>…</tr> 定義表格中的行

<td>…</td> 定義表格中的單元

其它

<form>…</form> 定義供用戶輸入的 HTML 表單

<frame> 定義框架集的窗口或框架

https://u.wechat.com/MMFd7gieWyD03EisPz_YG3I (二維碼自動識別)