什么是 HTML？
HTML是用來描述網(wǎng)頁的一種語言。
- HTML是超文本標(biāo)記
- HTML不是編程語言，而是一種語言標(biāo)記
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽
- HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML標(biāo)簽
- HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞，例如<html>
- HTML標(biāo)簽通常是成對出現(xiàn)，例如<b>和</b>
- 標(biāo)簽對中第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽
HTML文檔 = 網(wǎng)頁
- HTML文檔描述網(wǎng)頁
- HTML文檔包含HTML標(biāo)簽和純文本
- HTML文檔也被稱為網(wǎng)頁
HTML標(biāo)簽
- HTML標(biāo)題標(biāo)簽：<h1>-<h6>
- 例子：<h1>這是第一個主題</h1>
- 整個HTML文檔標(biāo)簽：<html>
- 例子：<html> </html>
- HTML文檔的主體標(biāo)簽：<body>
- 例子：<body> </body>
- HTML段落標(biāo)簽：<p>
- 例子：<p>這是段落</p>
- HTML鏈接標(biāo)簽：<a>
- 例子：<a >這是一個鏈接</a>
- HTML圖像標(biāo)簽：<img>
- 例子：
HTML元素語法
- HTML元素以開始標(biāo)簽起始
- HTML元素以結(jié)束標(biāo)簽終止
- 元素內(nèi)容是在開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容
- 大多數(shù)HTML元素?fù)碛袑傩?/li>
- 大多數(shù)HTML源于可以嵌套
<html>
<body>
<p> 這是我的第一個HTML</p>
</body>
</html>
元素定位
- 元素id屬性
- 元素類屬性
- 元素樹狀索引
- 標(biāo)簽遍歷
HTML屬性
- HTML標(biāo)簽可以擁有屬性，屬性可以提供HTML元素更多的信息
- 屬性總是以名稱/值對的形式出現(xiàn)，例如：name = "value"
- 屬性總是在HTML元素的開始標(biāo)簽中規(guī)定。
- 屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號最常用，也可以用單引號
- 適用于大多數(shù)HTML元素的屬性：
屬性 ---------- 值 ------------------ 描述
class classname 規(guī)定元素的類名
id id 規(guī)定元素的唯一id
style style_definition 規(guī)定元素的行內(nèi)樣式
title text 規(guī)定元素的額外信息
HTML水平線
標(biāo)簽在HTML頁面中創(chuàng)建水平線，hr元素可用于分隔內(nèi)容
HTML 注釋
HTML段落
段落通過<p>標(biāo)簽定義。
在段落內(nèi)換行使用
HTM文本格式化
文本格式化標(biāo)簽
標(biāo)簽 描述
<b> 定義粗體文本
<big> 定義大號字
<em> 定義著重文字
<i> 定義斜體字
<small> 定義小號字
<strong> 定義加重語氣
<sub> 定義下標(biāo)字
<sup> 定義上標(biāo)字
<ins> 定義插入字
<del> 定義刪除字
計算機(jī)輸出標(biāo)簽
<code> 定義計算機(jī)代碼
<kbd> 定義鍵盤碼
<samp> 定義計算機(jī)代碼樣本
<tt> 定義打字機(jī)代碼
<var> 定義變量
<pre> 定義預(yù)格式化文本
引用和術(shù)語定義
<abbr> 定義縮寫
<acronym> 定義首字母縮寫
<address> 定義地址
<bdo> 定義文字方向
<blockquote> 定義長的引用
<q> 定義短的引用
<cite> 定義引用、引證
<dfn> 定義一個定義項(xiàng)目
樣式
<style> 定義樣式定義
<link> 定義資源引用
<div> 定義文檔中的節(jié)或區(qū)域
<span> 定義文檔中的行內(nèi)的小塊或區(qū)域
實(shí)例
- HTML中的樣式
<html>
<head>
<style type = "text/css">
h1 {color:red}
p {color:blue}
</style>
<body>
<h1> header 1</h1>
<p>A paragraph.</p>
</body>
</html>
HTML CCS
三種樣式表：
- 外部樣式表：當(dāng)樣式被應(yīng)用到多個頁面時，使用外部樣式表，修改一個文件就可以改變整個站點(diǎn)。
- 內(nèi)部樣式表：當(dāng)需要修改單個文件時，可以使用內(nèi)部樣式表
- 內(nèi)聯(lián)樣式：當(dāng)特別的樣式需要應(yīng)用到個別元素時，可以使用內(nèi)聯(lián)樣式。
HTML鏈接
HTML超鏈接：可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的內(nèi)容?？梢允褂?lt;a>標(biāo)簽在HTML中創(chuàng)建鏈接。（a=anchor）
兩種使用<a>標(biāo)簽的方式：
- 通過使用href屬性——創(chuàng)建指向另一個文檔的鏈接。
- 通過使用name屬性——創(chuàng)建文檔內(nèi)的書簽。
HTML鏈接語法：
<a href = "url">Link test</a>
href屬性規(guī)定鏈接的目標(biāo)，開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級鏈接顯示。
HTML鏈接——target屬性：
使用target屬性可以定義被鏈接的文檔在何處顯示。
<a target="_blank"> Visit W3School</a>
HTML鏈接——name屬性：
- name屬性規(guī)定anchor的名稱。
- 使用name屬性創(chuàng)建HTML頁面中的書簽，書簽不會以任何特殊方式顯示，它對讀者是不可見的。
- 當(dāng)使用命名錨（name anchors）時，我們可以創(chuàng)建直接跳至該命名錨的鏈接，這樣使用者就不用不停的滾動鼠標(biāo)尋找他們需要的信息。
- 使用id屬性代替name屬性，命名錨同樣有效。
- 命名錨的語法：
<a name="lable">錨（顯示在頁面上的文本）</a>
首先進(jìn)行錨命名（創(chuàng)建一個書簽）：
> <a name="tips">基本的注意事項(xiàng)</a>
然后在同一個文檔中創(chuàng)建指向該錨的鏈接：
> <a href="#tips">有用的提示</a>
也可以在其他頁面中創(chuàng)建指向該錨的鏈接：
> <a >有用的提示</a>
HTML圖像
**圖像標(biāo)簽（<img>）和源屬性（src）**：
- 在HTML中，圖像由<img>標(biāo)簽定義
- <img>是空標(biāo)簽，只包含屬性，沒有閉合標(biāo)簽
- 要在頁面中顯示圖像，需要使用源屬性（src）。src指"source“。源屬性的值是圖像的URL地址
- 定義圖像的語法：
> ""
- 替換屬性（Alt）：<img src="" alt="Big Boat">
HTML表格
- 表格由<table>標(biāo)簽定義。
- 每個表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）
- 字母td指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格包含文本、圖片、列表、段落、表單、水平線、表格等等。
- 表格的表頭使用<th>標(biāo)簽定義
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 1</td>
</tr>
<tr>
<td>row 2, cell 2</td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML 列表
- HTML列表分為無序列表和有序列表
- 無序列表使用標(biāo)簽<ul>和<li>
> <ul>
> <li> Coffee</li>
> <li>Milk</li>
> </ul>
- 有序列表使用標(biāo)簽<ol>和<li>
> <ol>
> <li> Coffee</li>
> <li>Milk</li>
> </ol>
HTML <div>和<span>
- 大多數(shù)HTML元素被定義為塊級元素和內(nèi)聯(lián)元素。
- 塊級元素通常以新行開始：<h1>, <p>, <ul>, <table>
- 內(nèi)聯(lián)元素通常不會以新行開始：<b>, <td>, <a>, <img>
- <div>元素是塊級元素，它能夠用作其他HTML元素的容器，設(shè)置<div>元素的類，使我們能夠?yàn)橄嗤?lt;div>元素設(shè)置相同的類。
- <span>元素時內(nèi)聯(lián)元素。
HTML框架
- 通過使用框架，可以在同一個瀏覽器窗口中顯示不止一個頁面。
- 使用框架的壞處：
- 開發(fā)人員必須同時跟蹤更多的HTML文檔
- 很難打印整張頁面
- 框架標(biāo)簽<frameset>，rows/columns規(guī)定每行或每列占據(jù)屏幕的面積
chrome開發(fā)者工具
-
Element
- 頁面加載的文章文檔信息
- 所有的內(nèi)容元素：樣式、腳本、圖像、音樂、文檔內(nèi)容等
- 選擇標(biāo)簽元素會顯示完成的元素標(biāo)簽路徑
-
console
- 查看頁面加載過程中的消息，包括告警、錯誤及輸出等
- 執(zhí)行自定義的js操作
- 開發(fā)調(diào)試
-
source
- 頁面文檔所引用的資源
-
network
- 頁面加載過程中所有涉及到的資源
