前端--------瞭解HTML
瞭解HTML
1. 瞭解HTML
我們可以通過檢視原始碼的形式, 看到製作出來的網頁
通過仔細觀察網頁原始碼我們可以知道: 製作網頁的語言是用 “<” “>” 括起來的. 有些是成對出現,有些不是 -----> 我們一般稱這樣用尖括號括起來的語言為 HTML
HTML 是 Hyper Text Markup Language 的首字母簡寫, 意思是超文字標記語言, 超文字指的是超連結, 標記指的是標籤, 是一種用來製作網頁的語言, 這種語言由一個個的標籤組成, 用這種語言製作的檔案儲存的是一個文字檔案, 檔案的副檔名為 .html 或者 .htm
- HTML文件的基本結構
html檔案的基本結構為:
<!DOCTYPE html> <!--html的文件宣告,聲明當前html文件的版本-->
<html> <!--根標籤: html開始標籤 -->
<head> <!--html標籤中的第一個子標籤: head開始標籤-->
<meta charset="UTF-8"> <!--單個標籤meta: 主要用於當前文件設定, 這裡設定的是文件的編碼格式 utf-8--> 注意:
html語言中註釋的寫法:
- 快捷鍵: ctrl + /
- 取消註釋: ctrl + /
說明:
- 基本上所有的html檔案都是按照這樣的格式作為模板進行開發.
- head標籤的主要作用:
- 網頁的設定
- 資源的引用
- head標籤中的內容一般不會顯示在網頁上.
- body中的內容通常用於網頁顯示
3. 快速建立HTML文件
我們可以新建一個.html檔案, 在檔案中快速建立基本標籤:
快速建立的方法是: 在檔案中敲一個 " ! " 然後按 tab 鍵 即可:
4. HTML標籤
- 成對的標籤:
<ul> <li> <a></a></li> <li>單個的標籤: <hr/> <img/></li> </ul>
標籤的分類
注意: 在前端中, 元素指的就是標籤, 所以我們有時候說: xx元素, 即指的是 xx標籤
標籤按照顯示的不同, 可以分為兩類:
- 塊元素 (行元素)
- 內聯元素 (行內元素)
塊元素的特點:
- 單個塊元素在瀏覽器中預設獨佔一行
- 兩個塊元素不能夠在一行顯示, 他們會自動換成兩行顯示
- 塊元素可以設定寬高等屬性.
內聯元素:
- 多個內聯元素可以在一行顯示
- 內聯元素不能夠設定寬高, 設定了也沒有用, 不會顯示出效果
- 內聯元素的寬高由他們本身的內容多少來支撐, 內容多,寬高自動增加.
常用的塊元素標籤:
- 標題標籤
表示文件的標題, 除了具有塊元素基本特徵之外, 還含有預設的外邊距和字型大小
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
2.段落標籤:
表示文件中的一個文欄位落, 除了具有塊元素基本特徵, 還含有預設的外邊距
<p>
既然你誠心誠意的問了，
我們就大發慈悲的告訴你！
為了防止世界被破壞，
為了守護世界的和平；
貫徹愛與真實的邪惡，
可愛又迷人的反派角色~~
武藏！
小次郎！
我們是穿梭在銀河的火箭隊！白洞，白色的明天在等著我們！！
就是這樣~喵~~~~
</p>
段落標籤中如果想要強制換行,需要使用
標籤, 這個標籤是個單個標籤,所以只有一個.
另外在html中, 如果想要寫大於號, 小於號, 或者空格等, 需要使用程式碼來實現, 這樣更加優雅~
程式碼實現大於號: >
程式碼實現小於號: <
程式碼實現空格:
- 通用塊容器標籤 div
表示文件中一塊內容, 具 有塊元素基本特性, 沒有其他預設樣式
<div>這是一個div元素</div>
<div>這是第二個div元素</div>
<div>
<h3>自我介紹</h3>
<p>
姑娘貌美一枝花，才學素養人品佳。
活潑開朗不八卦，頭腦敏銳有想法。
踏實奮進不做假，樂於求知肯深挖。
舞文弄墨擅策劃，慧心妙舌喜表達。
交友廣泛愛分享，微博日日落不下。
四年深造象牙塔，學習實踐兩手抓。
只待應屆招聘季，我花開後百花殺。
</p>
</div>
常用內聯元素標籤
1.超連結標籤 a
連結到另外一個網頁, 具有內聯元素基本特徵, 預設文字藍色, 有下劃線
<a href="02.html">第二個網頁</a>
<a href="http://www.baidu.com">百度網站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">預設連結</a>
<a href="http://www.itcast.cn">原來的視窗開啟介面</a>
<a href="www.baidu.com" target="_blank">新視窗開啟介面</a>
說明:
-
a 標籤的 href 屬性可以新增 # 號, 這個是預設連結地址:
-
不確定地址時, 我們可以臨時使用 # 來佔位,確定後替換即可
-
如果想要跳轉到當前頁面的最上方時, 可以使用 #
-
a 標籤有 target 屬性
- 如果不設定該屬性, 在當前頁面開啟新頁面
- 如果設定該屬性, 則會在新視窗中開啟新頁面
2.通用內聯容器標籤 span
具有內聯元素基本特性, 沒有其他預設樣式
我們一般在文欄位落的中間部分強調某一部分的時候呼叫span,新增樣式,從而改變強調的部分的樣式:
例如: 這是一段文字,其中梅總需要強調,所以我們可以使用span來完成強調的操作.
<p>這是一個段落文字, 段落文字中有<span>特殊標誌或者樣式</span>的文字</p>
- 圖片標籤 img
在網頁中插入圖片, 具有內聯元素基本特性, 但是它支援寬高設定
<img src="images/pic.png" alt="圖片">
說明:
- src屬性主要是新增要展示的圖片地址
- alt屬性的作用:
- 圖片載入失敗時, 顯示的提示資訊
- 搜尋引擎在收錄圖片時, 根據這個屬性值來收錄圖片
- 製作無障礙網頁, 方便盲人的讀屏軟體讀取.
特殊的一些標籤:
空格: 在html中, 空格一般會用: 表示
回車: 在html中回車換行一般用<br>表示
小於號( < ): 在html中一般用<表示
大於號( > ): 在html中一般用>表示
刪除標籤: del 或者 ( s )
傾斜標籤: em 或者 ( i )
下劃線標籤: ins 或者 ( u )
字型變粗: strong 或者 b
總結:
- HTML 整體是由標籤組成的, 各個標籤的功能很多都是重複的
- 同學們學習標籤用法的時候多多練習即可
- 標籤整體分為: 塊級標籤 和 行內標籤
- 塊級標籤可以設定寬高值, 獨佔一行
- 行內標籤自動設定寬高值, 一行內可以有多個
- 一般來說, 塊級元素可以包含行內元素,行內元素不能包含塊級元素.
- 特殊情況, 需要記住: p 標籤不能巢狀 div
- a 標籤用於跳轉(超連結) [跳轉網頁, 跳轉頁面, 跳轉檔案等]
- 標題標籤用於設定標題, 共有6級
- div就是一個無色透明的容器,看不見,摸不到
- img標籤主要用於設定圖片
- p 標籤就是paragraph(段落) 通常用於包裹段落
- span是一個行內元素通常用於p標籤內部,個別文字設定時使用.