文章目錄
可去http://www.runoob.com/try/try.php?filename=tryhtml_intro進行練習
頁面的總體結構
html定義了三個定義頁面總體結構以及提供簡單信息的標籤——<html><head><body>。這些標籤不影響頁面的外觀，而只是用於向瀏覽器提供信息。
<html>標示這是一個html文檔。
<head>是html文件的標題，還提供一些信息給瀏覽器。
<body>裏面是真正的頁面元素，會被瀏覽器渲染顯示出來。
頁面開頭的DOCTYPE是什麼？
DOCTYPE不是網頁結構標籤，但xhtml1.0和html5都要求頁面必須包含它。它指出了網頁遵守的html標準，有時候還指出了定義規範的文檔類型定義(DTD)。
title——名稱
<title>標籤放在<head>標籤裏面，用於給頁面起名字。如下：
<!DOCTYPE html>
<html>
<head>
<title>1111</title>
</head>
<body>
</body>
</html>
h1、h2、h3、h4、h5、h6——標題
html定義了6級標題，不同級別的標題沒有編號，只是大小粗細不同。
<!DOCTYPE html>
<html>
<head>
<title>1111</title>
</head>
<body>
<h1>2222</h1>
<h2>2222</h2>
<h3>2222</h3>
<h4>2222</h4>
<h5>2222</h5>
<h6>2222</h6>
</body>
</html>
p——段落
<!DOCTYPE html>
<html>
<head>
<title>1111</title>
</head>
<body>
<p>aaaa bbbb
cccc dddd
ffff
hhhh</p>
<p>aaaa bbbb
cccc dddd
ffff
hhhh</p>
</body>
</html>
換行和空格好像有點奇怪！？可以參考https://www.cnblogs.com/zhangrunhao/p/10059950.html。
註釋
註釋使用<!--開始，使用-->結尾，其中間部分會被註釋。
ol、li——有序列表
有序列表中有幾個重要的屬性：
1、list-style-type，決定編號樣式
2、start，決定起始編號，不管編號樣式是什麼，start的值都要使用阿拉伯數字表示。
3、value，用在li標籤中，可以特別指定該標籤使用的編號。
例子：
<!DOCTYPE html>
<html>
<head>
<title>1111</title>
</head>
<body>
<ol>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ol>
<p>------------------------------------------</p>
<ol start="2">
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ol>
<p>------------------------------------------</p>
<ol>
<li>2222</li>
<li value="12">3333</li>
<li >4444</li>
<li value="22">5555</li>
</ol>
<p>------------------------------------------</p>
<ol style="list-style-type:lower-roman">
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ol>
<p>------------------------------------------</p>
<ol style="list-style-type:lower-roman" start="2">
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ol>
<p>------------------------------------------</p>
</body>
</html>
有序列表的編號樣式
| list-style-tyle的值 | 描述 |
|---|---|
| decimal | 阿拉伯數字，1、2、3、4 |
| lower-alpha | 小寫字母，a、b、c、d |
| upper-alpha | 大寫字母，A、B、C、D |
| lower-roman | 小寫羅馬數字，i、ii、iii、iv |
| upper-roman | 大寫羅馬數字，I、II、III、IV |
ul、li——無序列表
無序列表中有幾個重要的屬性：
1、list-style-type，決定編號樣式
2、list-style-image，可以使用圖片當做編號
3、list-style-position，當li中的內容橫跨多行時，此屬性用於決定後續行與編號對齊還是和內容對齊。
4、list-style，使用該屬性可以一次性定義上面的3個屬性
例子：
<!DOCTYPE html>
<html>
<head>
<title>1111</title>
</head>
<body>
<ul style="list-style-type:disc">
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<ul style="list-style-type:square">
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<ul style="list-style-type:circle">
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<ul style="list-style-position:outside">
<li>22222222222222222222222222222222222222222222
222222222222222222222222222222222</li>
</ul>
<ul style="list-style-position:inside">
<li>22222222222222222222222222222222222222222222
2222222222222222222222222222222222</li>
</ul>
<ul style="list-style:circle outside">
<li>22222222222222222222222222222222222222222222
2222222222222222222222222222222222</li>
</ul>
</body>
</html>
dl、dt、dd——定義列表
可以自已定義列表：
<!DOCTYPE html>
<html>
<head>
<title>1111</title>
</head>
<body>
<dl>
<dt>111</dt>
<dd>222</dd>
<dd>555</dd>
<dt>333</dt>
<dd>444</dd>
</dl>
</body>
</html>
列表的其它用途
列表是可以嵌套的，列表結合css和js，可以做出導航菜單等複雜功能。後續應該可以學到。