HTML 說明

發表於 更新於 分類於 Disqus：
文章字數： 14k 所需閱讀時間 ≈ 13 分鐘

說明

  • 同源政策 (Same-origin policy)
    • 跨來源寫(Cross-origin writes)通常被允許，例如有連結、重新導向以及表單送出。少數某些HTTP請求需要先導請求。
    • 跨來源嵌入(Cross-origin embedding)通常被允許。
    • 跨來源讀取(Cross-origin read) 通常不被允許，不過通常可以藉由嵌入來繞道讀取，例如嵌入影像寬高讀取、嵌入程式碼或嵌入資源。
  • 跨源資源共享（CORS）
    • 簡單請求
    • Preflight Request(預檢請求)
      有時會看到發兩次 request,因為只要發送請求到不同 origin 就會有 cors 的問題,所以 server 必須先確定 client 端是合法請求，也就是,Preflighted 要先發一次 request 去驗證是否合法 domain,成功了才能發真正的 request

HTML example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Title icon -->
	<link rel="shortcut icon" href="images/title-img.png" type="image/x-icon">

	<!-- web title -->
	<title>Pure Bootstrap Website</title>

</head>
<body>

</body>
</html>

SEO(Search engine optimization)搜尋引擎優化 與 meta 標籤

一般

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- title, keywords,  description-->
<title>四海遊龍 (中山區) - 餐廳/美食評論 - Tripadvisor</title>
<meta name="keywords" content="中山區四海遊龍, 餐廳, 餐廳評論, 食物, 用餐">
<meta name="description" content="四海遊龍(中山區): 讀讀32則則關於四海遊龍客觀公正的美食評論，在Tripadvisor的5分滿分評等中得3.5分，在中山區的2,708家餐廳中排第468名。">
<!-- The Open Graph protocol, Facebook 使用 -->
<meta property="og:image" content="https://media-cdn.tripadvisor.com/media/photo-s/0d/43/49/bd/photo0jpg.jpg">
<meta property="og:image:width" content="550">
<meta property="og:image:height" content="413">
<meta property="og:type" content="restaurant">
<meta property="og:url"
		content="http://www.tripadvisor.com.tw/Restaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html">
<meta property="og:site_name" content="Tripadvisor">
<!-- 提供 app-->
<meta property="al:ios:app_name" content="TripAdvisor">
<meta property="al:ios:app_store_id" content="284876795">
<meta property="twitter:app:id:ipad" name="twitter:app:id:ipad" content="284876795">
<meta property="twitter:app:id:iphone" name="twitter:app:id:iphone" content="284876795">
<meta property="al:ios:url"
		content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html?m=33762">
<meta property="twitter:app:url:ipad" name="twitter:app:url:ipad"
		content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html?m=33762">
<meta property="twitter:app:url:iphone" name="twitter:app:url:iphone"
		content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html?m=33762">
<!-- alternate 提供其他語言網頁-->
<link rel="alternate" hreflang="en"
		href="https://www.tripadvisor.com/Restaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html">
<link rel="alternate" hreflang="en-GB"
		href="https://www.tripadvisor.co.uk/Restaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html">
<!-- twitter image-->
<meta name="twitter:image"
		content="https://static.tacdn.com/img2/brand_refresh/application_icons/post-image-550x550.png">

JSON-LD(JSON for Linking Data)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- JSON for Linking Data-->
<script type="application/ld+json">
	{
		"@context": "http:\u002F\u002Fschema.org",
		"@type": "FoodEstablishment",
		"name": "\u56DB\u6D77\u904A\u9F8D",
		"url": "\u002FRestaurant_Review-g13808671-d8310497-Reviews-Yuloong-Zhongshan_District_Taipei.html",
		"image": "https:\u002F\u002Fmedia-cdn.tripadvisor.com\u002Fmedia\u002Fphoto-s\u002F0d\u002F43\u002F49\u002Fbd\u002Fphoto0jpg.jpg",
		"priceRange": "$",
		"aggregateRating": {
			"@type": "AggregateRating",
			"ratingValue": "3.5",
			"reviewCount": "32"
		},
		"address": {
			"@type": "PostalAddress",
			"streetAddress": "No.10,Minsheng West Road,Zhongshan District",
			"addressLocality": "\u4E2D\u5C71\u5340",
			"addressRegion": "",
			"postalCode": "",
			"addressCountry": {
				"@type": "Country",
				"name": "\u53F0\u7063"
			}
		}
	}
