什么是 HTML九妈？
HTML是用來描述網(wǎng)頁的一種語言丽蝎。
- HTML是超文本標記
- HTML不是編程語言猎拨，而是一種語言標記
- 標記語言是一套標記標簽
- HTML使用標記標簽來描述網(wǎng)頁
HTML標簽
- HTML標簽是由尖括號包圍的關(guān)鍵詞，例如<html>
- HTML標簽通常是成對出現(xiàn)屠阻，例如<b>和</b>
- 標簽對中第一個標簽是開始標簽红省，第二個標簽是結(jié)束標簽
HTML文檔 = 網(wǎng)頁
- HTML文檔描述網(wǎng)頁
- HTML文檔包含HTML標簽和純文本
- HTML文檔也被稱為網(wǎng)頁
HTML標簽
- HTML標題標簽：<h1>-<h6>
- 例子：<h1>這是第一個主題</h1>
- 整個HTML文檔標簽：<html>
- 例子：<html> </html>
- HTML文檔的主體標簽：<body>
- 例子：<body> </body>
- HTML段落標簽：<p>
- 例子：<p>這是段落</p>
- HTML鏈接標簽：<a>
- 例子：<a >這是一個鏈接</a>
- HTML圖像標簽：<img>
- 例子：
HTML元素語法
- HTML元素以開始標簽起始
- HTML元素以結(jié)束標簽終止
- 元素內(nèi)容是在開始標簽和結(jié)束標簽之間的內(nèi)容
- 大多數(shù)HTML元素擁有屬性
- 大多數(shù)HTML源于可以嵌套
<html>
<body>
<p> 這是我的第一個HTML</p>
</body>
</html>
元素定位
- 元素id屬性
- 元素類屬性
- 元素樹狀索引
- 標簽遍歷
HTML屬性
- HTML標簽可以擁有屬性，屬性可以提供HTML元素更多的信息
- 屬性總是以名稱/值對的形式出現(xiàn)国觉，例如：name = "value"
- 屬性總是在HTML元素的開始標簽中規(guī)定吧恃。
- 屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號最常用麻诀，也可以用單引號
- 適用于大多數(shù)HTML元素的屬性：
屬性 ---------- 值 ------------------ 描述
class classname 規(guī)定元素的類名
id id 規(guī)定元素的唯一id
style style_definition 規(guī)定元素的行內(nèi)樣式
title text 規(guī)定元素的額外信息
HTML水平線
標簽在HTML頁面中創(chuàng)建水平線痕寓，hr元素可用于分隔內(nèi)容
HTML 注釋
HTML段落
段落通過<p>標簽定義缸逃。
在段落內(nèi)換行使用
HTM文本格式化
文本格式化標簽
標簽 描述
<b> 定義粗體文本
<big> 定義大號字
<em> 定義著重文字
<i> 定義斜體字
<small> 定義小號字
<strong> 定義加重語氣
<sub> 定義下標字
<sup> 定義上標字
<ins> 定義插入字
<del> 定義刪除字
計算機輸出標簽
<code> 定義計算機代碼
<kbd> 定義鍵盤碼
<samp> 定義計算機代碼樣本
<tt> 定義打字機代碼
<var> 定義變量
<pre> 定義預(yù)格式化文本
引用和術(shù)語定義
<abbr> 定義縮寫
<acronym> 定義首字母縮寫
<address> 定義地址
<bdo> 定義文字方向
<blockquote> 定義長的引用
<q> 定義短的引用
<cite> 定義引用、引證
<dfn> 定義一個定義項目
樣式
<style> 定義樣式定義
<link> 定義資源引用
<div> 定義文檔中的節(jié)或區(qū)域
<span> 定義文檔中的行內(nèi)的小塊或區(qū)域
實例
- 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
三種樣式表：
- 外部樣式表：當樣式被應(yīng)用到多個頁面時厂抽，使用外部樣式表需频，修改一個文件就可以改變整個站點。
- 內(nèi)部樣式表：當需要修改單個文件時筷凤，可以使用內(nèi)部樣式表
- 內(nèi)聯(lián)樣式：當特別的樣式需要應(yīng)用到個別元素時昭殉，可以使用內(nèi)聯(lián)樣式。
HTML鏈接
HTML超鏈接：可以是一個字藐守，一個詞挪丢，或者一組詞，也可以是一幅圖像卢厂，可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的內(nèi)容乾蓬。可以使用<a>標簽在HTML中創(chuàng)建鏈接慎恒。（a=anchor）
兩種使用<a>標簽的方式：
- 通過使用href屬性——創(chuàng)建指向另一個文檔的鏈接任内。
- 通過使用name屬性——創(chuàng)建文檔內(nèi)的書簽。
HTML鏈接語法：
<a href = "url">Link test</a>
href屬性規(guī)定鏈接的目標融柬，開始標簽和結(jié)束標簽之間的文字被作為超級鏈接顯示死嗦。
HTML鏈接——target屬性：
使用target屬性可以定義被鏈接的文檔在何處顯示。
<a target="_blank"> Visit W3School</a>
HTML鏈接——name屬性：
- name屬性規(guī)定anchor的名稱粒氧。
- 使用name屬性創(chuàng)建HTML頁面中的書簽越除，書簽不會以任何特殊方式顯示，它對讀者是不可見的外盯。
- 當使用命名錨（name anchors）時摘盆，我們可以創(chuàng)建直接跳至該命名錨的鏈接，這樣使用者就不用不停的滾動鼠標尋找他們需要的信息饱苟。
- 使用id屬性代替name屬性孩擂，命名錨同樣有效。
- 命名錨的語法：
<a name="lable">錨（顯示在頁面上的文本）</a>
首先進行錨命名（創(chuàng)建一個書簽）：
> <a name="tips">基本的注意事項</a>
然后在同一個文檔中創(chuàng)建指向該錨的鏈接：
> <a href="#tips">有用的提示</a>
也可以在其他頁面中創(chuàng)建指向該錨的鏈接：
> <a >有用的提示</a>
HTML圖像
**圖像標簽（<img>）和源屬性（src）**：
- 在HTML中掷空，圖像由<img>標簽定義
- <img>是空標簽肋殴，只包含屬性，沒有閉合標簽
- 要在頁面中顯示圖像坦弟，需要使用源屬性（src）护锤。src指"source“。源屬性的值是圖像的URL地址
- 定義圖像的語法：
> ""
- 替換屬性（Alt）：<img src="" alt="Big Boat">
HTML表格
- 表格由<table>標簽定義酿傍。
- 每個表格均有若干行（由<tr>標簽定義）烙懦，每行被分割為若干單元格（由<td>標簽定義）
- 字母td指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容赤炒。數(shù)據(jù)單元格包含文本氯析、圖片亏较、列表、段落掩缓、表單雪情、水平線、表格等等你辣。
- 表格的表頭使用<th>標簽定義
<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列表分為無序列表和有序列表
- 無序列表使用標簽<ul>和<li>
> <ul>
> <li> Coffee</li>
> <li>Milk</li>
> </ul>
- 有序列表使用標簽<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>元素的類宴凉，使我們能夠為相同的<div>元素設(shè)置相同的類。
- <span>元素時內(nèi)聯(lián)元素表悬。
HTML框架
- 通過使用框架弥锄，可以在同一個瀏覽器窗口中顯示不止一個頁面。
- 使用框架的壞處：
- 開發(fā)人員必須同時跟蹤更多的HTML文檔
- 很難打印整張頁面
- 框架標簽<frameset>蟆沫，rows/columns規(guī)定每行或每列占據(jù)屏幕的面積
chrome開發(fā)者工具
-
Element
- 頁面加載的文章文檔信息
- 所有的內(nèi)容元素：樣式籽暇、腳本、圖像饥追、音樂图仓、文檔內(nèi)容等
- 選擇標簽元素會顯示完成的元素標簽路徑
-
console
- 查看頁面加載過程中的消息，包括告警但绕、錯誤及輸出等
- 執(zhí)行自定義的js操作
- 開發(fā)調(diào)試
-
source
- 頁面文檔所引用的資源
-
network
- 頁面加載過程中所有涉及到的資源
