[DAY2]網頁切版入門及版面實作_html介紹

2022 iThome 鐵人賽

DAY 2

Modern Web

網頁切版入門及版面實作系列第 2 篇

14th鐵人賽網頁切版新手上路

ruhui0726

團隊蝦兵蟹將

2022-09-17 08:16:24

1019 瀏覽

分享至

基本概念

基本的網頁是由 HTML、CSS 與 JavaScript 所組成
HTML 負責建構網頁的內容及基本架構
CSS 專門負責美化網頁的任務
JavaScript 增加互動功能，例如遊戲、動態套用樣式的效果等等
只能取半形的英文、數字、- (中線) 、_ (底線)，不能用中文
index為首頁的內定命名 ( 會自動判別為首頁 )
所以有網頁檔案必須儲存於同一資料夾內，ex: 活動頁資料夾名稱為 event，圖片檔案資料夾名稱 images，
images 資料夾需存在 event 資料夾內.... 。
響應式網頁設計 ( Responsive Web Design ) 簡稱RWD，隨著顯示螢幕的尺寸自動伸縮以符合不同的電腦、
平板、手機尺寸內容

HTML5-範本

<!doctype html><!-- hmtl5 聲明 -->
<html lang="zh-TW">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" ><!-- 響應式標籤 -->
 <title>這是網頁標題</title>
 <link rel="stylesheet" href="css/reset.css"><!-- Reset.css 改變各瀏覽器預設 -->
 <link rel="stylesheet" href="css/style.css"><!-- 連結自訂CSS -->
</head>
<body><!-- 網頁內容寫在body內 -->
<h1>主標題</h1>
<h2>副標題</h2>
<p>文字內容</p>
</body>
</html>

用語意標籤製作HTML5文件的好處：

看標籤就可以知道哪一個部份是標題、哪裡是選單，對使用者來說方便判讀，對搜尋引擎來說亦是。
SEO優化 - 搜尋引擎在搜尋網頁內容時，可以搜尋到準確的資料與資訊。

<header> 網頁的標頭，通常放置網站標題。
<nav> 網頁的選單、導覽。
<main> 網頁的主要內容。
<aside> 網頁的側欄、附加內容。
<article> 一篇文章內容。
<section> 自訂的區塊，例如數篇摘要組成的空間。
<footer> 網頁的頁尾，通常放置聯絡方式、著作權宣告等等。
<mark> 強調一小塊內容。
<time> 顯示日期時間。
<address> 所在位址。

Html-基本標籤

<h1>~<h6> 標題1~標題6 (一個頁面只能有一個h1,且不能跳標題)
<p> 段落文字內容
<ul> 項目清單群組 (‧)
<ol> 編號清單群組 (123)
<li> 清單中一項內容
<a> 超連結( a:link - 超連結顯示的顏色 a:hover - 滑鼠游標滑到項目時的顏色 a:visited -點擊過的超連結顏色 )
<b> 粗體字
<u> 底線字
<i> 斜體字
<span> 用來包裹文字 ，方便樣式排版，本身沒標籤語意
<hr> 分隔線
<br> 換行