筆記、[FE101] 前端基礎 HTML

#html

Posted by s103071049 on 2021-05-17

網頁到底是甚麼 ?

前言 : 甚麼是網頁 ? 網頁到底是如何呈現出來 ? 網頁的背後原理 ?

實作說明 :

下載網頁模板，打開壓縮檔
index.html => 通常是主頁面 => 拖到瀏覽器打開、拖到文字編輯器打開

文字編輯器中顯示的是網頁最真實的樣貌 : 有結構的文字檔，一格一格標籤 + 文字。 html 這個網頁檔案，是透過瀏覽器渲染(render)，才呈現出人眼所看到的畫面。所以網頁是依靠瀏覽器存在。

瀏覽器 => 右鍵 => 檢查 => dev tool 。 如果改 live demo，其他人也是看不到的，網頁也算是下載到電腦裡，詳細概念 : req 、 resp

結論 : html => 瀏覽器 => 畫面，網頁就是一個純文字檔，只是瀏覽器看得懂能將他渲染出來。

HTML 基礎

HperText Markup Language 超文本標記語言 => 不是程式語言，只是有些標籤、格式，瀏覽器依據其標籤、格式將其渲染顯示

一、 HTML 基本組成

  1. 標準渲染
    第一行加上<!DOCTYPE HTML>，表示告訴瀏覽器我要用最新且最標準的 HTML 格式。不加也可以，但有時會出錯，因為瀏覽器此時會依據不同狀況進行判斷，碰到較模糊地帶不保證渲染結果正確。

  2. 成對標籤

  • <html></html> 表把整個網頁包住。
  • <head></head> 網頁基本資訊
  • <body></body> 網頁主要內容
  • 註解 <!-- 註解 -->
<!DOCTYPE HTML>

<html>
  <head>
    <meta charset='utf-8'></meta>
    <title> I am title</title>
  </head>
  <body>
    <!-- 
        HELLO
    -->
  </body>
</html>

因為 <meta charset='utf-8'></meta> 中間沒有內容，所以可以將 back slash 放到前面 <meta charset='utf-8/'>這樣也是一組。meta 標籤後面接的是屬性 attribute，名稱是 charset ，內容是 utf-8 ，表示這個網頁的編碼是 utf-8 。此外，<title> I am title</title> 為網頁標題。

二、別忘了 HTML 最早存在的意義：排版標籤 h1~h6、p

前言 : HTML 最早最常見的用途 : 顯示文章。

標題 : <h1> heading，從 h1~ h6，h 系列共有六個級別，代表不同字級不同大小。

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset='utf-8'></meta>
    <title> 我的第一個網頁</title>
  </head>
  <body>
    <!-- HELLO -->
    <h1>主標題</h1>
    <h2>副標題</h2>
    <h3>i am title</h3>
    <h4>i am title</h4>
    <h5>i am title</h5>
    <h6>i am title</h6>
  </body>
</html>

內文 : <p> paragraph。想看到更完整的內文結果，可以用 Lorem ipsum，簡稱為 Lipsum，是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。 中文的類似用法則稱為亂數假文、隨機假文。

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset='utf-8'></meta>
    <title> 我的第一個網頁</title>
  </head>
  <body>
    <!-- HELLO -->
    <h1>網頁前端</h1>
    <h2>HTML</h2>
    <p>HTML 的介紹</p>
    <h2>CSS</h2>
    <p>CSS 的介紹</p>

  </body>
</html>

三、分組標籤 : div 與 span

div 會幫你換行， span 可以跟其他東西處在一起。
<div> division : div 標籤的左右兩邊在螢幕顯示上都不會有東西，自己一個人就是一整行。與 css 結合效果強大。
<span> 跨度 : 用在文字裡面。通常表示，我之後想對我框起來的字，做一些事情。 span 標籤的左右兩邊是可以有東西的。

四、顯示圖片就靠它：img

