一、HTML初識元素/標籤及其語法
開始標籤裏的屬性代表標籤內容的一些特性，如顏色、大小、鏈接等。<br>標籤比較特殊，它是單獨存在的，表示換行。
一個html文檔的結構如上圖所示，具體代碼如下：
<!--文檔版本聲明-->
<!DOCTYPE html>
<!--html標籤-->
<html>
<!--head標籤-->
<head>
<meta charset="utf-8"><!--編碼方式-->
<title>html document</title><!--標題-->
</head>
<!--body標籤-->
<body>
aaaa
</body>
</html>在瀏覽器中打開文檔，效果如下，其中瀏覽器標籤內容沒有截圖出來，但其中顯示的正是head標籤裏的title標籤的內容html document，這樣我們的第一個網頁就完成了。
需要注意的是，其中head標籤裏的meta標籤的開始標籤裏接了一個charset，這就是標籤屬性。
二、HTML語義化標籤
- 標題化標籤
標題化標籤從h1到h6共有六級，類似於word文檔的多級標題，不同級別的標題標籤樣式不同，如大小和粗細，需要注意的是標題標籤和之前學到的title標籤是不一樣的，title標籤內容是顯示在瀏覽器的標籤上的，表示整個html文檔的標題，而<h1>到<h6>等標籤是顯示在頁面上的，類似於Word的多級標題，下面放上實例代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html 標題標籤</title>
</head>
<body>
<h1>這是標題1</h1>
<h2>這是標題2</h2>
<h3>這是標題3</h3>
<h4>這是標題4</h4>
<h5>這是標題5</h5>
<h6>這是標題6</h6>
</body>
</html>文檔在瀏覽器中打開的效果如下：
- 段落標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 段落標籤</title>
<!--定義p標籤的樣式讓其在沒有內容的時候不進行佔位-->
<style>
p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>段落內容1</p>
<p></p><!--在默認的瀏覽器樣式中空標籤也佔地方，可以自己定製p標籤的樣式，比如在head中在style標籤中定義p標籤的樣式讓其不佔位-->
<p>段落內容2</p>
</body>
</html>在瀏覽器中效果如下：
- 字體標籤
下面是代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font標籤</title>
</head>
<body>
<!--文字大小-->
<font size="1">HTML</font>
<!--字體風格-->
<font size="1" face="Helvetica">HTML</font>
<!--字體顏色-->
<font color="red">多姿多彩html</font>
<font color="#d8d8d8">多姿多彩html</font>
<font color="rgb(168,178,188)">多姿多彩html</font>
</body>
</html>下面是瀏覽器打開效果：
但是我們在日常開發中實際上並用不到這個font標籤，因爲各種風格樣式我們都是通過css來完成的，因此這裏簡單的瞭解一下即可。
- 鏈接標籤
下面是代碼實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 鏈接標籤</title>
<!--改變鏈接標籤的樣式：
1、鏈接文本內容顏色和點擊過的鏈接文本內容顏色
2、取消鏈接文本下劃線
3、取消鼠標移動到鏈接文本的光標效果
-->
<style>
.content{
height: 800px;
}
a{
color: 333333;
text-decoration: none;
cursor: none;
}
a:visited{
color: #333333;
}
</style>
</head>
<body>
<!--注意href屬性一定要是完整的網址，http或者https是一定要加上的-->
<a href="https://www.google.com.hk/" target="_blank">點擊後在新頁面打開鏈接</a>
<br>
<a href="https://www.google.com.hk/" target="_self">點擊後在本頁面打開鏈接</a>
<br>
<a href="#titleThird">頁面內錨點</a>
<br>
<a href="javasript:void(0);">能跳走算我輸</a>
<br>
<!--在head中改變了樣式佔用了空間，以便顯示點擊頁面內錨點後的跳轉效果-->
<div class="content">一堆內容</div>
<br>
<!--id是所有標籤的通用屬性-->
<h3 id="titleThird">第三章</h3>
</body>
</html>在瀏覽器中打開的效果如下
- 圖像標籤
圖像標籤<img />是單獨的一個標籤，不需要結束標籤，在HTML中放置圖像有兩種方法，一種是通過圖像標籤，另一種則是通過設置style的background，具體如下代碼所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 圖像</title>
<!--"."是用來匹配文檔中對應類名的-->
<style>
.logo
{
background: url(http://avatar.csdn.net/7/9/9/1_xwx617.jpg);
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<!--圖片標籤，不加大小屬性的話默認爲原圖片大小-->
<img width="100px" height="50px" src="http://avatar.csdn.net/7/9/9/1_xwx617.jpg" />
<br>
<!--圖片標籤的alt屬性是在src屬性錯誤的情況下顯示的內容-->
<img alt="加載圖片出錯" src="ajfijsdifjos"/>
<br>
<!--通過非標籤的方式實現圖片效果
class屬性：用來指示標籤的類名
-->
<p class="logo"></p>
</body>
</html>在瀏覽器中打開文檔效果如圖，第一行是正常img標籤的效果，第二行是img標籤圖片源出錯的效果，第三行則是利用style的background放置的圖片效果，可以看出來第三種是一種填充效果。
- 列表標籤
列表標籤分爲無序列表<ul>有序列表<ol>以及定義列表<dl>，其中有序和無序列表標籤的小項的標籤都爲<li>，定義列表的小項的標籤爲<dt>和<dd>，其中dt是定義標題，dd是定義內容，在實際項目中只建議使用無序列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="tyf-8">
<title>HTML 列表</title>
</head>
<body>
<!--無序列表,li爲項,type屬性可以改變每一項前面的符號，賦值爲none時取消符號，但是不能消去符號佔的空間-->
<ul type="disc">
<li>蘋果</li>
<li>鴨梨</li>
<li>水蜜桃</li>
</ul>
<!--有序列表-->
<ol>
<li>烤冷麪</li>
<li>煎餅果子</li>
<li>麻辣燙</li>
</ol>
<!--定義列表 dt爲概念的名字，dd爲概念的解釋-->
<dl>
<dt>正數</dt>
<dd>大於0的數</dd>
<dt>負數</dt>
<dd>小於0的數</dd>
</dl>
</body>
</html>在瀏覽器中打開後效果如圖所示
- div標籤
div標籤是HTML中用的最常見最完成的標籤，在以後的學習中會詳細學習，這裏不做過多贅述，把它理解爲一個一個的塊就可以了