HTML 是用來描述網(wǎng)頁內(nèi)容的一種語言。全稱超文本標(biāo)記語言 (Hyper Text Markup Language)。 我們平時看到的頁面，如果我們在頁面上右鍵選擇“查看源文件”展現(xiàn)出來的就是HTML。
html標(biāo)簽
HTML標(biāo)簽 (HTML tag)是由尖括號包圍的關(guān)鍵詞，比如 <html>，標(biāo)簽一般是成對出現(xiàn)的，比如 <html>和 </html>，其中第一個（不帶/的）叫開始標(biāo)簽，第二個叫結(jié)束標(biāo)簽；當(dāng)然有些標(biāo)簽是沒有結(jié)束標(biāo)簽的,稱為‘單標(biāo)簽’。HTML標(biāo)簽對大小寫不敏感，<html>和<HTML>是一樣的，但提倡使用小寫。
一個網(wǎng)頁的組成
一般的頁面由下面幾個主要標(biāo)簽組成
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> </body>
</html>
body標(biāo)簽下是頁面上要顯示的內(nèi)容，而head里面則寫了一些非常重要但是不直接顯示的標(biāo)簽。
列表的實現(xiàn)
今天，我們要實現(xiàn)這樣一個列表
目標(biāo)列表
1.分析：
可以觀察到，這個列表有三層目錄，最外層是由JavaScript和Java構(gòu)成的一個無序列表，中間層是兩個有序列表，最里層又是四個無序列表，實現(xiàn)時需要注意一個細(xì)節(jié)，最外層的無序列表用的是黑點，而最里層用的是方塊。
2.預(yù)備知識：
- ul 表示無序列表，ol 表示有序列表；
- 實現(xiàn)方塊構(gòu)成無序列表時ul標(biāo)簽應(yīng)這樣使用
<ul type="square"></ul>
ul標(biāo)簽中省略type不寫時默認(rèn)是黑點。
3.具體的實現(xiàn)過程：
- 首先，實現(xiàn)最外層的無序列表，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表實現(xiàn)</title>
</head>
<body>
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
</body>
</html>
第一層的效果圖如下：
第一層效果圖
- 接著，再實現(xiàn)中間層的兩個有序列表，body里的代碼如下：
<ul>
<li>JavaScript
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
</ul>
第二層的效果圖如下：
第二層效果圖
- 最后，再實現(xiàn)最里層的四個無序列表，注意此時用的是方塊，body里的代碼如下：
<ul>
<li>JavaScript
<ol>
<li>第一章
<ul type="square">
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul type="square">
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul type="square">
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul type="square">
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
第三層的效果圖如下：
最終效果圖
本文的全部代碼可在github中查看。
