在開始實作前我們先來回憶並整理重要的概念吧!
HTML是用來構建網頁架構的語言，中文翻譯為超文本標記語言，是由一個一個標籤構成的巢狀結構。
一個最基本的網頁有三個部分:
<header>
<nav>
<ul>
<li> <a>首頁</a> </li>
<li> <a>產品</a> </li>
<li> <a>聯絡我們</a> </li>
</ul>
</nav>
</header>
<section>標籤來包覆不同的內容區塊: <section>
<h1>XXX網站</h1>
<p>Welcome! 這是網站的首頁。</p>
</section>
<section>
<h2>關於我們</h2>
<p>我們是一家專業的網站開發公司。</p>
</section>
<section>
<h2>我們的產品</h2>
<p>我們提供各種類型的網站開發服務。</p>
</section>
<section>
<h2>聯繫我們</h2>
<p>如果您有任何疑問，請隨時與我們聯繫。</p>
</section>
<footer>標籤: <footer>
<p>© 2023 XXX網，版權所有。</p>
<p>和我們聯絡：<a href="info@example.com">info@example.com</a></p>
</footer>
<!DOCTYPE html>
<html Lang="zh-Hant">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=devive-width, initial-scale=1.0"/>
<meta name="title" content="網頁搜索的標題。">
<meta name="description" content="網頁搜索的介紹。"/>
<meta name="keywords" content="關鍵字,關鍵字">
<meta name="robots" content="index,follow"/>
<meta name="author" content="作者資訊。"/>
<link rel="shortcut icon" type="image/x-icon" href="網頁標籤icon連結"/>
<title>網頁標籤名。</title>
</head>
<body>
<header>
<nav>
<ul>
<li> <a>首頁</a> </li>
<li> <a>產品</a> </li>
<li> <a>聯絡我們</a> </li>
</ul>
</nav>
</header>
<section>
<h1>XXX網站</h1>
<p>Welcome! 這是網站的首頁。</p>
</section>
<section>
<h2>關於我們</h2>
<p>我們是一家專業的網站開發公司。</p>
</section>
<section>
<h2>我們的產品</h2>
<p>我們提供各種類型的網站開發服務。</p>
</section>
<section>
<h2>聯繫我們</h2>
<p>如果您有任何疑問，請隨時與我們聯繫。</p>
</section>
<footer>
<p>© 2023 XXX網，版權所有。</p>
<p>和我們聯絡：<a href="info@example.com">info@example.com</a></p>
</footer>
</body>
</html>
@media screen and (max-width:767px) {
/* 螢幕小於等於767px時套用的的樣式 */
}
@media screen and (min-width:768px) {
/* 螢幕大於等於768px時套用的樣式 */
}
<div class="container">
<div class="row">
<div class="col-md-6">左欄</div>
<div class="col-md-6">右欄</div>
</div>
</div>
<div class="d-block d-md-none">
在螢幕大於等於768px時隱藏，小於等於767px時出現。
</div>
// 通過 ID 選擇元素
$("#myElement");
// 通過類別名選擇元素
$(".myClass");
// 通過標籤名選擇元素
$("div");
// 隱藏元素
$("#myElement").hide();
// 顯示元素
$("#myElement").show();
// 添加 CSS 類別
$("#myElement").addClass("highlight");
// 移除 CSS 類別
$("#myElement").removeClass("highlight");
$(document).ready(function(){
//當按鈕被點選時執行以下，event是事件處理器，它會記錄使用者的所有行為
$('.button').click(function(event){
$('#text').hide(); //隱藏#text元素
});
});
$(document).ready(function(){
$('.button').click(function(event){
$('#text,h1').toggle(); //按了按鈕後判斷有沒有顯示元素，沒有就顯示，有就隱藏
});
});
iThome鐵人賽
看影片追技術