HTML快速上手
阿新 • • 發佈：2020-12-19
第一章：基礎
HTML5的介紹：
HTML是用來描述網頁的一種語言，它是一種超文字標記語言
HTML不是一種程式語言，僅是一種標記語言
編寫HTML的時候要注意，他的字尾名為 " .html "
HTML5的優勢：
-
世界知名瀏覽器廠商對HTML5的支援
- 微軟
- Opera
- Mozilla
-
市場的需求
- 在HTML5的平臺上，視訊，音訊，影象，動畫及同計算機的互動都被標準化
-
W3C的標準
- W3C標準不是某一個標準，而是一個系列的標準集合，一個網頁主要三部分組成，結構，表現，行為
HTML5的檔案基本結構：
<!--以下為HTML--> HTML5的基本標籤：
標題標籤：
標題標籤：表示一段文字的標題，並且支援多層的內容結構
HTML提供了六級標題：h6最小，h1最大
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
段落標籤：
段落標籤：p 表示一個段落，一個段落中可以包含多行文字，文字內容將隨瀏覽器視窗的大小自動換行
<p>請寫你要寫的文字</p>
換行標籤：
換行標籤：<br/> 表示強制換行，該標籤沒有結束標籤，直接使用該標籤的開始和結束
<html>
<head lang="en">
<meta charset="UTF-8">
<title>換行標籤</title>
</head>
<body>
換行標籤直接放在你想要放的位置<br/>
他表示強制的換行
</body>
</html>
效果如下：
說明：象換行標籤 br 這樣的沒有結束標籤，直接使用 br 表示標籤的開始和結束的標籤叫 單標籤，
成對出現的如：這樣有開始標籤和結束標籤的標籤叫雙標籤
水平線標籤：
水平線標籤 hr 表示一條水平線，注意該標籤與 br 標籤一樣比較特殊沒有結束標籤
語法：
<hr/>就會出現一條線
效果如下：
字型樣式標籤：
<strong>加粗的位置</strong>標籤是讓字型變粗
<em></em>標籤是讓文字傾斜的
效果如下：
註釋和特殊符號：
HTML中的註釋是為了方便程式碼閱讀和除錯
語法：
HTML中常用的特殊符號及其對應的實體符號都是以 “&” 開頭，以“;”結束
特殊符號：
空格 --
大於號(>) -- >
小於號(<) -- <
引號("") -- "
版權符號 -- ©
影象標籤：
常見的影象格式有：
1. JPG格式
2. GIF格式
3. BMP格式
4. PNG格式
影象的標籤基本語法：
<img src="圖片位置" alt="影象的代替文字" title="滑鼠懸停提示文字" width="圖片寬度" height="圖片高度"/>
提示：當圖片無法顯示時，alt就會代替圖片顯示
超連結標籤：
超連結包含兩部分內容：
一是：連結地址，即連結的目標，可以是某個網址或檔案的路徑對應為標籤的href屬性
二是：連結文字或影象，單擊該文字或影象，將跳轉到href屬性指定的連結地址
語法如下：
<a href="連結地址" target="目標視窗位置"></a>
href：表示連結地址的路徑
target：指定連結在哪個視窗開啟，常用的取值有：
_seIf(自身視窗)，
_blank(新建視窗)
超文字既可以是文字超連結，也可以是影象超連結
<!--影象超連結-->
<a href="#" target="_blank"><img src="圖片的位置" alt="你好" title="你好" /></a>
當超連結href連結連結為"#"時，表示空連結，如上
連結地址又分為兩種：
絕對路徑：
指向目標地址的完整描述，一般指向本站點外的檔案：比如百度，谷歌，等等
<a href="http://www.baidu.com"/>百度</a>
相對路徑：
相對於當前頁面的路徑，一般指向本站點檔案，所有一般不需要一個完整的URL地址形式：
<a href="logo/logo.html"/>登入</a>，表示連結地址為當前頁面所在路徑的logo目錄下的logo頁面
站內使用相對路徑時常用到兩個特殊符號：
"../"表示當前目錄上級目錄
"../../"表示當前目錄的上上級目錄
<a href="../logo/logo.html"/>上級目錄</a>
<a href="../../logo/logo.html"/>上上級目錄</a>
超連結的應用場合：
實際上根據超連結的應用場合，可以把連結分為三類：
- 頁面間連結：A頁到B頁，最常用，用於網站導航
- 錨鏈接：A頁甲位置 到 A頁乙位置，或A頁甲位置 到 B頁乙位置
- 功能性連結：在頁面中呼叫其他程式功能，如：電子郵件，QQ，MSN等…
頁面間連結：就是從一個頁面連結到另一個頁面
語法：
<a href="eld/co.html"/></a>
錨鏈接：常用於目標內容很多，需要定位到目標內容中某個具體位置時
語法：
name為<a>標籤屬性，kan為標記名，其功能類似古時用來固定的錨(或鉤)所以為錨名
<a name="kan"/>目標乙位置</a>
將甲位置連結連結href屬性值為 #標記名
<a href="#kan"/>當前甲位置</a>
功能性連結：比較特殊，當單擊該連結時不是開啟某個網頁，而是啟動本機自帶的某一個應用程式
電子郵件連結的用法是：mailto:電子郵件地址
語法：
<a href="malito:[email protected]"></a>
行內元素和塊元素：
塊級元素特性：無論內容多少，該元素獨佔一行
常見的塊級有：
<div></div>
<h1></h1>到<h6></h6>
有序列表
無序列表
定義列表
<p></p>
...等等
行內元素特性：內容撐開寬度，左右都是行內元素的可以排一行
<img />
<span></span>
<a></a<
<strong></strong>
表單元素
...等等