標籤：檔案的 部分 目的 3.1 定義 雙引號 開啟檔案 2.3 關閉
一、HTML簡介1.1什麼是HTMLl HTML（HyperText Mark-up Language）即超文字標記語言 (HTML)或超文字標籤語言。
l 何為超文本：“超文本”可以實現頁面內可以包含圖片、連結，甚至音樂、程式等。
l 網頁檔案本身是一種文字檔，它通過標記符號來標記要顯示的網頁中的各個部分。
l 何為標記：當瀏覽器遇到對應的標籤符號時 就實現對應的功能！
l 網頁副檔名：.html 或 .htm
l 超文字標記語言 (HTML)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的資訊，“主體”部分提供網頁的具體內容。
1.2 HTML的發展曆程
l 1993 HTML1
l 1995 HTML2
l 1995 HTML3
l 1997 HTML4
l 1999 HTML4.01
l 2000 XHTML1.0
l 2009 HTML5
l 2014 HTML5 Finalized
二、增強文字編輯器l 任何的純文字編輯器都能夠編輯html，比如記事本、editplus、notepad++。
l 比較有名的編碼器有：
l 不管用什麼編輯器，你都要知道，做網頁和編輯器無關，任何的純文字編輯器都能夠編碼代碼。我們學習的是代碼，而不是所謂的編輯器。不過，不可否認，一個好的編輯器，確實能夠提高工作效率，代碼書寫的速度，但是本質上講，記事本也能書寫網頁。
l sublime的中文意思是“華麗的”，是2011年開始流行的代碼編輯器，可以編輯java、c、php等很多語言。
l html、css、js在sublime中支援非常好。介面也非常漂亮，安裝簡單、小巧、外掛程式多。
使用sublime匯入項目的步驟：
選擇項目選項卡---à添加檔案夾到項目-------à選擇我們的專案檔夾
sublime編輯器的快速鍵
快速鍵 |
功能 |
ctrl+滑鼠的滾輪 |
調整文本的大小 |
ctrl+shift+D |
複製當前行 |
ctrl+shift+k |
刪除當前行 |
ctrl+shift+上箭頭 |
將當前行上移 |
ctrl+shift+下箭頭 |
將當前行下移 |
注意：
我們在使用sublime編輯器的 書寫HTML標籤的時候 只需要寫標籤名就可以 然後按一下鍵盤上面的tab鍵 那麼就會進行自動的補全！
學習目標：
1、瞭解HTML語言和其發展曆程
2、能夠使用sublime編輯器！
三、HTML檔案結構
|
l <html></html>這一對告訴瀏覽器這是一個HTML檔案，在它們之間是文檔的頭部<head>和主體<body>。
l <head></head>標籤出現在文檔的頭部分。<head>與</head>之間的內容不會在瀏覽器的文件視窗顯示，但是其間的標籤有特殊重要的意義
l <body></body>之間的文本是可見的網頁主體內容，body中的標籤包含網頁中的所有內容（比如文本、超連結、映像、表格和列表等等。）
四、標籤分類與書寫規則4.1標籤分類
什麼是屬性？
一個人有什麼屬性？有姓名、有性別、有身高、有體重！
<人 姓名=“張三” 性別=“男” 身高=“183” 體重=“140”>
雙邊標籤：
有開始有結束
如：<h1>內容</h1>
單邊標籤：
有開始但是沒有結束 它一般都是用來起到一些特殊的作用
比如：<br> 換行 <hr>水平線
4.2書寫規則l 標籤與標籤之間的嵌套只能使用順序嵌套 不能交叉嵌套
l 標籤可以有若干個屬性，也可以不帶屬性。如<head>標籤就不帶任何屬性
五、body標籤的屬性
說明：標籤、標記、元素、節點這四個名詞它們指的是同一個東西！
屬性名稱 |
功能 |
background |
用於給網頁設定背景圖片 |
bgcolor |
用於給網頁設定背景顏色 |
六、文本修飾標籤
標籤名 |
功能 |
<b></b> |
給文本設定加粗的效果 |
<i></i> |
給文本設定斜體的效果 |
<u></u> |
給文本設定底線 |
<s></s> |
給文本設定刪除線 |
<sup></sup> |
上標 |
<sub></sub> |
下標 |
<font></font> 屬性： size：給文本設定大小 取值:1~7 1小7大 color：給文本設定顏色 比如：red face：給文本設定字型 比如：宋體 |
給文本設定大小 顏色 字型 |
文本修飾執行個體：
七、排版標籤
標籤名 |
功能 |
<p></p> 屬性： align：用於控制段落裡面的內容的水平方向的對齊 取值：left 居靠左對齊 預設值 center 置中對齊 right 居靠右對齊 |
段落標籤 |
<h1></h1>~<h6></h6> 1大6小 h1最大 h6最小 align：用於控制標題裡面的內容的水平方向的對齊 取值：left 居靠左對齊 預設值 center 置中對齊 right 居靠右對齊 |
標題標籤 |
<br /> |
換列標籤 這個標籤是我們學的第一個單邊標籤 |
<hr /> color：用於設定水平線的顏色 width：用於設定水平線的寬度 取值：固定值和百分比 固定值的單位像素 百分比它一定是有一個參照物 它會參照當前hr標籤的父元素 size：用於設定水平線的粗細 noshade：用於去除水平線的陰影 這個屬性它沒有值 它的屬性值就等於其自身 noshade align：用於控制水平線的水平對齊 取值：left 居靠左對齊 center 置中對齊 預設值 right 居靠右對齊 |
水平線標籤 |
<pre></pre> |
預格式化處理標籤 在這一對標籤裡面的空格與換行會保留 |
八、注釋
為什麼要寫注釋？
l 比如:方便項目組裡的其它程式員瞭解你的代碼,而且可以方便以後你對自己代碼的理解與修改等等。
l 可以在HTML文檔中加入自己的注釋。注釋不會顯示在頁面中，它可以用來提醒程式員回憶相關的程式資訊。
注釋的格式：
<!—注釋的內容-->
九、div與span標籤
標籤名 |
功能 |
<div></div> |
<div>是一個塊級標籤，並無實際的意義。主要通過CSS樣式為其賦予不同的表現. |
<span></span> |
<span>是一個行內標籤,並無實際的意義,主要通過CSS樣式為其賦予不同的表現. |
塊級標籤與行內標籤的區別
1） 區塊層級元素
● 霸佔一行，不能與其他任何元素並列
● 能接受寬、高
● 如果不設定寬度，那麼寬度將預設變為其父元素的100%。
2） 行內元素
● 與其他行內元素並排
● 不能設定寬、高。預設的寬度，就是內容的寬度。
區塊層級元素：p、h1~h6 排版標籤一般都是屬於區塊層級元素
行內元素：b、i、u、font、sup、sub 文本修飾標籤一般都是屬於行內元素
十、字元實體
為什麼要有字元實體？
在 HTML 中，某些字元是預留的。
在 HTML 中不能使用小於符號（<）和大於符號（>），這是因為瀏覽器會誤認為它們是標籤。
如果希望正確地顯示預留字元，我們必須在 HTML 原始碼中使用字元實體
空格 |
|
> |
> |
< |
< |
& |
& |
￥ |
¥ |
著作權 |
© |
註冊 |
® |
× |
× |
÷ |
÷ |
十一、圖片標籤11.1能夠使用的圖片類型
能夠在HTML網頁中使用的圖片類型：jpg(jpeg)、png、gif、bmp
不能在HTML網頁中使用的圖片類型：psd、ai
11.2文法
|
img：是英文中“image”簡寫 圖片
src：是英文中“source”簡寫 資源
11.3 alt屬性
alt它是英文“alternate”的簡寫 替代 如果當圖片不存在了 就顯示alt這個屬性中的文字資訊！
注意：
img是一個單邊標籤 單邊標籤也是需要關閉的！
11.4其它屬性
屬性名稱 |
功能 |
title |
當把滑鼠放在圖片上面時 顯示的文字資訊 |
width |
給圖片設定寬度 |
height |
給圖片設定高度 |
注意：
最好不要給圖片同時設定寬度與高度！因為它會將圖片給變形！
十二、檔案地址12.1什麼叫檔案地址？用於描述，一個檔案在磁碟上的位置
位置：相對路徑和絕對路徑
12.2絕對路徑
一個檔案在磁碟上面的真實位置！
以windows作業系統為例：絕對路徑都是帶盤符的位置！
C:\Users\windows\Desktop\01-HTML5\代碼\baby.jpg 絕對路徑
12.3相對路徑
相對於當前位置的某個檔案的位置
平級關係 目標檔案與當前檔案是在同一個目錄下面
./檔案名稱 平級關係
直接寫檔案名稱 平級關係
上級關係 目標檔案在當前檔案的上一級目錄下面
../ 上級關係 上一級
../../ 上二級
十三、超級連結13.1什麼是超級連結
一個網站，它是由很多個HTML網頁組成的，HTML網頁之間是可以通過超級連結來實現相互跳轉的功能！從而就形成了“網”！
13.2基本用法
|
代碼：
：
a它是英文中“anchor”簡寫 中文意思“錨” 就好像是從一個網頁上面往另外一個網頁上面扔出一個“錨”！
href：它們是英文中“hypertext reference ” 中文意思“超級連結地址”。
13.3a標籤另外的屬性
title 標籤 當把滑鼠放上超級連結上面顯示的文本資訊
target：連結的目標檔案開啟檔案
_blank 在新視窗中開啟連結的目標檔案
13.4 空連結
13.5 錨點連結
可以通過錨點連結跳轉到一個網頁的不同的位置！
如何?錨點連結？
第一步：定義一個錨點
<a name=”錨點名”></a>
或者
<a id=” 錨點名”></a>
第二步：找到錨點
在瀏覽器中的網址的最後面#錨點名
或者
<a href=”#錨點名”>內容</a>
注意：
在找錨點的時候 不要忘記了有一個#號
html簡介
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
