Try  HackMD Logo HackMD

[FE101] 前端基礎：HTML

Link
  1. 壓縮圖片
  2. Zeplin
  3. 網頁模版

網頁背後到底是什麼？

網頁最根本的樣貌是純文字檔案。

HTML → 瀏覽器 → 畫面

瀏覽器看的懂文字檔案，然後瀏覽器會轉成我們平常看的網頁畫面。

HTML 基礎

HTML 全名: HyperText Markup Language

HTML 基本組成

  • 基本組成：<html>,<head>,<body>
  • tag: <html> 與 </html>是start tag 與 end tag
  • 簡單介紹
    • <head>: 基本資訊
      • <meta charset="utf-8"/>:
      • <title>網頁標題</title>:
    • <body>: 主要內容
<!DOCTYPE HTML>  <!--告訴瀏覽器：要 HTML 的格式去讀這個檔案-->
<html> 
  <head> 
    <!--基本資訊-->
    <meta charset="utf-8"/> <!--'/'可代表'</meta>-->
    <title>網頁標題</title>
  </head>
  <body> 
    <!--主要內容-->
  <body>
</html>
Question

what is the meaning of chartset='utf-8'?
when you declare the "charset" as "UTF-8", you are telling your browser to use the UTF-8 character encoding, which is a method of converting your typed characters into machine-readable code.(More about Meta Charset)


HTML 最早存在意義：Headers, Paragraph

  • headers: 主標題、副標題、小標題
  • paragraph: 文字段落
  • Lorum ispum: 亂數假文，用於測試版面長相

常見的標籤：div, span

  • <div>: 把同一個區塊的東西包起來，看起來 <h2> 和 <p> 是同一組。優點就是以後的 CSS 可以對某一個標籤修改背景顏色、字體顏色。
  • <span>: 跨度。用在文字內

比較：<div> 內前後會空行隔開，<span> 不會前後左右隔開。

舉例如下：

H3 title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

since
the 1500s


說明:
<!-其中standard被 span 包起來，since 被 div 包起來-> <!-可以發現：div 內前後會空行隔開，span 不會前後左右隔開。->

顯示圖片： img

<img alt='替代文字' title='滑鼠移過去圖片顯示的文字' src='網址'>
  • <img></img>
<img src='' alt='' title>
  • 標籤(tag): <img>
  • 屬性（attribute): alt、title、src
      1. <alt>: 當圖片無法顯示時，會顯示文字來替代，alt就是替代文字的部分。
      2. <title>: 當圖片滑鼠點上去的時候，會顯示圖的標題。
      3. <src>: 圖片的來源(source)

顯示清單：ul, ol, li

  • <li>: 清單項目
  • <ul>: bullet 未排序圓點清單
  • <ol>: 有順序的清單

保留完整格式：pre

  • <pre>: 保留完整格式。
  • <br>: 換行

表格必備標籤

  • <table>: 表格
  • <tr>: table row
  • <td>: table cell
  • <th>: table header

anchor 錨點

<a>: anchor 錨點
href: hypertext reference
功能： 超連結
  1. 連到網頁外面的位置

舉例：
take me to google

<a href='www.google.com'>take me to google</a>

    (1) 屬性：
        a. target='_self' 為預設，會直接從此頁面連到新的頁面。
        b. target='_blank' 會打開新的分頁。

  2. 連到網頁內的位置

take me to heading 1
<!-HackMD <a> 移動到 h1 失敗，不知道是 HackMD 的問題還是 <a> 寫錯。->

<a href='#h1'>take me to heading 1</a>

語意化元素： semantic elements

  • <main>:
  • <nav>: navigation 導覽列
  • <footer>: license copy right 網頁資訊等等。

人或機器，一眼從 html 檔案或者機器裡，就可以從標籤判斷。

補充連結：
a.   MDN Semantics
b.   New Semantic Elements in HTML5

嵌入網頁 iframe

伺服器在裡面有設定X-Frame-Options 禁止不信任的人，存取網頁，因為有些人不想要讓別人有偷別人網頁的動作。所以iframe 不常使用，通常大網站都會擋住 iframe。



