View
669
Download
3
Category
Preview:
Citation preview
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>Document</title>
</head><body>
</body></html>
宣告HTML的版本
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>Document</title>
</head><body>
</body></html>
HTML⽂文件的開始
HTML⽂文件的結束
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>Document</title>
</head><body>
</body></html>
描述HTML⽂文件的資訊
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>Document</title>
</head><body>
</body></html>
放置HTML⽂文件的內容
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>Document</title>
</head><body>
</body></html>
HTML的註解⽂文字<!-- 我是註解 -->
圖⽚片來源
有利於SEO
維護較容易
使⽤用語意化的Tag
減少外掛程式
優點
缺點
瀏覽器⽀支援問題
搭載網頁核心的基本架構
LESSON 3
1. HTML 的基礎
2. HTML 5 語意化標籤
3. HTML 範例教學
Link<a href="要連結的 URL 放這裡" target="連結⺫⽬目標" title="連結替代⽂文字">要顯⽰示的連結⽂文字或圖⽚片放這裡</a>
<a> 連結標籤
新增⼀一個外部連結的按鈕
解答
使⽤用 href , target屬性
img<img> 圖⽚片標籤
<img src="圖檔路徑" alt="圖⽚片替代⽂文字" height="圖⽚片⾼高度" width="圖⽚片寬度">
新增選單
解答
使⽤用 li 標籤,新增Link 2~4選單
新增選單及內容
解答
使⽤用 li ,a,div,h2,span標籤,新增選單
3. 使⽤用target 屬性,設定more...為外部連結
新增選單與修改⽂文章
解答
1. 使⽤用 li 標籤,新增About選單
2. 使⽤用src 屬性,設定圖⽚片路徑為http://goo.gl/75xqno
Recommended