HTML入門速成
工作之中，經常需要自己寫一些簡單的網頁，那麼，就需要有一定的前端程式碼能力。HTML，CSS，JavaScript等皆是最常用的前端程式碼，本小節即學習筆記，幫助各位初學者快速找到自己想要的網頁製作所需要的HTML程式碼。
一。 最常見的網頁結構
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
‘utf-8’
>
<
title
>
開始HTML
title
>
head
>
<
body
>
<
h1
>
你今天碼程式碼了嗎？
h1
>
body
>
html
>
以上程式碼儲存為。html格式，然後用瀏覽器開啟即為最簡單的網頁。可以試一試~
二. HTML元素
元素是HTML的最基本部件，由成對尖括號
<>
及括號間的內容組成。例如：
你今天碼程式碼了嗎？
。2.1 基本元素（
文字粗細，斜體，上/下標，連結，載入圖片，刪除線，下劃線
）
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
‘utf-8’
>
<
title
>
教程
title
>
head
>
<
body
>
<
h1
>
我的第一個標題
h1
>
<
p
>
我的第一個段落
p
>
<
a
href
=
“http：//www。runoob。com”
>
這是我的第一個連結
a
>
<
br
/>
<
img
src
=
“/images/logo。png”
width
=
“258”
height
=
“28”
/>
<
br
/>
<
b
>
加粗文字
b
>
<
br
/>
<
i
>
斜體文字
i
>
<
br
/>
<
p
>
這是
<
sub
>
下標
sub
>
p
>
<
p
>
這是
<
sup
>
上標
sup
>
p
>
<
p
>
My favorite color is
<
del
>
blue
del
>
<
ins
>
red
ins
>
！
p
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
body
>
html
>
上述元素包括文字粗細，斜體，上/下標，連結，載入圖片，刪除線，下劃線等。以上程式碼執行後，如圖：
2.2 表格
如何生成表格？
會用到以下標籤
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
‘utf-8’
>
<
title
>
教程
title
>
head
>
<！——給表格加樣式——->
<
style
type
=
“text/css”
>
th
{
background-color
：
lightskyblue
；
color
：
#255e95
}
style
>
<
body
>
<
table
border
=
“1”
cellspacing
=
“0”
>
<
caption
>
工資單
caption
>
<
tr
>
<
th
>
年份
th
>
>
<
th
>
季度
th
>
>
<
th
>
姓名
th
>
>
<
th
>
工資
th
>
>
<
th
>
獎金
th
>
>
<
th
>
個稅
th
>
>
<
th
>
扣除個稅工資
th
>
>
tr
>
<
tr
>
<
td
rowspan
=
“4”
>
2019
td
>
<
td
>
1
td
>
<
td
rowspan
=
“4”
>
王建民
td
>
<
td
>
28900
td
>
<
td
>
3458
td
>
<
td
>
3988
td
>
<
td
>
21454
td
>
tr
>
<
tr
>
<
td
>
2
td
>
<
td
>
27366
td
>
<
td
>
3458
td
>
<
td
>
3988
td
>
<
td
>
21454
td
>
tr
>
<
tr
>
<
td
>
3
td
>
<
td
>
27366
td
>
<
td
>
3458
td
>
<
td
>
3988
td
>
<
td
>
21454
td
>
tr
>
<
tr
>
<
td
>
4
td
>
<
td
>
27366
td
>
<
td
>
3458
td
>
<
td
>
3988
td
>
<
td
>
21454
td
>
tr
>
table
>
body
>
html
>
2.3 列表(有序列表/無序列表/巢狀列表)
2.3.1 有序列表
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
‘utf-8’
>
<
title
>
教程
title
>
head
>
<
body
>
<
ol
type
=
“A”
>
<
li
>
蘋果
li
>
<
li
>
香蕉
li
>
<
li
>
雪梨
li
>
<
li
>
西瓜
li
>
ol
>
body
>
html
>
有序列表-水果
2.3.2 無序列表
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
‘utf-8’
>
<
title
>
教程
title
>
head
>
<
body
>
<
ul
type
=
“A”
>
<
li
>
蘋果
li
>
<
li
>
香蕉
li
>
<
li
>
雪梨
li
>
<
li
>
西瓜
li
>
ul
>
body
>
html
>
無序列表-水果
2.3.3 巢狀列表
<！DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
‘utf-8’
>
<
title
>
教程
title
>
head
>
<
body
>
<
ul
type
=
“A”
>
<
li
>
蘋果
li
>
<
ol
>
<
li
>
大蘋果
li
>
<
li
>
小蘋果
li
>
ol
>
<
li
>
香蕉
li
>
<
li
>
雪梨
li
>
<
li
>
西瓜
li
>
ul
>
body
>
html
>
2.4 <style>和<script>
style元素可以給HTML增加css樣式
<！——給表格加樣式——->
<
style
type
=
“text/css”
>
th
{
background-color
：
lightskyblue
；
color
：
#255e95
}
style
>
以上是給表格增加背景色的程式碼，一般這段加在HTML的
之間加入css樣式有三種形式：內聯樣式，內部樣式表，外部樣式表
內聯樣式：
文字文字文字
內部樣式表：
外部樣式表：
script+指令碼
以下是xmind可以幫助大家記憶：
覺得有用的小夥伴記得收藏點贊~