HTML 紀錄

紀錄常用的
HTML -> Hyper Text Markup Language (超文本標記語言)

HTML - table 表格

thead table 頭
tbody table 身體
tfoot table 腳
th 預設是粗體置中，主要用在表格標題
td 單格
tr 整行 (整列)
colspan 水平合併
rowspan 垂直合併

title

html

<table>
  <thead>
    <tr>
        <th>table標題</th>
        <th>table標題2</th>
　   </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">這裡是第一行</td>
    </tr>
　  <tr>
　     <td>這裡是第二行的第一個欄位</td>
　     <td rowspan="2">這裡是第二行的第二個欄位</td>
　  </tr>
    <tr>
      <td>這裡是第三行的第一個欄位</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
　     <td>這裡是第四行的第一個欄位</td>
　     <td rowspan="2">這裡是第四行的第二個欄位</td>
　  </tr>
  </tfoot>
</table>

HTML - form 表單

可參考 -> https://www.w3schools.com/html/html_form_input_types.asp

display 預設為 inline 屬性

html

<form action="/searchList" method='post' enctype="application/x-www-form-urlencoded">
    <input type="text" name='searchText' id='text' value = ''>
    <input type="submit" id='send' value='送出'>
</form>

屬性	值	描述
enctype	application/x-www-form-urlencoded	在發送前編碼所有字元（預設）
	multipart/form-data	不對字元編碼在使用包含文件上傳控件的表單時，必須使用該值
	text/plain	空格轉換為”+” 加號，但不對特殊字元編碼
	application/json	json 傳送物件資料要轉成 ‘字串’ 傳送
accept	MIME_type	HTML 5 中不支持可以用副檔名來指定可接受的檔案類型
accept-charset	charset_list	規定服務器可處理的表單數據字符集
action	URL	提交表單時向何處發送表單數據(詢問後端工程師要在哪驗證)
autocomplete	on、off	規定是否啟用表單的自動完成功能
method	get、post	用於發送 form-data 的 HTTP 方法
name	form_name	傳送給後台串連的名子
novalidate	novalidate	如果使用該屬性則提交表單時不進行驗證
target	_blank、_self、_parent、_top、framename	規定在何處打開 action URL
value	form_value	傳送給後台的值

form 常用操作

title

input type

required 自動驗證
pattern=”[A-z]{3}” 自訂驗證規則

html

1
2
3

<input type="text" name='searchText' id='text' value = '' required pattern="[A-z]{3}">
<input type="submit" id='send' value='送出’>
<input type="file" accept=".pdf" />

radio 單選題

html

1 2	<input type="radio" name="gander" value="male">Male <input type="radio" name="gander" value="female">Female

checkbox 多選題

html

1
2
3

<input type="checkbox" name="intersts" value="reade">read
<input type="checkbox" name="intersts" value="sleep">sleep
<input type="checkbox" name="intersts" value="eat">eat

label (label for)
- 可用在點選文字提升UX體驗
- 用 id 來對應
- label 標籤的特性包在任何 input 標籤外面，點擊 label 就等於點擊 input
- 利用這個特性，將 label 標籤包在 input 上傳按鈕外，再將 input 上傳按鈕隱藏起來，點擊依然有效
- 使用圖片代替 input 上傳按鈕，可在 label 裡面放圖片
- input 無法設定的任何 CSS，此時可設定在 label 上

html

1 2	<label for="email">email</label> <input type="email" id="email">

select 下拉式選單

html

<select name="month">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

button

submit
- 傳送資料給後台
reset
- 將資料重整
button
- 單純按鈕無動作可與 javascript 搭配完成特殊動作

html

<input type="text">
<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">no action</button>

multiple

可同時選擇多個選項

html

<select multiple="multiple"size="4">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
</select>

textarea

title

html

// 限制 輸入內容文字長度
<textarea cols="30" rows="10"></textarea>

// 限制 textarea 被拉大的區域
<textarea cols="30" rows="10"></textarea>

textarea{
  max-width: 300px;
  resize: none;
}

HTML - 常犯的錯誤

塊級元素放入了行內元素內

html

1
2
3

<a href="#"><h1>wrong</h1></a>

<h1><a href="#">right</a></h1>

圖片 img 沒有包含設定 alt 屬性
- 幫助使用者以及搜尋引擎瞭解這張圖片有什麼意義

html

不會顯示圖片
<img src="wrong.png" alt=“”> 

會顯示圖片
<img src="right.png" alt="right picture">

用＜b＞和＜i＞標籤來達到字體加粗和斜體字的效果
- ‘效果’ 就用 CSS
- ‘文章中的重要性’，則使用＜strong＞和＜em＞標籤

