目錄
HTML概述
1.HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
2.HTML標籤
- HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如 <b> 和 </b> 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤 開始和結束標籤也被稱爲開放標籤和閉合標籤
3.HTML文檔
- HTML 文檔 = 網頁
- HTML 文檔描述網頁
- HTML 文檔包含 HTML 標籤和純文本
- HTML 文檔也被稱爲網頁
- 誰來解析並顯示HTML文檔？瀏覽器，瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容
4.Web瀏覽器有哪些？
- IE
- Chrome（360極速、世界之窗、QQ瀏覽器、傲遊、UC……)
- Opera
- FireFox
- Safari
5.瀏覽器解析原則
- 瀏覽器認識的標籤就解析爲對應的網頁效果
- 瀏覽器不認識的標籤直接忽略
- <input>
- <table>
HTML基本結構
1.HTML網頁的基本結構
- <html>與</html>，HTML文檔根標記
- <head>與</head>，定義文檔的各種屬性和信息
- <body>與</body> ，定義HTML可見的頁面內容
2.HTML 標籤語法
- HTML 標籤以開始標籤起始
- HTML 標籤以結束標籤終止
- 元素的內容是開始標籤與結束標籤之間的內容
- 某些 HTML 標籤具有空內容（empty content）
- 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
- 大多數 HTML 標籤可擁有屬性
- HTML標籤對大小寫不敏感：<P> 等同於 <p>
3.HTML元素結構
A.<標籤名 屬性名="屬性值">標籤體</標籤名>
- 可以有0個、1個或多個屬性，始終爲屬性值加引號
- 可以沒有標籤體，沒有標籤體時可簡寫成<標籤名 屬性名="屬性值"/>
- 比如：，<body bgcolor="red"></body>
- 標籤屬性可查閱幫助文檔
B.常用屬性
|
屬性 |
值 |
描述 |
|
class |
classname |
規定元素的類名（classname） |
|
id |
id |
規定元素的唯一 id |
|
style |
style_definition |
規定元素的行內樣式（inline style） |
|
title |
text |
規定元素的額外信息（可在工具提示中顯示） |
HTML簡單標記
簡單標籤
1. <h1> - <h6>
- <h1> 定義最大的標題。
- <h6> 定義最小的標題。
- 瀏覽器會自動地在標題的前後添加空行。
- 標題很重要,搜索引擎使用標題爲您的網頁的結構和內容編制索引。
因爲用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。
應該將 h1 用作主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。
2.<hr/>
水平線 hr 元素可用於分隔內容。
- 水平分隔線（horizontal rule）
- 可以在視覺上將文檔分隔成各個部分
3.<p>
段落
- <p> 是塊級元素，
- 瀏覽器會自動地在段落的前後添加空行。
4.<br/>
換行
- 如果希望在不產生一個新段落的情況下進行換行（新行），
- 使用 <br /> 標籤 <br /> 元素是一個空的 HTML 元素
5.<a>
- HTML 使用超級鏈接與網絡上的另一個文檔相連。 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像
- 通過使用 <a> 標籤在 HTML 中創建鏈接
- 有兩種使用 <a> 標籤的方式： 通過使用 href 屬性 - 創建指向另一個文檔的鏈接 通過使用 name 屬性 - 創建文檔內的書籤
<a>語法：
- <a href="url">Link text</a>， href 屬性規定鏈接的目標。 開始標籤和結束標籤之間的文字被作爲超級鏈接來顯示。 示例： <a href="http://www.baidu.com/">Visit Baidu</a>
- 其他屬性， target：打開新頁面 ，name：在頁面中定義錨點名稱， title：提示信息
- target： target="_blank"， 示例 ：<a href="http://www.baidu.com/" target="_blank">Baidu</a>
- 定位到本頁面某個地方，在定位處先定位錨點 ：<a name="C4">Chapter 4</a></h2> 。通過href屬性跳轉到錨點處： <a href="#C4">查看 Chapter 4</a>
6.<img>
- 顯示圖像
- <img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
- src屬性用於指定圖像
<img>常用屬性
- src 圖片
- alt 圖片不存在時，用文字代替
- width 圖片寬度
- height 圖片高度
- border 圖片邊框粗細