# 0201 html語法課程雲端筆記
# 01網頁基礎架構
```
<html>
<head>
<title>我的網頁</title>
</head>
<body>
ABC
</body>
</html>
```
# 02基本架構宣告
```
<!DOCTYPE html>
<html lang="zh-tw"><!--宣告所在區域-->
<head>
<meta charset="UTF-8"><!--萬國碼-->
<title>Document</title>
</head>
<body>
</body>
</html>
```
# 03meta說明
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--萬國碼-->
<meta name="viewport" content="width=device-width">
<!--螢幕偵測-->
<meta name="keywords" content="網頁教學,HTML,巨匠電腦">
<!--網頁關鍵字-->
<meta name="description" content="有關於網路教學的網站">
<!--網頁內容-->
<meta name="robots" content="index,follow">
<!--網路爬蟲(要被偵測)-->
<!-- <meta name="robots" content="nofollow">-->
<!--網路爬蟲(不要被偵測)-->
<title>網頁教學</title>
</head>
<body>
<h1>標籤文字1</h1>
<h2>標籤文字2</h2>
<h3>標籤文字3</h1>
<h4>標籤文字4</h4>
<h5>標籤文字5</h5>
<h6>標籤文字6</h6>
</body></html>
```
# 04標題文字
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>標題文字1</h1>
<h2>標題文字2</h2>
<h3>標題文字3</h3>
<h4>標題文字4</h4>
<h5>標題文字5</h5>
<h6>標題文字6</h6>
</body>
</html>
```
# 05文字粗體
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<b>文字粗體</b>
<strong>文字粗體</strong>
</body>
</html>
```
# 06文字斜體
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<i><b>文字斜體</b></i>
<em>文字斜體</em>
</body>
</html>
```
# 07文字底線
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<u>文字底線</u>
<ins>文字底線</ins>
</body>
</html>
```
# 08上下標文字
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<u>X²</u>
<u>H<sub>2</sub>O</u>
</body>
</html>
```
# 09刪除線
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<s>原價：5000元</s><br>
<mark>特價：500元</mark>
</body>
</html>
10段落換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, repellendus doloribus voluptatem nulla maiores eligendi sed voluptatum quibusdam quis animi. Quia, accusantium! Placeat velit eaque, iste quidem a excepturi voluptate minus cupiditate nulla voluptates, commodi assumenda mollitia reprehenderit, ducimus doloribus sit id? Saepe modi dolorum magni molestias! Voluptatem magnam fugit molestias voluptates dolor est architecto totam facere consectetur, blanditiis asperiores debitis impedit quae natus quo deserunt veniam <b>dicta.</b><br> Excepturi praesentium eius asperiores, possimus distinctio dolore eveniet necessitatibus blanditiis reiciendis autem nulla ut neque consequatur sunt aliquid ducimus quas, nostrum maxime. Corrupti animi, placeat pariatur debitis iure ducimus. At inventore aliquam odit illo est fuga impedit a labore excepturi perspiciatis ab libero nemo, unde similique qui illum repellat quos in, laudantium totam. Commodi non quo veritatis cum quibusdam explicabo, culpa quaerat dolorem rem fugit rerum voluptas. Eos nulla quaerat ab at perferendis impedit eius maxime architecto id atque animi explicabo deleniti, sed a et delectus eaque corporis dicta nisi. Nobis dicta tempore incidunt laudantium maxime velit laborum pariatur nostrum, dolorum porro possimus dolor, ullam explicabo error ducimus dignissimos! Praesentium, modi facere quae, rerum ipsam nobis cum sunt iusto minima accusantium ipsa, illo architecto similique eveniet maiores veritatis expedita cupiditate labore quis.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur voluptates impedit est eligendi. Repudiandae, fugiat error placeat sapiente non debitis mollitia optio qui, consectetur soluta quaerat iste excepturi? Quod perspiciatis id numquam odit fugit temporibus corrupti. Voluptatibus unde, illo officia qui sunt, labore placeat ipsa neque blanditiis totam ab consectetur debitis. Distinctio libero exercitationem modi maxime suscipit deserunt labore possimus, beatae dignissimos, quo corporis fugiat aut excepturi nostrum doloribus voluptatum ea sed sunt quia cum in placeat asperiores pariatur! Accusantium at minima, perspiciatis numquam vitae laudantium consectetur in quibusdam pariatur, saepe accusamus, molestias possimus porro eaque ab eius et iste.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti voluptate hic doloribus porro quam est quae sapiente corporis beatae quibusdam ad, amet maiores velit cumque aliquam minus, dolores mollitia error rem asperiores. Explicabo tempore fugit odit libero, magnam, distinctio, impedit accusamus quos magni totam labore. Laudantium quasi, excepturi quod eius enim voluptates pariatur, doloribus unde error quibusdam eaque repellat vel cupiditate, atque animi veniam hic. Quia, ad? Vero soluta iure praesentium, sint, minima necessitatibus rem modi esse tenetur facere reprehenderit atque ullam amet. Debitis praesentium ad ea ducimus sed, eveniet voluptatibus inventore quisquam obcaecati, pariatur magni aliquid vero ex? Officia aspernatur repellat expedita, minus doloremque aperiam eveniet rerum, maiores sint ad tempore earum nostrum autem nemo iste quas? Quisquam obcaecati temporibus fugiat corrupti porro sapiente, reiciendis possimus labore nisi neque accusamus autem cum vel voluptas aspernatur dolore asperiores impedit quasi id facere totam itaque perspiciatis! Rem vel illo distinctio quos.
</p>
</body>
</html>
```
# 11換行
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br> Sed nisi perspiciatis doloremque iste nesciunt ab ut at, odit a ad.
</body>
</html>
test01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>標題文字</h1>
<p>
語法：<br>
<h1>標題文字</h1><br>
<h2>標題文字</h2><br>
<h3>標題文字</h3><br>
<h4>標題文字</h4><br>
<h5>標題文字</h5><br>
<h6>標題文字</h6><br>
</p>
</body>
</html>
```
# #test1
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>標題文字</h1>
<p>
語法：<br>
<h1>標題文字</h1><br>
<h2>標題文字</h2><br>
<h3>標題文字</h3><br>
<h4>標題文字</h4><br>
<h5>標題文字</h5><br>
<h6>標題文字</h6><br>
</p>
</body>
</html>
```
# #test2
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p align="center">ABC</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Minima praesentium aliquam veniam odio velit eos? Quas esse fuga qui sint!</p>
</body>
</html>
Sign in with Wallet
Connect another wallet