<img> image : 放在標籤內的東西，都是內容，通常內容會直接顯示在網頁上，所以圖片是自成一組的標籤。 滑鼠移動到圖片上，會顯示圖片的標題； alt 是替代，表示當我的圖片沒有顯示出來，就顯示替代內容。
<img alt='替代文字' title="圖片名稱" src ='圖片位址' />

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset='utf-8'></meta>
    <title> 我的第一個網頁</title>
  </head>
  <body>
    <!-- HELLO -->
    <h1>網頁前端</h1>

    <div>
          <h2>HTML</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <span>ullamco</span> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <img src = 'https://avatars.githubusercontent.com/u/47899484?v=4'/>
    </div>

    <h2>CSS</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </body>
</html>

五、顯示清單 (List) ：ul、ol 與 li

排序有無，指的是前面顯示出的是否有序號。
<ul> unordered list

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset='utf-8'></meta>
    <title> 我的第一個網頁</title>
  </head>
  <body>
    <!-- HELLO -->
    <h1>網頁前端</h1>

    <div>
          <h2>HTML</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <span>ullamco</span> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <img alt='我是圖片' title="圖片" src ='https://lh3.googleusercontent.com/ogw/ADGmqu8tE0PhSRmExeh0xemWy8Jf__dFdlRk0NUL9lnj-g=s32-c-mo' />
    </div>
    <ul>
        <li>h1</li>
        <li>h2</li>
        <li>h3</li>
    </ul>

    <h2>CSS</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </body>
</html>

<ol> ordered list : 會自己幫你排序，加序號。

    <ol>
        <li>h1</li>
        <li>h2</li>
        <li>h3</li>
    </ol>

<li> list item : 清單底下的各個 item

六、保留完整格式：pre 與 br

問題 : 瀏覽器渲染時，換行、空白、多個空白也只會被解讀成一個空白。

    <p>
    function main() {
      console.log("hellp")
    }
    </p>

如果需要換行，將 <p></p> 換成 <pre></pre> 這個標籤。
<pre> preformatted text : 為了解決上述問題，會使用<pre></pre>這個標籤。他會幫我格式化，所以我在瀏覽器呈現的是我在 html 的格式。用途 : 顯示程式碼、顯示其他區塊。

<br> line break : 如果不用<pre></pre>標籤，我又想換行可以怎麼做 ? 我們可以放一個 <br> 標籤或 <br/> ，也就是後面的 back slash 可加可不加。

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut<br>
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

七、表格必備標籤：table、th、tr 與 td

<table> 表格 : 首先，先用 <table></table> 框起來，表示表格。
<tr> table row : 再來，是以 row 為單元。
<td> table cell : 在<tr></tr>裡的每一個 cell 都放<td></td>，(畫出row 後再畫 column )
<th> table header : 變粗體，通常運用在第一個 table row 會顯示這個 table column 的標題。
備註 : 上述標籤預設處理都會經過排版。表格可與 css 結合，例如格線。如果不用此標籤，可以透過寫一堆 css 達到相同效果，處理排版問題。

    <table>
        <tr>
            <th>姓名</th>
            <th>月薪</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>吳xx</td>
            <td>70000</td>
            <td>25</td>
        </tr>       
        <tr>
            <td>林xx</td>
            <td>200000</td>
            <td>28</td>
        </tr>   
        <tr>
            <td>王xx</td>
            <td>200000</td>
            <td>30</td>
        </tr>   
    </table>

八、帶我走，到遙遠的以後：a

<a> anchor 錨點，href : hypertext reference : 用途 (1) 連到網頁外面的位置、用途 (2) 連到網頁裡面的位置。

超連結示範 : 用途 (1) 連到網頁外面的位置

<a href:"網址">超連結說明文字 </a>

<a href="https:google.com"> take me to google </a>
<a href="https:google.com" target='_self'> take me to google </a>
<a href="https:google.com" target='_blank'> take me to google </a>

除了 href 的屬性外，尚有 target 屬性，target 預設值為 "_self，表示當你點擊後說明文字後，你會從現在的頁面出發到外面的頁面，另外有"_blank，表示開啟一個新的分頁，然後帶你跳到外面的頁面。

