Html5學習文檔
準備：本文是初學HTML5的小夥伴非常好的筆記，大神請繞行。
學習前請先在電腦上安裝Adobe Dreamweaver CS6
一，站點的建立
作用：歸納網頁，素材及其之間的關係
建立站點根目錄：html5 根目錄不許以數字打頭，不可含有中文
二，創建Html頁面(F12預覽頁面)
1）創建首頁：新建html文件，命名爲index.html（必須），保存到html5根目錄下
2）創建子頁面：新建html文件夾，新建html文件，命名後保存到html文件夾下
3）在DW cs6中導入站點。
三，HTML5頁面結構
<!doctype html>
<html>
<head>
<meta charset=”utf-8”/> <!--申明字符集-->
<title>寧夏大學</title> <!—網頁標題-->
</head> <!--文件頭部-->
<body>
<h1>HTML5基礎教程</h1> <!--標記-->
</body> <!--文件主體-->
</html>
四，HTML5基本語法
常規語法：
<標記 屬性=”屬性值” 屬性=”屬性值”>內容</標記>
空標記的語法：沒有結束標記的標記。
<標記 屬性=”屬性值” />
說明：
1)寫在尖括號裏的第一個單詞叫做標記，也陳做標籤，還可以稱作元素；
2)標記和屬性之間用空格隔開，屬性和屬性值之間用等號連接，屬性值必須放在“”中
3)當一個標記有多個時，屬性和屬性用空格隔開，屬性和屬性之間部分先後；
<!doctype html>
<html>
<head>
<meta charset=”utf-8”/> <!--申明字符集-->
<title>寧夏大學</title> <!—網頁標題-->
</head> <!--文件頭部-->
<body>
<h1>HTML5基礎教程</h1> <!--標記-->
友情鏈接：<a href=”http://www.baidu.com”>百度</a>
<hr /> <!—分割線-->
</body> <!--文件主體-->
</html>
五，HTML5核心元素
1. 文本標題：
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
示例：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”/>
<title>寧夏大學</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
</body>
</html>
2. 段落
<p> 段落文本內容</p>
示例：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”/>
<title>寧夏大學</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<p>的大宅門門前還有兩方大石頭，這是爲騎馬官員準備的，稱之爲上下馬石，不要小看這兩塊石頭，作用極大，一是顯示主人的等級，二是上馬時真離不開它。</p>
</body>
</html>
3. 空格
不是標記
示例：
<p>
的大宅門門前還有兩方大石頭，這是爲騎馬官員準備的，稱之爲上下馬石，不要小看這兩塊石頭，作用極大，一是顯示主人的等級，二是上馬時真離不開它。
</p>
4. 加粗
<b>加粗文本</b>
<strong></strong>
示例：
<p>
<b>大宅門</b>門前還有兩方大石頭，這是爲<strong>騎馬官員</strong>準備的，稱之爲上下馬石，不要小看這兩塊石頭，作用極大，一是顯示主人的等級，二是上馬時真離不開它。
</p>
5. 強制換行
<br />
示例：
<p>
的大宅門門前還有兩方大石頭，這是爲騎馬官員準備的，稱之爲上下馬石，<br />不要小看這兩塊石頭，作用極大，一是顯示主人的等級，二是上馬時真離不開它。
</p>
6. 傾斜文本
<i>傾斜文本</i>
<em>傾斜文本</em>
7. 列表
1):無序列表
<ul>
<li>列表項內容1<li>
<li>列表項內容2<li>
<li>列表項內容3<li>
</ul>
2):有序列表
<ul>
<li>列表項內容1<li>
<li>列表項內容2<li>
<li>列表項內容3<li>
</ul>
3):自定義列表
<dl>
<dt>名詞</dt>
<dd>名詞解釋</dd>
<dt>名詞</dt>
<dd>名詞解釋</dd>
</dl>
六，HTML5核心元素2
1) 超鏈接
<a href=”目標文件的路徑和全稱”>鏈接文本</a >
Eg: 友情鏈接：<a href=”www.baidu.com”>百度</a>
2) 圖片
<img src=”目標文件路徑及名稱” />
3) 水平線
<hr />
4) Div :結構的區塊
5) Span：內幕元素，爲文本添加效果
6) 表格
7) 表單