[HTML/CSS] 線上課程筆記(3-12~3-15)

 7/2 

3-13 Emmet 載入環境語法

每一次都需要輸入標籤,有沒有比較便捷的小工具呢 ?
單元介紹Emmet

Emmet近期的編輯器中皆有預設了,原因無他就是使用者愛用~
(先前使用過其他編輯器需要手動安裝的~現在的編輯器好先進)


使用方式 : 輸入一下驚嘆號 「 !」+Enter或是Tab鍵






解釋一下意思






網頁格式UTF-8編碼
配合舊版IE進行設計
手機版、平板響應式版本、調整螢幕解析度


使用方式:生成兩個段落的標籤:p*2














7/2、7/8

3-14 插入圖片,了解圖片路徑規則

網頁檔含有所有資料與圖檔皆可放在同一個資料夾內

介紹
<img src="img/logo.png" alt="六角logo">





src="檔案路徑"、alt="圖片的顯示名稱"
alt為替代的播報工具

src="img/logo.png"
表示圖片於img資料夾項下內(本地端下載)

路徑放錯了可是會影響圖片的呈現唷
可能變成破圖 ~

3-15 載入外部圖片方式

當不想下載圖片到本地端(自己的電腦上)時又該怎麼辦呢 ?

於想要連結的網頁圖片上
複製圖片位址
可適用別人伺服器上的圖片位置

標籤使用方式相同

<img src=" " alt=" ">
^ ^
複製好的圖片位址 破圖時要顯示的說明文字







留言

這個網誌中的熱門文章

[ 練習傳達 ] 歷史

[HTML/CSS] 線上課程筆記(3-8~3-11)