</script>

robots.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# robots.txt 給網頁爬蟲 or 搜尋引擎 看的檔案
# Sitemap(xml file) 網頁地圖
# Disallow 不允許搜尋
# Allow 允許搜尋
# https://www.tripadvisor.com.tw/robots.txt
Sitemap: https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap_zh_TW_index.xml
Sitemap: https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap_zh_TW_location_photo_direct_link_index.xml
Sitemap: https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap_zh_TW_show_user_reviews_index.xml
Sitemap: https://www.tripadvisor.com.tw/sitemap/att/zh_TW/sitemap_zh_TW_attractions_index.xml
Sitemap: https://www.tripadvisor.com.tw/sitemap/att/zh_TW/sitemap_zh_TW_attraction_review_index.xml
Sitemap: https://www.tripadvisor.com.tw/sitemap/att/zh_TW/sitemap_zh_TW_attraction_product_review_index.xml
Sitemap: https://www.tripadvisor.com.tw/sitemap/att/zh_TW/sitemap_zh_TW_attractions_near_index.xml
User-Agent: *
Disallow: /5349
Disallow: /AcceptDeferredTermsAndConditions
Disallow: /AccessTokenLogin
Disallow: /AccommodationCrossSells
.....
Allow: /js3/ta-mobile
Allow: /js3/vr-shared
Allow: /UserReview$
Allow: /data/*/crosssellaccommodations

Sitemap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Sitemap: https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap_zh_TW_index.xml
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
		xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd">
	<sitemap>
		<loc>https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap-1611790-zh_TW-hotel_review-1610916285.xml.gz</loc>
		<lastmod>2021-01-17T20:44:45Z</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap-1611791-zh_TW-hotel_review-1610916289.xml.gz</loc>
		<lastmod>2021-01-17T20:44:49Z</lastmod>
	</sitemap>
	......
	<sitemap>
		<loc>https://www.tripadvisor.com.tw/sitemap/2/zh_TW/sitemap-1447620-zh_TW-cruise_review-1620460669.xml.gz</loc>
		<lastmod>2021-05-08T07:57:49Z</lastmod>
	</sitemap>
</sitemapindex>

Tag 標籤

Semantic elements 語義化元素

1
2
3
4
5
6
7
8
9
10
11
12
13
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<header></header>
<!-- navigation 導覽列 -->
<nav></nav>
<!-- 本頁主要內容 -->
<main></main>
<!-- 底頁 -->
<footer></footer>

文字

1
2
3
4
5
6
<p></p>
<div></div>
<!-- preformatted text 方便放程式-->
<pre></pre>
<!-- line break 換行-->
<br>

行內文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<span></span>
<!-- anchor 錨點 href: hypertext reference -->
<!-- _self:開在本頁 _blank:另開分頁 -->
<a href="https://google.com" target='_self'>google</a>
<!-- 本頁移動 #:top -->
<h2 id="p3"></h2>
<a href="#p3">To p3</a>

<!-- unordered list 清單-->
<ul> 
  <!-- list item -->
  <li>item1</li> 
  <li>item2</li>
</ul>
<!-- ordered list -->
<ol> 
  <li>item1</li>
  <li>item2</li>
</ol>
<!-- <sub> 標簽可定義下標文本。<sup> 可定義上標文本。都屬于行內元素，默認比當前字體稍小。 -->
<p>This text is <sup>superscripted</sup></p>
<p>The chemical formula of water: H<sub>2</sub>O</p>

Form

name 當表單提交時使用,只有設置了name屬性才能在提交時傳遞它們的值
value 可設定 input 初值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 表單 -->
<form action="">
	<div>
		姓名: <input type="text" placeholder="你的名字">
	</div>
	<div>
		密碼: <input type="password">
	</div>
	<div>
		Email: <input type="email" placeholder="你的電子郵件">
	</div>
	<div>
		日期: <input type="date">
	</div>
	<div>
		性別: <input type="radio" name="gender" id="male"><label for="male">男生</label>	
		<input type="radio" name="gender" id="female"><label for="female">女生</label>
	</div>
	<div>
		興趣: <input type="checkbox" id="sports"><label for="sports">運動</label>	
		<input type="checkbox" id="reading"><label for="reading">閱讀</label>	
	</div>
	<div>
		<!-- 送出 -->
		<input type="submit" value="送出">
	</div>
</form>
姓名:
密碼:
Email:
日期:
性別:
興趣:
textarea
1
<textarea name="content" rows="5"></textarea>

下拉式選單 - <select>, <option>
1
2
3
4
5
6
<select name="type">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>
input type hidden
1
2
3
4
5
<form>
　<input type="text" name="YourName">
　<input type="hidden" name="隱藏欄位名稱" value="隱藏欄位值">
　<input type="submit" value="送出表單">
</form>
enctype Attribute(content type)
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
    1
    2
    3
    <form enctype="value">
    	....
    </form>

圖片與多媒體

1
2
3
4
<!-- title:滑鼠移到顯示  alt:替代文字(圖片不存在))-->
<img title="" src="" alt="">
<!-- 嵌入網頁,X-Frame-Option:sameorigin 可防止別人嵌入 -->
<iframe src="https://..." frameborder="0"></iframe>

Table 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 
<th scope='row'> row標題
<th scope='col'> col標題
<td rowspan="2"> 跨 row
<td colspan=3> 跨 col
-->
<table  border="1">
	<!-- table header -->
	<tr>
		<th>城市</th>
	　<th colspan="2">特產</th>
	</tr>
	<!-- table row -->
	<tr>
		<td>龍潭</td>
	　<td>花生</td>
	　<td>豆干</td>
	</tr>
</table>
　 　 　
城市特產
龍潭花生豆干

其他標籤

section
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--  <section> 標籤 (tag) 用在 HTML 文件中有明顯含義的區塊 (related grouping of semantic meaning)，一般來說 section 區塊中也會有自己的標題 (h1-h6)-->
<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>
<!-- 或 -->
<article>
  <section id="intro">
      <!-- 介紹 -->
  </section>

  <section id="main_content">
      <!-- 主內容 -->
  </section>

  <section id="related">
      <ul>
          <li><a href="that.html">相關文章</a></li>
          <li><a href="this.html">相關文章</a></li>
      </ul>
  </section>
</article>
dl, dd, dt
1
2
3
4
5
6
7
8
9
<!-- < dl > < dt >< dd >是在網頁設計上的一種內文排版技巧 -->
<dl>
    <dt>標題A</dt>
      <dd>內容A-1</dd>
      <dd>內容A-2</dd>
    <dt>標題B</dt>
     <dd>內容B-1</dd>
     <dd>內容B-2</dd>
</dl>
fieldset and Legends
  • fieldset 用來對表單 (form) 中的控制元件做分組 (group)，而
  • legend 通常是 fieldset 裡面的第一個元素作為該分組的標題 (caption)。
  • fieldset 標籤的屬性 (attributes)：
    • disabled: 將 fieldset 中所有欄位設定為禁用的狀態，是一個布林 (boolean) 屬性
    • name: 聲明 fieldset 名稱
1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
  <fieldset>
    <legend>Personal details</legend>
    <label>Your name:</label> <input name="yourname">
    <label>Your age:</label> <input type="number" name="yourage">
  </fieldset>

  <fieldset>
    <legend>Your address</legend>
    <label>Street:</label> <input name="street">
    <label>Zip code / post code:</label> <input name="postcode">
  </fieldset>
</form>

HTML Attribute

title - mouse 移至上方顯示說明

1
2
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>

tabindex

The tabindex attribute specifies the tab order of an element (when the “tab” button is used for navigating)

1
2
3
<div tabindex="1">W3Schools</div>
<div tabindex="3">Google</div>
<div tabindex="2">Microsoft</div>

其他

Escape 跳脫

1
2
3
4
5
6
7
8
9
<!-- 
	& => &amp;
	< => &lt;
	> => &gt;   
-->
<!-- 顯示標籤 -->
<div>
	&lt;div&gt;文字&lt;/div&gt;
</div>
<div>文字</div>

comment

1
2
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>

HTML5的lang

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<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>
	
</body>
</html>

HTML Entity List

字元實體參照(character entity reference), 是標記式語言 SGML與HTML中對字元的一種跳脫序列表示

1
2
3
4
5
6
7
<div>
  <ul>
    <li>標&emsp;&emsp;題&nbsp;:</li>
    <li>填&ensp;寫&ensp;人&nbsp;:</li>
    <li>聯絡電話&nbsp;:</li>
  </ul>
</div>
  • 標  題 :
  • 填 寫 人 :
  • 聯絡電話 :

參考