索引頁示範 : 用途 (2) 連到網頁裡面的東西，

要帶到指定的地方前，要先在 html 加上一個屬性 id。網站上導覽列的作法就是利用類似的概念。

<h1 id='p1'>網頁前端</h1>
    <a href="https:google.com" target='_self'> take me to google </a>
    <!-- 省略 <p></p> -->

 <h2 id='p2'>CSS</h2>
    <a href=#p1>take me to p1</a>
    <!-- 省略 <p></p> -->

九、語意化的 UI 標籤：main、nav、footer 等等

包起來，頁面並不會有任何變化，頁面呈現效果等同於用 div 包。但使用這些 Semantic elements 語意化元素，可以讓機器、人更好識別與閱讀，當我在看這個標籤，我就知道它的用途。更多的語意化元素，詳見參考資料。不用語意化元素也可以，但用了會更好。

<main> : 將網頁中最主要元素給包起來。

<main>
 <!--將網頁中最主要元素給包起來 -->
</main>

<nav> navigation 導覽列

<nav>
 <!--將導覽列包起來 -->
</nav>

<footer> : 網頁最底端，會有這個網頁是誰所有、licenses、版權，存放這類資訊的標籤叫做 footer

<footer>
 <!--將 footer 的資訊包起來 -->
</footer>

十、直接用別人的網頁：iframe

<iframe> 嵌入網頁 : 當我點擊嵌入的網頁，並不會影響外面的網頁。但並不是所有網頁都會允許 iframe 做嵌入。舉例來說，我的 src 填 google網址，打開dev tool 就會出現 Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
某些網站的伺服器會 set 'X-Frame-Options'，來防止他人用 iframe 存取網頁。故這個標籤使用頻率並不高。

 <iframe src='https://s103071049.coderbridge.io/2021/05/03/%E7%AD%86%E8%A8%98%E3%80%81js102-%E5%8D%87%E7%B4%9A%E4%BD%A0%E7%9A%84-javascript-%E6%8A%80%E8%83%BD%EF%BC%9Aes6-+-npm-+-jest/' width='100%' height='500px'/>

十一、表單相關標籤：form、input、textarea

<input> 輸入框 : 表單中讓你填東西的地方就叫做 input, 它有各種不同的 type，例如 : text、password、email、date、radio、checkbox

一行一個 div 它的結構會更明確。而且刻出來 input 會有上到下的關係，因為 div 會換行，它不會讓同一個元素排在一起。

password : 會將你的字碼掉，但 server 會收到正確的值。
email : 在送出表單時，部分瀏覽器會進行驗證。
radio : 單選框。

<!--因為這兩個不是同個組，所以可以複選 -->
        <div>
         性別: <input type='radio'/>男性
              <input type='radio'/>女性
        </div>  
<!--解決方法 : 再加一個 attribute，將他們放到同一個組別底下 -->
        <div>
         性別: <input type='radio' name='gender'/>男性
              <input type='radio' name='gender'/>女性
        </div>  
<!--
框很小，可以點字就完成了嗎 ? 解決方式 : label，用 label 將字括起來，再將前面的標籤加上 id，最後幫 label 加上 for ，表示這個 label 是要給這一個單選框使用
-->
        <div>
         性別: <input type='radio' name='gender' id='male'/><label for='male'>男性</label>
               <input type='radio' name='gender' id='female'/><label for='female'>女性</label>
        </div>

checkbox : 複選框。

        <div>
         興趣: <input type='checkbox' id='sports'/><label for='sports'>運動</label>
               <input type='checkbox' id='reading'/><label for='reading'>閱讀</label>
               <input type='checkbox' id='work'/><label for='work'>工作</label>
        </div>

