(HTML) HTML 學習筆記
23 min readSep 24, 2023
目錄：
如何最簡單開始寫一個網站
改變網頁標題<title>、新增標題元素<h1>、新增文本段落<p>
換行<br>與空白
無序列表<ul>、有序列表<ol>、列表元素<li>
表格 <table>、表格行元素<tr>、表頭元素<th>、表格內容<td>
超連結 a、發送信件 mailto:
錨點 anchor、id
圖片 img
表單 (Form) — 文字輸入框 text
表單(Form) — 數字與日期
表單(Form) — 文字輸入區塊 textarea
表單(Form) — 單選 radio、多選 checkbox
表單(Form) — 下拉式選單 select
Meta 元素介紹
跳脫字元 Escape characters
粗體元素<b>、強調元素<strong>、斜體元素<i>、 e/m 元素<em>
iframe 元素
在網頁中播放音樂 audio
div 元素與 span 元素
HTML 中的 Button
Header 與 Footer
如何最簡單開始寫一個網站
安裝VSCode 與 Live Server 即可開始
開啟 VSCode 新增一個 index.html，接下來在畫面中 輸入 html:5 + Enter 或是輸入 ! + Enter 就可以產生出 HTML 的基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
改變網頁標題<title>、新增標題元素<h1>、新增文本段落<p>
<!DOCTYPE html>
<html lang="en">
<head>
<title>我的第一個網頁</title>
</head>
<body>
<h1>HTML 學習</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed maxime consequatur iste? Quasi animi non reiciendis veritatis vitae eligendi, itaque temporibus a est recusandae sit. Dolorem commodi eligendi nemo consequuntur.</p>
</body>
</html>快速生成假文 輸入 lorem + Enter
換行<br>與空白
<body>
<!-- 以下是第一段 -->
<h1>這是第一個標題</h1>
<p>這是一段字</p>
<!-- 以下是第二段 -->
<h2>這是第二個標題</h2>
<p>這是第二段落</p>
</body>想要讓文字之間進行空白，並不是單純輸入很多的空白鍵而已，必須使用 ，一個 就是一個空白鍵。
<!-- 以下是第二段 -->
<h2>這是第二個 標題</h2>
<p>這是第二段落</p>讓文字進行換行，使用 <br>，一個 <br> 就是換一行。
<body>
<!-- 以下是第一段 -->
<h1>這是第一個標題</h1>
<p>這是一段字</p>
<br>
<br>
<br>
<br>
<br>
<!-- 以下是第二段 -->
<h2>這是第二個 標題</h2>
<p>這是第二段落</p>
</body>無序列表<ul>、有序列表<ol> 列表元素<li>
<body>
<h2>無序列表</h2>
<ul>
<li>CD</li>
<li>DVD</li>
<li>藍光</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>CD</li>
<li>DVD</li>
<li>藍光</li>
</ol>
</body>表格 <table>、表格行元素<tr>、表頭元素<th>、表格內容<td>
<head>
<title>表格 Table</title>
<!-- 加入 css -->
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>星球</th>
<th>海洋</th>
<th>沙漠</th>
</tr>
<tr>
<td>地球</td>
<td>太平洋</td>
<td>沙哈拉</td>
</tr>
</table>
</body>
</html>在這段程式碼中，稍微有加上 css 讓表格的邊框線顯示出來
超連結 a、發送信件 mailto:
<body>
<a href="https://www.google.com.tw" target="_blank">Google</a>
<br>
<a href="./page2.html"> Page2 </a>
<br>
<a href="mailto:jasonyen1009@gmail.com">send mail to Jason</a>
</body>mailto: 是一種URI（Uniform Resource Identifier），用於指定電子郵件地址，以便用戶可以點擊該地址來啟動默認的郵件客戶端以發送郵件。
在本地端製作網頁時，也許會有其他的網頁，這時候就可以 使用 ./本地端路徑 來開啟網站
錨點 anchor、id
<body>
<h1>目錄</h1>
<ul>
<li><a href="#birdss"> 跳轉到鳥類</a></li>
<li><a href="#dogs"> 跳轉到狗類</a></li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="birds">鳥類區域</h2>
<p>關於鳥類的描述</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="dogs">狗類區塊</h2>
<p>關於狗狗的描述</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>以上的程式碼：
<h1>元素用於標題，顯示為"目錄"。- 使用
<ul>元素創建無序列表。 - 使用
<li>元素創建列表項目。 - 在列表項目中，使用
<a>元素創建了超連結，其中的href屬性值應該匹配到相應的目標區域。 <h2>元素用於創建章節標題，並分別具有不同的id值，例如id="birds"和id="dogs"。- 在每個
<h2>元素之後，使用<p>元素提供與該章節相關的描述。 - 最後，超連結的
href屬性值被設置為#birds和#dogs，這使得用戶可以點擊超連結以跳轉到相應的章節。
圖片 img
<body>
<!-- 正常顯示的圖片 -->
<img src="./image/lion.png" height="300" width="300" alt="這是一張 Lion 的圖片">
<!-- 加入超連結的圖片 -->
<a href="https://www.google.com.tw/" target="_blank">
<img src="./image/lion.png" height="300" width="300" alt="這是一張 Lion 的圖片">
</a>
<!-- 當圖片找不到時，會顯示 alt 的文字 -->
<img src="./lion.png" height="300" width="300" alt="這是一張 Lion 的圖片">
</body>表單 (Form) — 文字輸入框 text
<body>
<!-- HTTP 動詞 GET POST PUT DELETE -->
<!-- URL -->
<form action="xxx.com/index.php" method="post">
<label for="username">使用者名稱</label>
<input type="text" name="username" id="username">
<br>
<label for="email">Enail</label>
<input type="email" name="email" id="email">
<br>
<label for="password">密碼</label>
<input type="password" name="password" id="password">
<br>
<input type="submit" value="提交">
</form>
</body>HTTP 動詞表格
新增上述的表單請使輸入 input:text、 input:email、input:password、input:submit 快速建立
表單(Form) — 數字與日期
<body>
<h1>日本旅遊</h1>
<form action="">
<label for="date">出發的日期</label>
<input type="date" name="date" id="date">
<br>
<label for="number">停留的天數</label>
<input type="number" name="" id="number" min="1" max="10">
<br>
<input type="submit" value="提交">
</form>
</body>表單(Form) — 文字輸入區塊 textarea
<body>
<h1>歡迎來到我的頁面</h1>
<form action="">
<label for="">評論或反饋</label>
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="提交">
</form>
</body>表單(Form) — 單選 radio、多選 checkbox
<body>
<!-- 單選的題目 -->
<h1>肚子餓嗎？</h1>
<label for="">
<input type="radio" name="question1" value="yes">
是
</label>
<label for="">
<input type="radio" name="question1" value="no">
否
</label>
<br>
<!-- 多選的題目 check box -->
<h2>你喜歡什麼運動</h2>
<form action="">
<input type="checkbox" name="sports" id="">
<label for="">足球</label>
<input type="checkbox" name="sports" id="">
<label for="">籃球</label>
<input type="checkbox" name="sports" id="">
<label for="">網球</label>
<br>
<input type="submit" value="提交">
</form>
</body>表單(Form) — 下拉式選單 select
<body>
<h1>請選擇一個程式</h1>
<form action="">
<select name="" id="">
<option value="tokyo">東京</option>
<option value="paris">巴黎</option>
<option value="newyork">紐約</option>
</select>
</form>
<br>
<input type="submit" value="送出">
</body>Meta 元素介紹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meta 元素介紹</title>
<meta name="description" content="網站管理員分享指南. 本文件說明如何最佳化用戶分享至Facebook 的網站代管內容，無論是從桌面版或行動版網頁或是行動應用程式分享的內容，皆囊括在內。">
<!-- SEO -->
<meta name="keywords" content="Meta, HTML">
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
</head>
<body>
</body>
</html>
跳脫字元 Escape characters
在字串或文本中用來表示特殊字符的方法。這些特殊字符通常具有特殊的含義，例如代表換行、制表符、引號等。當你需要在字串中包含這些特殊字符時，你可以使用跳脫字元來告訴程式語言或解釋器，這個字符應該被視為普通字符，而不是特殊字符。
<body>
<h1>Escape characters html</h1>
<a href="https://mateam.net/html-escape-characters/" target="_blank">Escape characters html</a>
<h2></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut soluta quis nam, quae nihil accusamus unde rem illum deleniti nobis accusantium est quaerat consectetur molestiae sapiente, dolores aspernatur delectus! Enim?</p>
<p>™ 這是商標符號</p>
<p>© 這是版權的符號</p>
</body>粗體元素<b>、強調元素<strong>、斜體元素<i>、 e/m 元素<em>
iframe 元素
這次會在本地端新增三個頁面，首頁（index.html）第一個網頁（first.html）第二個網頁（second.html）
簡單來說，我們時常在網站上看到還有嵌入其他頁面的方式，將會使用 iframe 實現。
要嵌入 youtube 網頁其實蠻容易的，打開任意的影片介面，點擊分享，點擊上方的嵌入，將顯示的程式碼完整複製下來，貼入到 index.html 中即可。
<body>
<h1>這是首頁</h1>
<iframe src="./first.html" frameborder="0">
你看的見這段文字嗎？
</iframe>
<br>
<iframe src="./second.html" frameborder="0">
你看的見這段文字嗎？
</iframe>
<br>
<!-- 下方是到 YouTube 的影片, 然後點選 嵌入 按鈕 出現的，將其複製上去即可 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/EaATV0PYPpo?si=xKsW8cf6hqq4cpGB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>在網頁中播放音樂 audio
<body>
<audio controls>
<source src="./music.mp3" type="audio/mpeg">
你的瀏覽器不支援播放音樂
</audio>
</body>div 元素與 span 元素
<body>
<!-- 塊級元素 div -->
<div style="background-color: blue;">
第一個區塊
</div>
<div style="background-color: red;">
第二個區塊
</div>
<!-- 行內元素 span -->
<span style="background-color: rebeccapurple;">這是第一個 span</span>
<span style="background-color: teal;">這是第二個 span</span>
<span style="background-color: brown;">這是第三個 span</span>
<span style="background-color: violet;">這是第四個 span</span>
</body>HTML 中的 Button
<body>
<button style="color: white; background-color: gray;">我是按鈕</button>
<button style="border-radius: 60px;">圓角的按鈕</button>
<a href="https://www.google.com.tw" target="_blank">
<button style="border-radius: 60px; background-color: gray; color: white;">前往 Google</button>
</a>
</body>Header 與 Footer
+--------------------------------------------+
| Header（頁首） |
|--------------------------------------------|
| 屬性 | 位置 |
|--------------|-------------------------------|
| 用途 | 包含文檔的標題、作者、日期、 |
| | 公司標誌等重要資訊。 |
| 位置 | 位於文檔的頂部，每頁的頂部都 |
| | 一致。 |
| 客製化 | 可根據需要自訂內容和格式。 |
| 示範內容 | - 文檔標題：文檔的名稱或主題 |
| | - 作者：文檔的作者或創建者 |
| | - 日期：文檔的創建或修改日期 |
| | - 公司標誌：組織的標誌或徽章 |
+--------------------------------------------+
+--------------------------------------------+
| Footer（頁尾） |
|--------------------------------------------|
| 屬性 | 位置 |
|--------------|-------------------------------|
| 用途 | 包含頁碼、版權資訊、聯繫資訊、 |
| | 審閱說明等附加資訊。 |
| 位置 | 位於文檔的底部，每頁的底部都 |
| | 一致。 |
| 客製化 | 可根據需要自訂內容和格式。 |
| 示範內容 | - 頁碼：指示文檔的當前頁碼和 |
| | 總頁數。 |
| | - 版權資訊：文檔的版權聲明。 |
| | - 聯繫資訊：提供有關文檔的 |
| | 聯繫方式或指南。 |
| | - 審閱說明：審閱或其他附加說明 |
+--------------------------------------------+<body>
<!-- 首頁 -->
<header style="border: 1px solid;">
<p>
<a href="#">首頁</a>
<a href="#">關於我</a>
<a href="#">產品列表</a>
</p>
</header>
<main>
主要的內容
</main>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<!-- 尾頁 -->
<footer>
<p>作者：Jason</p>
<p>© 版權所有</p>
</footer>
</body>