# HTML = Hypertext Markup Language（超文本標示語言），所以並不是個程式語言。 ###### tags: `HTML` 最基礎樣貌： ```htmlembedded= <!DOCUMENT html> //跟瀏覽器說：請給我標準模式（render 渲染） <html> <head> <meta charset="utf-8" /> //給機器看的，利於 SEO 優化 <!-- <meta> 裡面沒有內容 所以是一個自成一個標籤（`<meta/>`） 屬性: charset 值(value): utf-8 --> // 註解 <!-- --> 給人類看的 <meta name="viewport" content="width=device-width, initial-scale=1"> //頁面大小設定 <title>網頁的標題</title> </head> <body> </body> </html> ``` ## `<div>` vs `<span>` > 做分類、分類用的 `<div>`: division 自己佔滿一行 `<span>`：可以與其他元素放在同一行，通常用於讓文字或一個段落做變化用 ## 圖片顯示 img > 必須用雙引號" "括起來 ＝ 字串的意思 ```htmlmixed= <img alt="I am an image." title="圖片的標題" src="url" /> ``` `alt` = "": 圖片不能顯示時的替代文字。 `src` = "url": 圖片來源：網址或目錄。 `title` = "": 圖片的標題，滑鼠移過去時顯示標題 保留完整格式 pre * `<pre></pre>` preformatted text ： 顯示出被格式化過的文字。 可將內容原封不動顯示，有空格就有空格，有換行就有換行，有利於呈現程式語言。 * `<br>` line break 換行用。 ## 表格必備標籤 * `<table></table>` 表格 * `<tr></tr>` table row * `<td></td>` table cell * `<th></th>` table header 這有快速鍵...... 下面表格可以寫成這樣 `table>tr*3>td{姓名}+td{$分數}*2` 超級神奇的.... ```htmlmixed= <table> <tr> <th>姓名</th> <th>國文分數</th> <th>英文分數</th> </tr> <tr> <td>小明</td> <td>70</td> <td>80</td> </tr> <tr> <td>小花</td> <td>89</td> <td>65</td> </tr> </table> ``` ## 超連結 <a> anchor 錨點，兩種用法： href = hypertext refrence 1. 帶你到外面去 ```htmlmixed= <body> <a href="http://google.com">點我去google搜尋引擎</a> <a href="http://google.com" target="_self">google 搜尋引擎</a> //target= "_self" => 在原頁面上開啟網址 <a href="http://google.com" target="_blank">google 搜尋引擎</a> //target="_blank" => 另開新分頁 </body> ``` 2. 帶你到內頁的某段去 ```htmlmixed= <body> <a href="#p3"> 帶我到p3</a> <h1 id="p1"> 網頁前端1</h1> <p>........</p> <h1 id="p2"> 網頁前端2</h1> <p>........</p> <h1 id="p3"> 網頁前端3</h1> <p>.........</p> <a href="#p1"> 帶我到p1</a> </body> ``` > 先設定 id="#p1" 然後再設定 `<a href="#p1">`點擊 『帶我到 p1』 立即跳到段落一。 ## 語意化的 UI 標籤：main、nav、footer = Semantic elements 語義化元素。 * `<main></main>` 網頁主要的部分 * `<nav>` navigation 導覽列 * `<footer>` 網頁的底部，通常有的一些資訊，例如：聯繫方式...etc. 其他資源： [MDN Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) [New Semantic Elements in HTML5 ](https://www.w3schools.com/html/html5_semantic_elements.asp) ## 直接用別人的網頁：iframe iframe 嵌入網頁 一些大的網站通常會設定不給使用，怕被盜用內容。 ```htmlmixed= <iframe src="url" width="100%" height="500px"> //可設定網頁大小 ``` ## 表單相關標簽：form、input、textarea * `<form>`: 表單 * `<input>`: 輸入框 * `type`=" ": * `text`: 輸入文字。 * `submit`: 提交 * `password`: 變成 ******** * `email`: 有些瀏覽器會幫你做驗證。 * `date`: 可選取日期。 * `radio`: 單選框 * `checkbox`: 複選框 ## SEO 與相關標簽：meta tag * Search Engine Optimization (SEO) 搜尋引擎優化：幫助搜尋引擎理解你的網頁。 > 那如何幫助搜尋引擎理解呢？ * 放 <meta>: keywords or description ``` <head> <meta name="keywords" content="放關鍵字" /> <meta name="description" content="放描述" /> </head> ``` * 放 og tag * Open Graph Protocol 給機器看的 * [og系列](https://developers.facebook.com/tools/debug/)通常是給 Facebook 用的 * 可用Facebook 偵錯工具-Facebook Debugger 偵查某個網頁在臉書看起來的樣子，而選擇你想要的圖片呈現模樣。 > <meta property="og:title" content="xxx" /> * JSON-ld [(JSON for Linking Data)](https://json-ld.org/) * 跟 open grahp protocol 有點像，目的都是要讓人用格式化的東西去描述某樣東西，主要是因為人寫的看不等，機器必須用格式化的東西才會懂指令。 * 通常是給 Google 看的 ``` <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "FoodEstablishment" ... ... } ``` * robots.txt: 給網頁爬蟲看的檔案，跟他說哪個檔案要爬，哪個別爬。(通常在根目錄底下ex:`https://www.tripadvisor.com.tw/robots.txt`) * sitemap.xml: 網址的地圖 網站中的每個網址都放上去，搜尋引擎就知道要爬去哪。 * <link rel="alternate" hreflang="en" href="某語言版本的網址" /> 告訴搜尋引擎：我們是同個頁面但是不同語言，所以搜尋引擎會自動幫你排在一起，不因不同網址而分散。 * ios 手機 app 在 ios 手機上用 safari 看頁面時，會跳出這個網頁有 app 版要不要下載。 ``` <meta property="al:ios:app_name" content="TripAdvisor"> <meta property="al:ios:app_store_id" content="28478958"> ``` 小結： 其實這些標籤都不是給人看得，都是給機器看的。利用格式化的方式，讓搜尋引擎看得比較快且精確，主動讓搜尋引擎知道你的網頁提供什麼內容，進而影響你網頁的排名～ ## Escape：該怎麼顯示標籤？ ```htmlmixed= <div> <div></div> </div> ``` ```htmlmixed= <div> &lt;div&gt;&lt;/div&gt; </div> ``` & => &amp; < => &lt; > => &gt;