Embed Size (px)
Citation preview
搭載網頁核心的基本架構
LESSON 3
搭載網頁核心的基本架構
LESSON 3
1. HTML 的基礎
2. HTML 5 語意化標籤
3. 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⽂文件的開始
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的註解⽂文字<!-- 我是註解 -->
HTML 標記詳解
HTML元素（element）
開始標籤（tag）
結束標籤（tag）
⽤用<>框起來的符號叫做標籤 標籤內可以指定屬性
HTML5 語意化標籤
nav
header
articlesection
sidebar
footer
圖⽚片來源
有利於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
搭載網頁核心的基本架構
LESSON 3
1. HTML 的基礎
2. HTML 5 語意化標籤
3. HTML 範例教學
分享結束，很高興認識大家 ，謝謝：）
![myapp.im [ 內建框架] Facebook 粉絲專頁 APP 粉絲團 應用程式](https://img.pdfslide.tips/doc/110x75/55a462f81a28ab7b4b8b468b/myappim-facebook-app--55a517b60313c.jpg)