<iframe src='www.google.com' width="100%" heigth='500px'>
<!--使用 google 網址的話，會空白一片，詳細說明如上-->

嵌入網頁的話，可以在網頁內做導覽。
注意事項：

表單 Form

以此為例：






<form>
  性別：<input type='radio' name='gender' id='male'></input><label for='male'>male</label>
       <input type='radio' name='gender' id='female'></input><label for='female'>female</label>
       <input type='radio' name='gender' id='others'></input><label for='others'>others</label>
</form>
  • <input type='text'>
    • text: 輸入文字
    • password: 密碼不會顯示字母、數字
    • email: 有信箱格式的自動檢查
    • date: 選擇日期
    • radio: 圓圈勾選
      • 點選文字也可以勾選：
        再在<input>加入 id 屬性(attribute) 搭配 <label for>
      • 選單框起來成為一個group：
        再在選單內的個別選項的<input>加入同一種 name 屬性(attribute)，就可以將選單內 group 起來。
    • checkbox: 勾勾框
      • 同 radio。

詳細舉例如下：

與SEO有關的標籤—— meta tag

目標：幫助搜尋引擎理解網頁，搜尋引擎更理解網頁，可以讓網頁在搜尋引擎排名更前面。

  1. <meta name='keywords'>
  2. open Graph Protocal: 另個協定，大多是 Facebook使用
  3. json-ld: 通常是 google engine 在看（如下方圖r解說）。
  4. robots.txt: 告訴網頁爬蟲哪些可以爬蟲，哪些不行
  5. Sitemap.xml: 可以把網站中的每個網址放上去，搜尋引擎就知道需要爬蟲爬哪些網站。
    6.<link ... hreflang='en'>：
  6. <meta property='al:ios:app_name'>：
    補充：

幫助搜尋引擎理解網頁

SEO 全名：Search Engine Optimization 搜尋引擎優化。
目標：幫助搜尋引擎理解你的網頁
範例：trip adviser 鼎泰豐101店

  • <meta name='keywords'>
    • keywords: 告訴搜尋引擎關鍵字有哪些，類似 hash tag。其中網頁的 title 也滿重要的。
    • description: 告訴搜尋引擎簡介容


<meta name="keywords" content="信義區鼎泰豐(101店), 餐廳, 餐廳評論, 食物, 用餐">
<meta name="description" content="鼎泰豐(101店)(信義區): 讀讀4,657則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,557家餐廳中排第11名。">

og(open protocal)

  • <meta property='og:title'>
    • og 全名為 open protocal，幫助 SEO、爬蟲更瞭解網頁會用到的 tag，為了讓社群軟體更瞭解網頁。
    • og 系列，大多是 Facebook 上在使用的，通常這個連結分享到 FaceBook 的時候，會有什麼圖片（og:image）、標題（og:title）、內容（og:description）
      等的設定。
    • og:title
    • og:description
    • og:image
    • 等等





<meta property="og:title" content="鼎泰豐(101店) (信義區) - 餐廳/美食評論 - Tripadvisor">
<meta property="og:description" content="鼎泰豐(101店)(信義區): 讀讀4,657則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,557家餐廳中排第11名。">
<meta property="og:image" content="https://media-cdn.tripadvisor.com/media/photo-s/15/f6/bd/b4/must-try-soup-dumplings.jpg">
<meta property="og:image:width" content="550">
<meta property="og:image:height" content="413">

json-ld

  • json-ld important
    • json-ld 全名： JSON for Linking Data
    • 目的：固定格式化的方法來描述網頁。因為機器看不懂我們一般看的網頁，需要解碼，如果今天使用的是機器提供的格式化，機器一看就看的懂結構與內容。可以用於描述餐廳、景點等等。
    • 舉例：


























