Embedded Files
基本骨幹
基本骨幹
<head> 頁首
<style> CSS 樣式 </style>
<link rel="stylesheet" href="style.css">
<script> JavaScript 腳本 </script>
<script src="script.js"></script>
</head>
<body> 主體[區塊]
<div> 區塊容器[區塊] </div>
<h1> 標題[區塊] </h1> <!-- 標題有h1~h6 -->
<p> 段落[區塊] </p>
<ul> 項目清單[區塊]
<li> 細項[區塊] </li>
</ul>
<ol> 序列清單[區塊]
<li> 細項[區塊] </li>
</ol>
<a href="#"> 連結[行內] </a>
</body>
HTML5 語義化標籤
HTML5 語義化標籤
<div> 無語義區塊容器[區塊] </div>
<header> 頁眉[區塊] </header>
<main> 主內容[區塊]
<nav> 導航列(主選單)[區塊] </nav>
<artical> 文章[區塊] </artical>
<section> 段落[區塊] </section>
<aside> 側邊欄[區塊] </aside>
</main>
<footer> 頁腳[區塊] </footer>
嵌入圖文
嵌入圖文
<b> 粗體字[行內] </b>
<i> 斜體字[行內] </i>
<span> 行內容器[行內] </span>
<pre> 預格式化段落[區塊] </pre>
<img src="圖片路徑" alt=""> 圖片[行內]
<picture> <!-- 響應式圖片 -->
<source srcset="小圖路徑" media="(max-width: 414px)">
<img src="大圖路徑">
</picture>
ps. img 須放最後，media 尺寸由小到大
嵌入表格
嵌入表格
<table> 表格[區塊]
<table border="𝒙"> 表格邊框
<table width="𝒙"> 表格寬度
<table cellspacing="𝒙"> 表格間距
<table cellpadding="𝒙"> 表格內距
<caption> 表格標題
<thead> 表格頁首
<tbody> 表格內文
<tfoot> 表格頁腳
<tr> 列
<td>、<th> 欄、首列各欄
<td colspan="𝒏"> 合併𝒏列
<td rowspan="𝒏"> 合併𝒏欄
Eg. <table>
<thead>
<tr>
<th>表頭</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
</tr>
</tfoot>
</table>
嵌入表單
嵌入表單
<input type="text" placeholder="框內文字"> 單行文字輸入框[行內]
<input type="radio" name="群組名稱"> 單選格位[行內]
<input type="checkbox"> 多選格位[行內]
<textarea (name="" id="" cols="欄寬" row="列行")></textarea> 多行文字輸入框[行內]
<input type="submit" value="文字"> 提交表單[行內]
<input type="button" value="文字"> 按鈕[行內]
嵌入網頁
嵌入網頁
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3646.1506783269324!2d120.92463107491643!3d23.955111378531267!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468d839708dde4b%3A0xcb0070cc507053b3!2z5ZyL56uL5pqo5Y2X5ZyL6Zqb5aSn5a2456eR5oqA5a246Zmi5LqM6aSo!5e0!3m2!1szh-TW!2stw!4v1700817537865!5m2!1szh-TW!2stw" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <!-- Google地圖／國立暨南國際大學科技學院二館 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/iOQ4H-ktiLY?si=xosns0DRxGOiLvmd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <!-- YouTube影片／桃園忠烈祠暨神社文化園區｜土木人不吃土｜2023 麥塊建築大賽 -->
屬性
屬性
lang="en/zh…" 文字語系
title="文字" 文字標題
字元代碼
字元代碼
半形空格
> 大於
< 小於
其他
其他
<!-- 文字 --> 註解，快捷鍵為Ctrl+/
<br> 斷行
<hr> 水平分隔線
<div class="□ ○ △"> 多重class(若發生衝突後值將覆蓋前值)
ps. 開啟新網頁時輸入「!」產生網頁基本格式
Page updated
Google Sites
Report abuse