小夥伴們，好幾天不見了，這一週菜鳥小白工作很忙，所以沒有每天更新學習內容，但是菜鳥小白的學習是沒有停下來的，只是沒有時間來整理學習筆記了。現在就將菜鳥小白這兩天學習的HTML基礎和大家分享，其中還會拿一些標籤進行舉例，顯示效果。
HTML概述
HTML語言是一種標籤語言，它不需要編譯，可以直接由瀏覽器執行。在標準網頁設計中HTML負責填充網頁的內容，HTML編寫的超文字文件（檔案）稱之為HTML文件（網頁），它包含了一些html元素，使用html或者htm為檔名字尾，能獨立於各種作業系統平臺，如Unix、Windows等
HTML文件結構
標準的html文件是由標籤和要顯示在網頁上的內容組成。HTML用於描述功能的符號成為“標籤”，如<html>、<body>、<table>等。HTML標籤規定HTML文件的邏輯結構，並且控制文件的顯示格式，然後由瀏覽器來負責解釋並顯示頁面。通過使用標籤可以區分文字檔案的各個組成部分，對頁面上的文字、表格、圖片等多媒體資料所出現的未知、形式、順序及網頁間的超連結關係進行設定。
HTML標籤
標籤都是封裝在一對尖括號“<……>”之中。標籤只改變網頁的顯示方式，本身不會顯示在視窗中。HTML文件中最先出現的標籤是<html>標籤。<html>標籤是文件識別符號，它是成對出現的，首標籤<html>和尾標籤</html>分別位於文件的最前面和最後面，明確地表示文件是以超文字標識語言（HTML）編寫的。該標籤不帶任何屬性
<html>……</html>之間有如下標籤：
頭部標籤<head>……</head>
head是英文“頭”的意思。習慣上使用者把HTML文件分為文件頭和文件主體兩部分。文件主體部分就是在web瀏覽器視窗的使用者區內看到的內容，而文件頭部分用來規定該文件的標題（出現在web瀏覽器視窗的標題欄中）和文件的一些屬性。<head>標籤對的作用就是控制文件的頭部資訊。中間可以使用<title>……</title>、<script>……</script>標籤對，在此標籤中間可以HTML文件的標籤是可以巢狀的，即在一對標籤中可以嵌入另外一對子標籤，用來規定母標籤所含範圍的屬性或其中某一部分內容，巢狀在<head>……</head>標籤對中使用的主要有<title>標籤
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
菜鳥小白的學習分享
</head>
</html>
儲存為HTML檔案後顯示如下：
標題標籤<title>……</title>
<title>標籤是成對出現的，用以規定HTML文件的標題。在<title>……</title>之間的內容將顯示在web瀏覽器視窗的標題欄中。另外，<title>……</title>標籤對只能放在<head>……</head>標籤對之間，而且其內部不能包含其它標籤。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
</html>
修改後顯示如下：
主體標籤<body>……</body>
<body>標籤也是成對出現的。在<body>……</body>之間的內容將顯示在web瀏覽器視窗的使用者區內，它是HTML文件的主體部分。可以把HTML文件的主體區域簡單地理解成標題以外的所有部分，該部分可以包含<table>、<font>、<img>、<div>等標籤。結束標籤</body>指明主體區域的結尾，在<body>中可以規定整個文件的一些基本屬性：
-
“bgcolor”：指定html文件的背景色
-
“text”：指定html文件中文字的顏色
-
“link”：指定html文件中待連線超連結物件的顏色
-
“alink”：指定html文件中連線中超連結物件的顏色
-
“vlink”：指定html文件中已連線超連結物件的顏色
-
“background”：指定html文件的背景檔案
我們驗證了前兩個屬性
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
測試內容
</body>
</html>
顯示效果如下：
特殊字元
在html中有許多特殊字元需要處理，例如：“<”、">"這兩個符號本身是用來表示標籤的開始和結束的，是沒有辦法通過直接打出來的，必須輸入編碼表示法：“<”和“>”。
通常情況下html會自動擷取多餘的空格。不管你加多少個空格，都被看做一個空格。如果要顯示多個空格，可以使用 表示空格
我們看看實現程式碼
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<測試內容> 空格在中間 看到了吧
</body>
</html>
顯示效果：
格式標籤
在瀏覽器中控制文字物件的顯示，包括段落、換行、水平線等標籤，下面介紹幾個常用的html格式標籤。所有的格式標籤全部都是在巢狀在<body>……</body>標籤對之間的
段落標籤<p>
全稱paragraph。<p>……</p>標籤對用於建立一個段落，支援align屬性來設定對齊方式，語法如下：
-
<p align=“屬性”>段落內容</p>
-
align：設定水平對齊方式，常見設定：
-
置左：align=“left”
-
置中：align=“center”
-
置右：align=“right”
我們驗證一個居中的對齊方式吧
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><測試內容> 空格在中間 看到了吧</p>
</body>
</html>
顯示效果：
換行標籤
在不另起一段的情況下將當前文字強制換行，<br>標籤屬於單獨出現的標籤，禁止出現結束標籤。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><測試內容></br> 空格在中間 看到了吧</p>
</body>
</html>
顯示效果：
預格式化標籤<pre>
可以完整保留設計者在原始檔中所定義的格式，包含各種空格，縮排，以及其他特殊字元，全部都原封不動的展示在瀏覽器頁面上。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><測試內容></br> 空格在中間 看到了吧</p>
<pre>
我是菜鳥小白
你們的好朋友
讓我們一起學習吧！！！
</pre>
</body>
</html>
顯示效果：
列表標籤
主要分為無序列表、排序列表、目錄列表、選單列表和描述性列表五中型別
-
無序列表<ul><li>……</li></ul>
-
排序列表<ol><li>……</li></ol>
-
目錄列表
-
選單列表
-
描述性列表<dl><dt>列表頭<dd>列表內容
我們就驗證一個無序列表和一個描述性列表吧
無序列表：
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<ul>
<li>我是菜鳥小白</li>
<li>你們的好朋友</li>
<li> 讓我們一起學習吧！！！</li>
</ul>
</body>
</html>
效果如下：
描述性列表：
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<dl>
<dt>菜鳥小白測試表頭</dt>
<dd>我是菜鳥小白</dd>
<dd>你們的好朋友</dd>
<dd> 讓我們一起學習吧！！！</dd>
<dt>菜鳥小白測試表頭2</dt>
<dd>我是菜鳥小白</dd>
<dd>你們的好朋友</dd>
<dd> 讓我們一起學習吧！！！</dd>
</dl>
</body>
</html>
顯示效果如下：
好了，今天的內容就到這了，我們明天繼續學習HTML基礎內容，不見不散~