<script type="application/ld+json">
{
  "@context":"http://schema.org",
  "@type":"FoodEstablishment",
  "name":"鼎泰豐(101店)",
  "url":"/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html",
  "image":"https://media-cdn.tripadvisor.com/media/photo-s/15/f6/bd/b4/must-try-soup-dumplings.jpg",
  "priceRange":"$$ - $$$",
  "aggregateRating":{
    "@type":"AggregateRating",
    "ratingValue":"4.5",
    "reviewCount":"4657"
  },
  "address":{
    "@type":"PostalAddress",
    "streetAddress":"市府路45號 B1",
    "addressLocality":"信義區",
    "addressRegion":"",
    "postalCode":"110",
    "addressCountry":{
      "@type":"Country",
      "name":"台灣"
    }
  }
}
</script>

json-ld 通常給 google 看

圖：通常 json-ld 給 google 看，如上圖紅色蠟筆框框

robots.txt

給網頁爬蟲看的檔案，通常放到根目錄底下。如：https://www.tripadvisor.com.tw/robots.txt

sitemap.xml
  • sitemap: 爬蟲的時候，還要找有哪些網頁，這個 sitemap 提供整個網站的地圖，就不需要自己去找有哪些網頁。
  • 舉例：mediam 某一天的 sitemap，檔案格式為 xml，把某一天所有的網址塞進 xml 檔案，確保網站上的每一個頁面，在 SEO 搜尋引擎上都搜尋的到。

<link ... hreflang='en'>

跟搜尋引擎說：這個網頁有分英文跟中文，利用這個 tag 跟搜尋引擎說這是同一個頁面，不同語言，所以在網頁裡面給的評分，就會加在一起，不會分開計算。




<link rel="alternate" hreflang="en" href="https://www.tripadvisor.com/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">
<link rel="alternate" hreflang="fr-CA" href="https://fr.tripadvisor.ca/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">
<link rel="alternate" hreflang="ja" href="https://www.tripadvisor.jp/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">

<meta property='al:ios:app_name'>

如果使用 iPhone safari 觀看 tripadvisor，可能看一看就會跳出「要不要下載 tripadvisor」的 app，




<meta property="al:ios:app_name" content="TripAdvisor"> 
<meta property="al:ios:app_store_id" content="284876795">
<meta property="al:ios:url" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762">

在 iPad 或 iPhone 瀏覽的話，使用 twitter 瀏覽的話，





<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="twitter:app:url:ipad" name="twitter:app:url:ipad" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762">
<meta property="twitter:app:url:ipad" name="twitter:app:url:ipad" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762">

補充：

  • SEO team 和工程師相互配合
  • 原生流量（流量從 SEO 獲得） v.s. 付費流量（付錢購買獲得的流量）
  • SEO 補充先知道就好，以後公司要做 SEO 優化的話，再研究這些 tag。

escape: 該怎麼顯示標籤？

想要在 html 上以純文字顯示標籤（ <div> ），但是在瀏覽器上會被解析為標籤（即 escape 跳脫），就是字元不見。以其他顯示顯示字元，而不是當作標籤。
舉例：
<div></div> 要讓這個標籤以純文字的形式，顯示在 html呢？

&lt;div&gt;&lt;/div&gt;
tags: MTR05 Lidemy 學習筆記
Last changed by 
 
jeansnote
0
166

Read more

[MTR05] 程式導師實驗計畫第五期

大綱 :::spoiler Part 1 程式基礎（week 01 ~ week 05） [ ] 建立良好學習心態 [ ] 學習版本控制 [ ] 學習網路基本知識 [ ] 學習 JavaScript 基礎語法及相關知識 ::: :::spoiler Part 2 網站開發（week 06 ~ week 10）

Mar 13, 2022
HTML

HTML element 1. <pi> : a paragraph of text 2. <h1> : main header on a page 3. <img> : embeds an image 4. <form> : a form HTML skeleton <!Doctype html> ! 標誌，宣告這是一個html的code <html> ! 必包含1 head & 1 body <head>

May 26, 2021
[FE101] 前端基礎：CSS

[TOC] CSS= Cascading Style Sheets 階層式樣式表 CSS 基礎 1: Selector CSS selector 有三種使用 CSS 的方法： 「很少用」直接寫在 html 裡面

May 26, 2021
Read more from jeansnote
Published on HackMD