html

1
2
3

<b>粗體</b> <i>斜體</i>

<strong>粗體</strong> <em>斜體</em>

使用太多的換行符號(斷行)＜br/＞
- 不要使用 <br/> 來增加文字間距，應該用 CSS 的 margin 屬性、或改用 <p> 完成這件事
- https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/br

html

休息是為了走更長遠的路 
<br/>
<br/>
真的嗎？

<p>休息是為了走更長遠的路</p>
<p>真的嗎？</p>

沒有使用標籤標題(如H1,H2,H3..)
- 常用 H1、H2、H3 和 <strong> 和 <em>，H4~H6 是我比較少用到

html

1
2
3

<h1>oh</h1>
<h2>oh</h2>
<h3>oh</h3>

HTML - 提問

DOCTYPE 有什麼作用？標準模式與混雜模式如何區分？它們有何意義?
告訴瀏覽器使用哪個版本的 HTML 規範來渲染文件，DOCTYPE 不存在或形式不正確會導致 HTML 文件以混雜模式呈現
- 標準模式（Standards mode）以瀏覽器支援的最高標準執行
- 混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後相容的方式顯示

HTML5 為什麼只需要寫 <!DOCTYPE HTML>？

HTML5 不基於 SGML（Standard Generalized Markup Language 標準通用標記語言),因此不需要對 DTD（DTD 文件型別定義）進行引用，但是需要 DOCTYPE 來規範瀏覽器行為
HTML4.01 基於 SGML，所以需要引用 DTD。才能告知瀏覽器文件所使用的文件型別，如下：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

塊級元素：<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> <p>
行內元素：<a> <span> <img> <input> <select>
空元素：<hr> <link> <meta>

頁面匯入樣式時，使用 link 和 @import 有什麼區別？

都是外部引用 CSS 方式
@import 屬於 CSS 範疇，只能載入 CSS
@import 需要在頁面完全載入以後載入，而且被 @import 引用的 CSS 會等到引用它的 CSS 檔案被載入完才載入
link 引用 CSS 時候，頁面載入時同時載入
link 方式的樣式的權重高於 @import 的權重
import 在 html 使用時候需要 <style type="text/css">標籤

介紹一下瀏覽器核心的理解？

title

可參考
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
渲染引擎
HTML 經過 HTML parser 產生 HTML DOM tree

title

CSS 經過 CSS parser 產生 CSS rules

title

進入 style 將 rules 賦予 DOM tree 產生 style tree 的元素
進入 layout 將 style tree 元素進行排版產生 layout tree

title

進入渲染顯示在應用程式上

JS 引擎
- javascript 來實現網頁動態效果的解析和執行
- 每解析和執行渲染引擎會重新渲染
- 每個動作最好在 16 ms 內完成，因為多數裝置會以每秒 60 次重新整理螢幕

HTML 語義化的理解？

去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構
有利於 SEO 和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的資訊，爬蟲依賴於標籤來確定上下文和各個關鍵字的權重
方便其它裝置解析
便於團隊開發和維護

<script> 放置的位置？

可參考
- https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/script
- https://html.spec.whatwg.org/multipage/scripting.html

title

將 <script> 放置在 <head>
- 瀏覽器在解析過程中，發現 <script> 會阻斷頁面上其他 HTML 的解析，下載完所有 <script> 在往下解析 HTML，這會導致使用者感到不順感

將 <script> 放置在 <body> 尾端
- 瀏覽器在整個 HTML 解析完成之前都不能下載 <script>，如果 HTML 很大解析完HTML，使用者依然要等待 <script> 下載並執行完成之後才能操作這個網站

async - asynchronous(非同步)
- 以非同步的方法執行
- 如果沒有 src 屬性的話，就不能用這個屬性在這種情況下，它將失去作用
- 只要下載完就執行，有可能會導致 script2.js 可能先於 script1.js 執行(載完的先跑)

1 2	<script src="script1.js" async></script> <script src="script2.js" async></script>

defer - deferred(延遲)
- 與 async 相同在 HTML 在解析時下載 <script>， <script> 會等到 HTML 載完才開始工作，而且會按照順序一個一個來，也就是說 script1.js 永遠優先於 script2.js

1 2	<script src="script1.js" defer></script> <script src="script2.js" defer></script>

HTML - table 表格

HTML - form 表單

form 常用操作

input type

select 下拉式選單

button

multiple

textarea

HTML - 常犯的錯誤

HTML - 提問

渲染引擎

JS 引擎