一偏竟、簡介
編輯器
學習 HTML 最好的方式就是邊學邊實踐；
最簡單的方式：在本地電腦上創(chuàng)建一個txt文件民轴，保存成html格式攻柠，通過瀏覽器打開，沒修改一下txt文件后裸，刷新一下瀏覽器即可同步效果瑰钮；
推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)微驶。
什么是 HTML浪谴？
HTML 是用來描述網(wǎng)頁的一種語言
HTML 指的是超文本標記語言 (Hyper Text Markup Language)开睡；
HTML 不是一種編程語言，而是一種標記語言 (markup language)苟耻；
標記語言是一套標記標簽 (markup tag)篇恒；
HTML 使用標記標簽來描述網(wǎng)頁。
HTML 文檔
HTML 文檔也被稱為網(wǎng)頁
HTML 文檔描述網(wǎng)頁凶杖；
HTML 文檔包含 HTML 標簽和純文本胁艰；
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們智蝠。瀏覽器不會顯示 HTML 標簽腾么，而是使用標簽來解釋頁面的內容。
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)
HTML 標簽是由尖括號包圍的關鍵詞杈湾，比如 <html>解虱；
HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>漆撞；
標簽對中的第一個標簽是開始標簽殴泰，第二個標簽是結束標簽；
開始和結束標簽也被稱為開放標簽和閉合標簽浮驳。
HTML 元素語法
HTML 元素以開始標簽起始悍汛，以結束標簽終止；
元素的內容是開始標簽與結束標簽之間的內容抹恳；
某些 HTML 元素具有空內容(empty content)，空元素在開始標簽中進行關閉署驻，以開始標簽的結束而結束奋献；
大多數(shù) HTML 標簽元素擁有一系列的屬性；
HTML 標簽對大小寫不敏感旺上，屬性和屬性值對大小寫也不敏感瓶蚂。推薦都用小寫。
HTML 屬性
HTML 標簽可以擁有屬性宣吱，提供了有關 HTML 元素的更多信息窃这；
屬性總是以 名稱/值對 的形式出現(xiàn)，比如：name="value"征候；
屬性總是在 HTML 元素的開始標簽中規(guī)定杭攻；
屬性值應該始終被包括在引號內。雙引號是最常用的疤坝，在某些個別的情況下兆解，比如屬性值本身就含有雙引號，那么必須使用單引號跑揉。
HTML 樣式
style 屬性提供了一種改變所有 HTML 元素樣式的通用方法锅睛；
在 HTML 4 中埠巨，請避免使用這些被廢棄的標簽和屬性，未來版本的HTML和XHTML中將不再提供支持现拒，推薦使用CSS樣式代替辣垒。
| 標簽 | 描述 | 備注：替換的均為屬性 |
|---|---|---|
| <center> | 定義居中的內容 | |
| <font> 和 <basefont> | 定義 HTML 字體 | font-family font-size color |
| <s> 和 <strike> | 定義刪除線文本 | |
| <u> | 定義下劃線文本 | |
| 屬性 | 描述 | 備注：替換的均為屬性 |
| align | 定義文本的對齊方式 | text-align |
| bgcolor | 定義背景顏色 | background-color |
| color | 定義文本顏色 |
示例Demo
<html>
<body bgcolor="yellow">
<h1 style="text-align:center; color:blue;">我的第一個標題，在頁面中進行了居中排列</h1>
<p>我的第一個段落印蔬。</p>
</body>
</html>
<html> 與 </html> 之間的文本描述網(wǎng)頁勋桶；
<body> 與 </body> 之間的文本是可見的頁面內容；
<h1> 與 </h1> 之間的文本被顯示為標題扛点；
<p> 與 </p> 之間的文本被顯示為段落哥遮；
通過 style 屬性進行一系列的樣式設置。
二陵究、常用標簽
HTML 標題
標題(Heading)是通過 <h1> - <h6> 等標簽進行定義的眠饮。<h1> 定義最大的標題；<h6> 定義最小的標題铜邮；
默認情況下仪召，HTML 會自動地在塊級元素前后添加一個額外的空行，比如標題、段落等元素前后；
請確保將 HTML heading 標簽只用于標題旺隙。不要僅僅是為了產生粗體或大號的文本而使用標題奔缠，因為搜索引擎會使用標題，為網(wǎng)頁的結構和內容編制索引闸与；
<hr />標簽：在 HTML 頁面中創(chuàng)建水平線，可用于分隔內容。
HTML 段落
段落是通過 <p> 標簽定義的玖瘸；
瀏覽器會自動地在段落的前后添加空行( <p> 是塊級元素)；
使用空的段落標記 <p></p> 去插入一個空行是個壞習慣檀咙，推薦使用 <br /> 標簽代替它雅倒；
HTML 代碼中的所有連續(xù)的空行(換行)，都會被顯示為一個空格弧可；
如果希望在不產生一個新段落的情況下進行換行 (新行)蔑匣，請使用 <br /> 標簽。
HTML 鏈接
HTML 使用超級鏈接與網(wǎng)絡上的另一個文檔相連棕诵，點擊鏈接可以從一張頁面跳轉到另一張頁面裁良；
超鏈接可以是一個字，一個詞校套，或者一組詞趴久，也可以是一幅圖像。當把鼠標指針移動到網(wǎng)頁中的某個鏈接上時搔确，箭頭會變?yōu)橐恢恍∈郑?/p>
開始標簽和結束標簽之間的文字被作為超級鏈接來顯示彼棍；
通過使用 <a> 標簽在 HTML 中創(chuàng)建鏈接灭忠，有2種方法：
- href 屬性：創(chuàng)建指向另一個文檔的鏈接
- name 屬性：創(chuàng)建文檔內的書簽
- 使用 name 屬性創(chuàng)建 HTML 頁面中的書簽，它不會以任何特殊方式顯示座硕，對讀者是不可見的弛作。實現(xiàn)步驟：
- 命名錨(named anchors)，即頁面中某小節(jié)的位置华匾，點擊鏈接時映琳，會跳轉到該位置，實現(xiàn)頁面內容的快速導航
# 創(chuàng)建錨蜘拉，name可以任意命名
<a name="tips">跳轉到目標位置的文字內容</a>
- 創(chuàng)建頁面內鏈接
<a href="#tips">鏈接處的文字內容</a>
- 如果需要從別的頁面跳轉到該頁面位置萨西，鏈接的 href 屬性值：該頁面網(wǎng)址后加井號(#)和錨名稱；
- 如果瀏覽器找不到已定義的錨名稱旭旭，那么就會定位到頁面的頂端谎脯，不會有錯誤發(fā)生。
特別地持寄，設置target="_blank" 時源梭，被鏈接的頁面，將在新的標簽頁中打開稍味；
請始終將正斜杠添加到子文件夾废麻，如：href="http://www.w3school.com.cn/html/"。假如鏈接忽略了最后的正斜杠：href="http://www.w3school.com.cn/html"模庐，會向服務器產生兩次 HTTP 請求烛愧，因為服務器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求掂碱。
HTML 列表
HTML 支持有序怜姿、無序和定義列表。三種不同類型的列表項目顶吮，可以進行各種嵌套社牲；
列表項內部均可以使用段落粪薛、換行符悴了、圖片、鏈接以及其他列表等违寿；
無序列表
- 無序列表是一個項目列表湃交，項目使用粗體圓點進行標記；
- 無序列表使用 <ul> 標簽藤巢，每個列表項使用 <li>搞莺；
- <ul> 標簽的type屬性，可以設置不同類型的無序列表掂咒，為disc表示實心圓點才沧、為circle表示空心圓點迈喉、為square時表示實心方框。
<ul>
<li> python</li>
<li> Java </li>
</ul>
- 有序列表
- 有序列表也是一個項目列表温圆，列表項目使用數(shù)字進行標記挨摸；
- 有序列表使用 <ol> 標簽，每個列表項始于 <li> 標簽岁歉；
- <ol> 標簽得运，默認情況下，序列號為1锅移，2熔掺， 3。其type屬性可以設置不同類型的有序列表非剃，為A時表示大寫英文字母置逻、為a時表示小寫英文字母、為大寫 I 時表示羅馬字母努潘、為小寫 i 時表示小寫羅馬字母诽偷。
<ol>
<li> Window</li>
<li> Mac </li>
</ol>
- 定義列表
- 自定義列表不僅僅是一個項目列表，而是項目及其注釋的組合疯坤；
- 自定義列表以 <dl> 標簽開始报慕，每個自定義列表項以 <dt> 開始，而每個自定義列表項的定義以 <dd> 開始压怠；
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
示例Demo
- 代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<p>這是一個段落</p>
<p>這是另外一個段落</p>
<a >這是一個鏈接</a>
<br><br />
<img src="/Users/******/image1.jpg" width="400" height="300" />
</body>
</html>
-
效果圖
三眠冈、基礎知識
HTML <head> 元素
HTML <head> 元素是所有頭部元素的容器，可包含腳本菌瘫，指示瀏覽器在何處可以找到樣式表蜗顽，提供元信息等；
<title>：定義文檔的標題雨让，在所有 HTML/XHTML 文檔中都是必需的雇盖；
<base>：為頁面上的所有鏈接規(guī)定默認地址或默認目標(target)；
<link>：定義文檔與外部資源之間的關系栖忠；
<meta>：提供關于 HTML 文檔的元數(shù)據(jù)信息崔挖；
<script>：定義客戶端腳本，比如 JavaScript庵寞；
<style>：為 HTML 文檔定義樣式信息狸相。
HTML 顏色名
- 基于HTML 4.0 標準，大多數(shù)瀏覽器支持常用的顏色名捐川；
- 有16種：aqua脓鹃、black、blue古沥、fuchsia瘸右、gray娇跟、green、lime太颤、maroon逞频、navy、olive栋齿、purple苗胀、red、silver瓦堵、teal基协、white、yellow菇用；
- 如果使用其它顏色的話澜驮，可使用十六進制的顏色值。
HTML 文本格式化
HTML 可定義很多供格式化輸出的元素惋鸥，比如粗體和斜體字等杂穷。
| 標簽 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <strong> | 定義加重語氣 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <big> | 定義大號字 |
| <small> | 定義小號字 |
| <sub> | 定義下標字 |
| <sup> | 定義上標字 |
| <code> | 定義計算機代碼 |
| <bdo> | 定義文字方向，反向輸出顯示 |
| <pre> | 定義預格式文本卦绣，保留多個空格或空行 |
| <address> | 定義地址 |
HTML塊
通過標簽 <div> 和 <span>耐量，可以將 HTML 元素組合起來，定義為塊級元素或內聯(lián)元素滤港；
HTML <div> 元素
- HTML <div> 元素是塊級元素廊蜒，是組合其他 HTML 元素的容器，沒有特定的含義溅漾，瀏覽器顯示時山叮，通常會在其前后進行換行；
- 與 CSS 一同使用時添履，<div> 元素用于對大的內容塊設置樣式屬性屁倔；
<div> 元素也常用于文檔布局，它取代了使用表格(<table>元素)定義布局的老式方法暮胧。<table> 元素的主要作用是顯示表格化的數(shù)據(jù)锐借； - 例子：<h1>, <p>, <ul>, <table>
- HTML <span> 元素
- HTML <span> 元素是內聯(lián)元素，可用作文本的容器叔壤，沒有特定的含義瞎饲，瀏覽器顯示時口叙，通常不會進行換行炼绘；
- 當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性妄田；
- 例子：<b>, <td>, <a>, <img>
HTML 框架
- 通過使用框架俺亮，你可以在同一個瀏覽器窗口中顯示不止一個頁面驮捍，并且每個框架都獨立于其他的框架。
- 使用框架的壞處：開發(fā)人員必須同時跟蹤更多的HTML文檔脚曾；很難打印整張頁面东且；
- 框架結構標簽(<frameset>)定義如何將窗口分割為框架，每個frameset 定義了一系列行或列本讥，其rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積珊泳；其子標簽 <frame> 定義了放置在每個框架中的HTML 文檔；
- 如果一個框架有可見邊框拷沸，用戶可以拖動邊框來改變它的大小色查。為了避免這種情況，可以在 <frame> 標簽中加入noresize="noresize"撞芍；
- 特別地秧了，不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！
- HTML <iframe> 標簽序无，用于在網(wǎng)頁內顯示網(wǎng)頁验毡，定義內聯(lián)的子窗口。其常用的4個屬性：src表示嵌入的網(wǎng)頁帝嗡、height表示 iframe 的高度晶通、width 表示 iframe 的寬度、frameborder 表示是否顯示 iframe 邊框哟玷。
HTML CSS
使用 HTML4.0录择，所有的格式化代碼均可移出 HTML 文檔，移入一個獨立的樣式表碗降；
當瀏覽器讀到一個樣式表隘竭，它會按照這個樣式表，對文檔進行格式化讼渊；
外部樣式表：當樣式需要被應用到很多頁面的時候动看，外部樣式表將是理想的選擇。使用外部樣式表爪幻，實現(xiàn)更改一個文件來改變整個站點的外觀菱皆；
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 內部樣式表：當單個文件需要特別樣式時，就可以使用內部樣式表挨稿。在 head 部分通過 <style> 標簽定義內部樣式表仇轻。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 內聯(lián)樣式：當特殊的樣式需要應用到個別元素時，可以使用內聯(lián)樣式奶甘，即在相關的標簽中使用樣式屬性篷店，可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
四疲陕、其它
<!DOCTYPE> 聲明HTML版本方淤，幫助瀏覽器正確地顯示網(wǎng)頁。Web 世界中存在許多不同的文檔蹄殃，只有了解文檔的版本類型携茂，瀏覽器才能正確地顯示文檔，需要注意：<!DOCTYPE> 并不是 HTML 標簽诅岩；
<! -- 注釋內容 -->標簽：在HTML代碼中插入注釋讳苦，增強可讀性。開始括號之后(左邊的括號)需要緊跟一個嘆號吩谦，結束括號之前(右邊的括號)不需要医吊；HTML 中的文件路徑，推薦使用相對路徑逮京。絕對文件路徑是指向一個因特網(wǎng)文件的完整 URL卿堂，相對路徑指向了相對于當前頁面的文件，不會與當前的 URL 進行綁定懒棉，便于后續(xù)更新和維護草描；
HTML <script> 標簽用于定義客戶端腳本，使 HTML 頁面具有更強的動態(tài)和交互性策严，比如 JavaScript穗慕。script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件妻导，必需的 type 屬性逛绵，用來聲明腳本的 MIME 類型。JavaScript 最常用于圖片操作倔韭、表單驗證以及內容動態(tài)更新等术浪。