實作 : 聯誼報名表單

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset='utf-8'></meta>
    <title>聯誼報名表單</title>
  </head>
  <body>
    <!-- HELLO -->
      <form>
        <div>
         姓名: <input type='text'/>
        </div>
        <div>
         密碼: <input type='password'/>
        </div>
        <div>
         email: <input type='email'/>
        </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>
               <input type='checkbox' id='work'/><label for='work'>工作</label>
        </div>       
        <div>
          <input type="submit" value='送出表單'/>
        </div>
      </form>



  </body>
</html>

十二、SEO 與相關標籤：meta tag

SEO (Search Engine Optimization) 搜尋引擎優化

SEO === 幫助搜尋引擎理解我的網頁。目前搜尋引擎已經很智慧，可以利用資料分析了解你的網頁在說甚麼，但更好的做法是 : 主動跟搜尋引擎講，這裡有你要的東西，你來拿吧!
以Trip advisor 鼎泰豐進行說明 :

右鍵 => 檢視網頁原始碼　
(1) <meta> keywords, description
你可以告訴搜尋引擎，這個網頁的簡介(description)是甚麼，它就會在搜尋網頁上出現。你還可以告訴它，這個網頁的關鍵字有哪些(keywords)，有點像是 hash tag

property: og 是甚麼東西 ? og === open graph protocol，目的是讓其他 social media 更了解你的網頁，才有這個東西的出現。

og 系列通常是 fb 在用。所以我們可以去fb 偵錯工具，去檢視這個網頁在 fb 眼中是甚麼樣子。所以你可以修改相對應的 og 欄位，讓臉書更好的抓取你的網頁。
(2) JSON-ld JSON for linking data
與 og 有點像，目的都是讓網頁使用者用固定、格式化的東西，去描述網頁。格式化、有結構的東西，可以更好幫助機器理解這是什麼樣的內容。通常是 google 在看的

相關資料 : json-ld
(3) robots.txt 給網頁爬蟲看的檔案
通常會放在根目錄底下。https://www.tripadvisor.com.tw/robots.txt
disallow 表示拜託搜尋引擎不要爬這些網頁，Allow 你可以爬這些。robots.txt 會告訴網頁爬蟲，你可以做甚麼事，不可以做甚麼事。 Sitemap.xml 用途為網站的地圖，因為網站很大有很多連結，要如何讓搜尋引擎知道要爬那些連結 ? 就會透過 Sitemap 。如果給連結，爬蟲就不用一個一個去跑，只要爬你給的 Sitemap。

結論
搜尋引擎優化就是幫助搜尋引擎理解網頁。我們可以透過 1.<meta> keywords, description 2. open graph protocol 3. JSON-ld JSON for linking data 4. robots.txt 給網頁爬蟲看的檔案 + Sitemap.xml
如果使用這些標籤或方式，可以讓搜尋引擎更好理解你的網頁，網頁的排名也會較前面。

補充 :
rel="alternate" 這個標籤，告訴搜尋引擎我還有給其他國家用的網址。它可以利用這個 TAG 和搜尋引擎說他們其實相同只是不同語言，那它給的搜尋分組就會集合在一起，不會分散掉。

下列標籤表示，我這個網頁有 app ，它的 app id 、名稱是甚麼 ? 用相對應的瀏覽會有其他效果。

google 有提供小工具 search console 可以讓你看你擁有網頁的成效，它在 google 上的曝光、每天點擊人數

十三、Escape：該怎麼顯示標籤？

該怎麼在網頁裡面顯示標籤 ? 如果我想顯示的內容就是標籤，該怎麼辦 ? A : 使用 Escape (跳脫)，跳脫後瀏覽器會將它當作純文字顯示。
如果有下面三種符合，就將他們換掉。
& => &amp;
< => &lt;
> => &gt;


#html

s103071049




Related Posts

留言板、前端串接 API

留言板、前端串接 API

 s103071049
v-if / v-else 使用細節

v-if / v-else 使用細節

 hoyi-23
[Day 04] - Vault dynamic secrets engine - AWS

[Day 04] - Vault dynamic secrets engine - AWS

 alee801223

Comments