都2020年，移動互聯時代了，還學HTML / CSS這種技術？
請聽代碼盒子給您解釋下，為什麼每個對編程、互聯網技術感興趣的人、每個專業人士都應該學點HTML / CSS。
為什麼要學HTML / CSS
- HTML / CSS是網站的基礎，網站永遠不會過時。每個媒體、公司、銀行、政府部門、學校、醫院等都需要網站，需要熟練掌握HTML / CSS的頁面開發和編輯人員。
- 電商網站、視頻網站、媒體網站、遊戲網站等，使用了複雜的前端技術，都需要具有高級技能的HTML / CSS / JavaScript開發人員。無一例外，都要求掌握好 HTML / CSS。
- HTML / CSS 也是各種前端框架如React、VUE等的基礎，不掌握好HTML / CSS，是沒法學好、用好這些框架的。
- HTML / CSS 也是移動互聯網技術的基礎，特別是微信、支付寶小程序，可以說直使用了HTML / CSS技術。當然開發小程序，也需要JavaScript，我們在後續文章裡專門介紹JavaScript。
- HTML / CSS 簡單易學，是互聯網技術的入口，也很適合青少年、非技術人員入門。
- 科技工作者、研究人員、市場營銷專業人士，經常要在網站上發表文章。掌握HTML / CSS技術，也對利用網頁技術，優美的展現文章，有很大的幫助。
這篇文章的在線練習盒子是23號代碼盒子，在PC上訪問 https://daima.co/23
跟代碼盒子學點HTML / CSS的基本知識吧。後續文章裡，我們會對HTML / CSS作全面的介紹。
什麼是HTML
HTML是超文本標記語言——HyperText Markup Language的縮寫。HTML定義網頁的內容，CSS定義網頁內容的外觀展現，例如佈局、顏色、字體、行距等。
HTML 使用“標籤”（tag）如
，，，，
等等註明文本、圖片和其他內容，以便於在 Web 瀏覽器中顯示。
<code><
h1
> Hello, World!你好，世界!h1
>/<code>
HTML已經標準化，最新版本為HTML5，簡稱H5。
HTML是告知瀏覽器如何組織頁面的標記語言，不是編程語言。
千萬不要跟程序員辯論這個，容易打架！！！
什麼是CSS
CSS是層疊樣式表 (Cascading Style Sheets）的簡寫，是一種 樣式表 語言，用來描述 HTML文檔的外觀，例如佈局、顏色、字體、行距等。CSS可以根據展現的設備，比如屏幕、紙質、音頻等進行針對性的設計。
CSS也已經標準化，最新版本為CSS3。
CSS的核心是使用選擇器(selector)，來選擇HTML的元素，使用 屬性(property):值(value); 的 聲明(declarations)來定義樣式。
<code>h1
{color
: red;font-size
:5em
; }/<code>
HTML 網頁的基本結構
我們以一段簡單的HTML代碼，看一下HTML網頁的基本結構。
<code> ><
html
><
head
><
meta
charset
="utf-8"
><
title
>HTML基本結構title
>head
><
body
><
h1
> Hello, HTML。你好，HTML。h1
><
h2
> Hello, HTML。你好，HTML。h2
><
h3
> Hello, HTML。你好，HTML。h3
><
h4
> Hello, HTML。你好，HTML。h4
><
h5
> Hello, HTML。你好，HTML。h5
><
p
>這是第一個段落。p
>body
>
html
>/<code>
題外話，我們在招聘時，會問到HTML頁面的基本結構是什麼，很多有經驗的開發者，都回答不上來。不應該啊！
如果您發現代碼的格式有點亂，這個是頭條號的缺陷，我們也沒有辦法。
我們來一一解析下每個標籤。請注意，標籤符號 < 和 > 內的標籤名和屬性名稱，不區分大小寫，屬性值區分大小寫。標籤內容區分大小寫。
例如:
<code><
p
title
="Good"
> Nicep
> 與<
P
TITLE
="Good"
> Nicep
> 相同 但是<
p
title
="Good"
> Nicep
> 與<
P
TITLE
="Good"
> NICEp
> 代表的內容不同/<code>
標籤，用來說明這篇文檔是HTML，而不是其他標記語言例如XTML的文檔。如果不聲明，一般現代瀏覽器都默認為HTML。
...
html標籤定義的元素包裹了整個完整的頁面，是HTML頁面的根元素。
...
標籤定義的元素是一個容器，包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS樣式，字符集聲明等等。這個元素設置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的所有文本內容。utf-8字符集是事實的標準，除非在古老的系統上編寫HTML，都使用utf-8。
...
設置頁面標題，出現在瀏覽器標籤上，當標記/收藏頁面時可用來描述頁面。
...
元素，包含了訪問頁面時所有顯示在頁面上的內容，文本，圖片，音頻，遊戲等等。 ...
元素，一級標題，對應的有h2、h3、h4、h5級標題，用來代表標題的重要性或者層次。
...
元素，代表一個段落。
以上的基本結構文檔，沒有定義任何樣式。瀏覽器使用默認樣式進行渲染。在我的瀏覽器裡是這樣顯示的。在您的瀏覽器裡可能略有不同。
打開23號代碼盒子，查看基本結構.html。鏈接： https://daima.co/23
增加一點樣式CSS
HTML定義網頁的內容，CSS定義網頁的展現樣式。
CSS可以作為標籤的屬性直接定義某個標籤的展現形式、通過 代碼 通過h2選擇器，選擇HTML文檔中的h2元素，設置顏色為green，綠色，顯示方式為 inline-block，底部邊框寬度為一個像素，實線，綠色。我們將在後面文章中詳細介紹CSS選擇器和各類屬性。
增加一張圖片
自從網頁能顯示圖片以後，互聯網就從學術界進入了普通人的生活。Facebook就是從顯示哈佛女生圖片開始的。
HTML頁面使用標籤和src 來源屬性引入圖片。
您可以在任何網頁的圖片按右鍵，查看圖片來源，獲得圖片鏈接地址，例如頭條今天的一片文章的一幅圖片地址是： https://t.m.youth.cn/magicimg/d.youth.cn/shrgch/202009/W020200930265571094015.jpg。
有些網站為了防止盜鏈，禁止第三方網站引用自己的圖片。
代碼盒子支持上傳圖片，在代碼中引用圖片。我們上傳一張風景圖：
上傳圖片
現在我們添加圖片標籤：
新的代碼：
<code> ><
html
><
head
><
meta
charset
="utf-8"
><
title
>HTML基本結構title
><
style
>
h2
{color
: green;border-bottom
:1px
solid green;display
: inline-block; }style
>head
><
body
><
h1
style
="color: blue;"
> Hello, HTML。你好，HTML。h1
><
h2
> Hello, HTML。你好，HTML。h2
><
h3
> Hello, HTML。你好，HTML。h3
><
h4
> Hello, HTML。你好，HTML。h4
><
h5
> Hello, HTML。你好，HTML。h5
><
p
> 這是第一個段落。p
><
img
src
="//p2.ttnews.xyz/5f97ca557fb732793d19f2c3.jpg"
>body
>html
>/<code>
展示效果：
如何進行練習
學習HTML / CSS，最好的方法就是邊學，邊練習。
您可以在自己的電腦上設置一個簡單的練習環境。進行基本的練習，只需要安裝一個文本編輯器就可以了。我們推薦使用微軟開發的VS Code，您可以搜索vs code下載。
更方便的是在代碼盒子（https://daima.co)註冊一個賬號，打開我們的演示代碼盒子，拷貝演示盒子，就可以直接練習了。
這篇文章的演示盒子編號為 23 號，訪問鏈接 https://daima.co/23
23號盒子， https://daima.co/23
練習題：
- 從空白頁開始，手工輸入代碼，實現演示頁面
- 上傳一張您最喜歡的風景照，在頁面中展示風景照
- 搜索下列表ul、ol、li標籤，在頁面中添加一個待辦事項列表
如果您覺得我們的文章對您有用，給個贊，關注下我們，分享給您的朋友，就是最大的支持。
