【HTML基礎彙總】
HTML 前期整體脈絡
2017年1月7日 14:23:24
0.序
1. 前言：
從2016年最後的一個周開始 ，我開始HTML5，開始步入WEB前端行業的學習
時間很快， 兩個周就這樣過去了，這樣我們前端HTML基礎入門以及CSS基礎也基本上準備結束了，在這個週六、我利用一些自習時間抽空來把前面的整體脈絡總結做一下筆記 哈哈哈哈哈哈哈哈
2. 總覽
WEB前端主要分成三大塊：html 結構、css樣式、js 行為。在前兩週我們主要學的是HTML 以及一些CSS樣式！所以下面主要寫的是HTML的基礎
3. HTML 基礎
3.1 HTML簡介
HTML 是一種超文字標記語言（英語：Hyper Text Markup Language,簡稱：HTML）是一種建立網頁的標記語言，主要是執行在瀏覽器上，由瀏覽器來解析。主要是一些超連結，文字，圖片，影象燈
- HTML 指的是超文字標記語言: **H**yper**T**ext **M**arkup **L**anguage
- HTML 不是一種程式語言，而是一種標記語言
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- HTML 文件包含了HTML** 標籤及文字**內容
- HTML文件也叫做* web 頁面*
3.1.1 什麼是標記語言
標記語言：標記語言簡單的理解就是：將特定的英語放入帶有”<>
3.2 HTML 基礎結構
好了！ 程式設計師大部分都是以程式碼說話，所以先放程式碼再BB：
<!-- 宣告文件型別
// 這不是一個標籤
--> 首先需要一個文件型別宣告：
<!DOCTYPE html>這個主要是為了讓瀏覽器當讀取到這個檔案時知道使用什麼語言格式去解析！ 注意：文件型別宣告不是一個標籤然後就是
<html></html>根元素 每個HTML檔案的內容都需要在根元素標籤內書寫接下來就是：
<head></head>這是頭部標籤（以下使用”head區“代替），注意 在head 區中大部分的內容是不可見的，可以簡單的的說除了title標籤內的內容其他的都可以見裡面主要包含
文件的元資料
<meta>資料，在前面我們用到是的（meta）標籤主要是用來設定頁面的編碼格式：例子：
<meta charset="utf-8">然後head區需要的是一個title 標籤 這是宣告文件的標題！ 如：
<title>這是頁面標題</title>好了，head區現在主要說的 就是這些了
head區下面 就是我們的主要介面結構，就是我們可以在網頁中可以直接看到的東西。主要是由body標籤（以下簡稱：body區）來包裹！
3.3 標籤
好了！ 上面說完了HTML的基本結構之後 下面我們來了解以下一些簡單的HTML標籤
3.3.1 什麼是標籤
標籤：HTML的標記標籤的簡稱（英文：HTML tag）
- HTML 標籤是由尖括號包圍的關鍵詞：比如：< html >
- 標籤分為兩個中：分別是單標籤和雙標籤【 <標籤名>內容
3.3.2 塊元素標籤
塊級元素標籤：每個標籤都會獨佔一行，都是從新的一行開始
3.3.2.1 h1-h6 標題標籤
標題標籤通常會有自身的樣式： 共有6級標籤 分別<h1></h1>到<h6></h6>
程式碼以及效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊級元素 標題元素</title>
</head>
<body>
<h1>我是 1 級標題</h1>
<h2>我是 2 級標題</h2>
<h3>我是 3 級標題</h3>
<h4>我是 4 級標題</h4>
<h5>我是 5 級標題</h5>
<h6>我是 6 級標題</h6>
</body>
</html>效果圖：
(每個)HTML檔案中標題標籤的建議使用：
h1 標籤推薦使用1次
h2 推薦使用3-5次,如果篇幅比較長可以使用5-10次
h3 應該是沒有限制
3.3.2.3 p 標籤 <p>內容</p>
p 標籤：一定一段文字，獨佔一行
3.3.2.3 ul 和 ol
ul是無序列表
ol是有序列表 通常 兩個都跟li一起是用,ol 預設的序號是阿拉伯數字可以通過在 ol內部是這樣type 屬性來設定排序的符號： 可以是小寫字母 、大寫字母、羅馬數字
主要程式碼運用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊級元素</title>
</head>
<body>
<!--
<ol> 有序列表
-->
<ol type="1">
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
</ol>
<!--
<ul> 無序列表
-->
<ul>
<li>第1點</li>
<li>第2點</li>
<li>第3點</li>
<li>第4點</li>
<li>第5點</li>
</ul>
</body>
</html>效果圖：
塊元素主要學的內容就這寫
3.3.3 內聯元素標籤
- 內聯元素標籤不能設定寬高
- 寬度和高度都是有其內部的內容來撐開
- 程式碼中的換行空格會被解析
3.3.3.1 a 標籤
在所有瀏覽器中，連結的預設外觀如下：
- 未被訪問的連結帶有下劃線而且是藍色的
- 已被訪問的連結帶有下劃線而且是紫色的
- 活動連結帶有下劃線而且是紅色的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯元素標籤</title>
</head>
<body>
<!--
href:
路徑：
target:
指定使用框架集中的那個框架來裝載另一個資源
_self:自身
_blank: 新視窗
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>效果:
3.3.4 內聯塊元素標籤
內聯元素：顧名思義就是既有塊元素的特性也有內聯元素的特徵
- 可以設定寬度和高度
- 不會獨佔一行
- 換行內容會被解析
在此我們主要將常用的 【img】 影象標籤
3.3.4.1 img 影象標籤
程式碼使用如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯塊元素</title>
<style type="text/css"></style>
</head>
<body>
<img src="img/dog.png" alt="狗狗">
<!--
src:用於圖片所在的路徑（絕對和相對路徑都行）
alt:1.當圖片載入失敗時，指定一段文字為該圖片的提示資訊
2.針對SEO進行圖片的解析和說明
-->
<img src="img/dog.png" alt="狗狗">
<img src="img/dog.png" alt="狗狗">
</body>
</html>效果：
如果說內聯塊元素既有內聯元素的特性，也有塊元素的特性，那麼為什麼不直接都用內塊元素呢？
那麼，下面我們就來說說內聯塊元素的缺點:
- 不會佈滿父元素的整個內容區域
- 會自身帶有間隔
3.3.5 標籤之間的相互轉換：
內聯塊元素標籤、內聯元素標籤、塊元素標籤如何相互轉換？
通過CSS 中的一個屬性來轉換：因為還沒說到CSS 那麼我直接上程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標籤之間的相互轉化</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background: red;
display: inline-block;
/*
dispaly:;
1. block ：塊
2. inline :內聯
3. inline-block: 內聯塊
4. none: 無 讓標籤完全消失，系統佈局時不再考慮該元素
*/
}
</style>
</head>
<body>
<div>明天就要放假了！！！！</div>
<div>明天就要放假了！！！！</div>
<div>明天就要放假了！！！！</div>
</body>
</html>塊元素允許巢狀其他元素：p,h1~h6 ,dt 這幾種中間不能巢狀其他的塊元素標籤
好了 HTML部分 整個周好像就學到了這麼而已了