360奇舞特訓營（一）：HTML

昨天去上了第一節360奇舞前端培訓的第一節課，見着了仰慕已久的月影大大，內心超級超級激動。昨天上課的老師是超厲害的趙文博老師，主要內容是HTML相關。之前一直以爲HTML本身學得還好，昨天上完課後就感受本身還有不少地方不足，特別是不少細節方面的把控，以及不少經驗層面上技術的缺失。下面是對昨天課程的總結：

12-03 HTML 趙文博老師

什麼是Web前端開發

• 使用web標準技術

• 開發網頁或web應用

• 一般運行在瀏覽器

• 可交互

• 根據設計圖還原成頁面，參考產品經理的需求，再作成頁面。交互：使用HTTP接口。

• 前端：功能、設計（界面）、兼容性、安全性、性能（打開的快不快）、用戶體驗（作一個前端就是作一個用戶體驗）、可用性（無障礙性，作出來的產品對於全部的人都能很順利的訪問到，包括有疾病的人，好比色盲、盲人、手腳不便的人。設備性：可能在電腦上訪問正常，手機上訪問不正常，好比國內瀏覽器省流量的模式，不少圖片不能下載）

屬性和API必定要背會

瀏覽器：chrome,firefox,safari,opera,ie

基本的瀏覽器結構：

UI Backend：和操做器系統相關的如何繪製頁面
瀏覽器引擎：

殼瀏覽器（沒有作本身的渲染引擎和JavaScript引擎，IE內核）
：360瀏覽器（急速模式：webkit,其餘模式:lE引擎），UC瀏覽器，QQ瀏覽器，搜狗瀏覽器，通常都是雙內核
URL：結構：

編輯器：Atom,Visual studio code,vim,sublime text

HTML:簡介和文本

HTML：使用標籤來描述頁面的內容和結構。HyperText Markup Language。

Doctype:1.指定HTML頁面使用的標準和版本，二、瀏覽器根據 doctype 來決定使用哪種渲染模式。渲染模式：怪異模式Quirks Mode，準標準模式Almost Standard Mode（比較嚴苛？當時每太聽清，也沒找到相應的資料，找到了再補充），標準模式Standard Mode。不寫doctype就到怪異模式。

XHTML 1.0,2000：用XML語法從新定義HTML，語法嚴格要求。

XHTML 2.0：不兼容歷史（舊的頁面在瀏覽器中徹底不能用），去除樣式類標籤。去除img、a，完全修改Form，開發者不歡迎，瀏覽器不支持。

HTML5：

HTML5設計思想：一、兼容已有內容，二、避免沒必要要的複雜性，三、解決現實的問題（支持實現複雜的交互，好比定位，locals），四、優雅降級（好比，能夠在canvas中寫html，若是瀏覽器中不支持canvas，就執行canvas中的html代碼，支持就忽略繼續執行。），五、尊重事實標準，六、用戶》開發者》瀏覽器廠商》標準制定者》理論完美。

HTML5中的變化：doctype、meta，新增語義化標籤和屬性，去掉純展現性標籤，canvas、video、audio、離線、本地存儲、拖拽等

HTML5中的語法：標籤不區分大小寫，推薦小寫；空標籤能夠不閉合，好比input、meta；屬性能夠不用引號，推薦雙引號

標籤分類：流式元素、可交互內容、段落內容、標題內容、章節內容

HTML中的文本標籤：

• p、h1~h6（讀附加的文章，會影響SEO）、hr段落級別的話題切換（在一個section中講一個時期，前面幾段是一個主題，後面是一個主題，在兩個主題中間加一個<hr>語義，展現出來是一個橫線）;

• 列表：有序列表（ol,ol中有一個start屬性，從幾開始）、無序列表（ul）、列表嵌套（默認的一級、二級前面的圖標不同）、定義列表（dl，用來描述鍵值對，dt,dd，一個dt能夠對應多個dd，多個dt能夠對應一個dd）;嵌套規則。

• 引用：<blockquote cite=」http://....」></blockquote>長段落引用；<cite></cite>短引用，比較短，只提到書名、電影名之類的；<q></q>;
  cite和q的區別：cite表示這塊東西的來源、標題，書名，第一章之類。q引用一句話，包括的一句內容。

• 預格式化文本：pre（p中的標籤會把多個空格、換行合爲一個空格）：保留代碼中的原格式，包括換行，空格

• 代碼：code .短代碼…，長代碼<pre>…</pre>
  figure：能夠用來表示圖表，也能夠作其餘用途。<figure><figcaption>對figure的標題</figcaption></figure>

• 網頁整體結構：
  

• 內容劃分：header、nav、main、article、aside（附加的內容，去掉能看懂，若是看不懂應該放入main中）、footer

• 我由於用什麼標籤？
  

• 強調：strong: 重要性、嚴重性和緊急性（好比醫院中是否要找一個醫生嗎？是，當即，立刻。）；em：從一句話中突出某個詞語（好比是否須要找一個醫生？不，要一個護士。護士用em，強調一個詞）；b：將詞語從視覺上和其餘部分區別，好比一篇論文摘要中的關鍵詞；i：換一種語調去說一句話時，好比其餘語言翻譯，對話中的旁白

• 定義與縮寫：dfn 定義；abbr 縮寫，title屬性作進一步的解釋。好比：

<p><dfn>HTML是HyperText Markup Language的簡稱，一種用戶建立網頁的標記語言</dfn></p>

<p><abbr title="HyperText Markup Language">HTML</abbr>
標準由<abbr title="World Wide Web Consortium">W3C</abbr>
制定和修改。</p>

• 代碼：code；var 描述變量；須要kbd 用戶操做鍵盤時能夠用；samp 用例的輸出。

• 上標和小標：sup；sub

• mark：和用戶當前行爲相關的突出，好比在所示結果中匹配到的詞，或者在一部份內容須要在後面引用時。

• 插入和刪除：ins 插入；del 刪除

• 換行控制（儘可能避免）：br 手動控制內容換行；wbr 在展現的時候，須要換行時，會在wbr出現的地方作一個換行的處理

• div和span：找不到其餘標籤用的時候

• 實體（Entity）字符：& <&gt:©¥

HTML：連接

• 省略協議： 如今是什麼協議就會跳轉成什麼協議，好比當前如今是http，跳轉後是http。能夠節省一點字節，若是在https中引用了http的資源，瀏覽器時不會讓引用的，可是若是省略協議，瀏覽器就能夠跳轉成HTTPS，就能夠用了。
  省略協議和host： 會自動補齊協議和host.

• $0 當前選中的東西。 Chrome控制器中的

• 相對路徑和絕對路徑：

  <a href=」/a/b/c.html」>絕對路徑</a>  host省略，從跟目錄寫起，這個用的比較多。
  
    <a href=」a/b/c.html」>相對路徑</a>
    <a href=」../../c.html」>相對路徑</a>

• 頁面內連接（錨點）：

  <a href=#test>到test</a>

• 連接目標：

  <a href=」..」  target=」_self」>當前窗口打開</a>
       <a href=」..」  target=」_blank」>新窗口打開</a>
       <a href=」..」  target=」abc」>自定義abc方式</a>

HTML：圖片

• <img src=」/path/to/img.jpg」 alt=」替代文字」 width=」300」 height=」200」> alt必須寫，好比盲人在用讀屏設備，就讀alt中的文字。圖片未加載，能夠經過alt來代表圖片內容。width和height建議在html中寫。Html中的width和height不能寫單位，默認爲px

• 指定圖片寬高：
  不指定高寬：原圖大小顯示；指定寬度：按比縮放到指定寬度；指定高度：按比例縮放到指定高度；指定寬高

• 經常使用圖片格式：
  一、Jpg：照片，顏色種類比較多；二、Png：色彩較少時使用，png24能夠辦透明；三、Gif:：適合色彩較少時，沒法半透明，能夠多幀作動畫；四、Webp：google新出的，照片和色彩較少的均可以使用，並且大小會比jgp和png小一些，可是有部分瀏覽器不支持，因此有兼容性問題。

HTML：表格

• table, 只要被認爲是表頭均可以用th

<table border=」1」>
<caption>表格標題，caption 必須是table的第一個元素，對盲人讀屏軟件來講要先知道這個表格作什麼的</caption>
列組（colgroup）能夠一列一列的來定義樣式
<colgroup>
    <col class=」browser」>
    <col class=」..」  span=2>  <!—兩列-->
</colgroup>
<thead>
    <tr>
        <th></th>
        <td></td>
</tr>
</thead>
</table>

能夠用css來繪製表格，有什麼區別呢？一、用css描寫，會把表格給固定了，要調整位置很麻煩，會要把html重寫二、性能問題，若是用css，要把html加載後，再加載樣式三、語義化

HTML：表單

• 使用form獲取讓用戶提供數據
  <form action=」/echo」 method=」POST」> action：在用戶提交數據後，但願提交到哪一個URL。

• GET vs. POST
  一、get從服務器獲取，get是一個比較安全的操做，不會對服務器的數據有改動；post向服務器提交數據，會對服務器的數據有一些改動；二、緩存上，get有多是緩存的，post永遠不會緩存；三、數據傳輸的方式，get請求會把每個字段都放在url中，能夠一次性把請求都發給服務器，POST不會把數據放在url中，而是會進行編碼，而後把編碼後的數據存在http的body中，再發送給服務器。數據發送時分兩撥，先發送head，服務器贊成後再發送body。

• URL encode（編碼）

• HTTP method:
  GET、POST、HEAD：不會返回http內容，只返回http head、PUT、DELETE、OPTIONS：用來返回HTTP有哪些head選擇，經常使用在跨域中

• 單行文本框：<input name=」username」 value=」zhaowenbo」>

• placeholder：

• autofocus：焦點focus到要輸入的地方

• 密碼：

• 多行文本框：

• 輸入驗證：required：必填的；想要更好的提示語句在js中寫，原生的驗證及時性不是很好.

<form action=」/echo」>
  <p><input  required  minlength=」2」  maxlength=10」  placeholder=」2-10位」></p>
  <p><input  pattern=」1\d{10}」  placeholder=」輸入手機號」></p>
</form>

• type：
  search,email,url，在可用性上作一些輔助，對讀屏軟件來講有區別，在手機上有區別，鍵盤的佈局會不同，在手機上若是是search，go會變成搜索。並且有輸入驗證，好比email，會驗證郵箱格式。

• novalidate：
  不實現驗證，在。若是要本身實現驗證，不用默認的就寫這個：<form action=」/echo」 novalidate>

• radio：單選框

• checkbox:複選框

• laber：
  關聯文字，使點擊文字也能夠點擊到。以及讀屏軟件能夠同label知道輸入的是什麼。兩種方式：

<p><label for=」name」>請輸入你的名字：</label></p>
  <p><input id=」name」 type=」」 name=」」>

• select：
  實現多選：加一個 multiple 屬性；size屬性，決定露出來幾個選項，默認1個

• 分組： optgroup

• hidden：
  不在界面上展現出來，隱藏。type=」hidden」

• 文件選擇：multipart/form-data：把提交的file分爲幾段
  同時選擇多個文件：<input type=」file」 name=」resume」 multiple>;對選擇的文件進行一個篩選： <input type=」file」 name=」resume」 multiple accept=」image/*」> // 只能選擇圖片;能夠不用原生的上傳，使用js

<form action=」/echo」 method=」post」 enctype=」multipart/form-data」>
<input type=」file」 name=」resume」>

date & time：
<input type=」date」>
datetime-local
month
week
number &range：
input type=」number」 min=」0.5」 max=」2.5」 step=」0.01」 name=」height」 value=」」
input type=」rage」
<output>元素：對用戶輸入的輸出結果 output for=」weight」
color:
<input type=」color」>
button：
type屬性：submit,button（沒有默認行爲，要用js來實現）,reset。默認值是submit
回車提交：？？？
只要有input，按下回車後就會提交，瀏覽器自動觸發？？
<button onclick=」alert(1)」>不指定type</button>
觸發控件：
disabled, readonly：對readonly來講會提交到服務器，可是隻讀。disabled不能提交到服務器
表單設計：
幫助用戶不出錯（能讓選的就不讓填，對填的能夠進行一些輔助，好比輸入郵箱的時候提示補全）
儘早提示錯誤
擴大選擇/點擊區域
空間較多時要分組
分清主要動做和次要動做
傳統上，用p把input包裹起來比較多。

HTML：擴展知識
全局屬性：（幾乎全部的元素均可以擁有的屬性）
一、accesskey & tabindex
accesskey 能夠給每一個元素指定一個key，當用戶在鍵盤上按下ctrl+alt+這個key，就至關於點擊了這個元素。如何告訴給用戶能夠這樣按呢？有的插件當按下Ctrl時，會在旁邊顯示。
tabindex 經過table鍵能夠控制頁面元素。若是作得不是很好，會出什麼問題呢？
二、id,class,style
三、contenteditable & spellcheck
contenteditable : 頁面是能夠被修改的，而是是html的，是富文本的，不是text的。
spellcheck：拼寫檢查，不是布爾值。這樣寫spellcheck=」」
四、語言lang & dir
lang：在大網站有多語言版本時，頗有用。
dir：文字書寫方向，默認是從左到右的書寫順序。從右到坐時：dir=」rtl」
五、title
鼠標放上去，能夠看看法釋或者徹底的文字。體驗不是很好，由於有延遲。因此通常本身作
六、hidden
<p hidden>你看不見我</p> 通常用於暫時隱藏，等待一個時機顯示出來。和display:none相似，可是在恢復元素的時候，要考慮是block，仍是inline-block。使用hidden屬性還有一個是有利於讀屏軟件。
七、無障礙性
八、web開發者應該作的事情
WCAG（比較老，更多的關注的是內容上的規範）
ARIA（Accessible Rich Internet Applications）對Web的富應用作了一個可用性的規範，無論用什麼標籤來實現這個功能，能夠加上aria屬性，來告訴輔助性軟件這個標籤是作什麼的
九、ARIA
指定role
<ul role=」menubar」>
<li role=」menulist」>
十、提高無障礙性
爲img提供alt屬性
noscript：HTML標籤，對於不支持JavaScript的瀏覽器，給予一個替代性的方案或者一個提示
input和label對應
圖形驗證碼與語音驗證碼
文字和背景有足夠對比度
鍵盤可操做
十一、語義化
HTML中的元素、屬性及屬性值都擁有某些含義
開發者應該遵循語義來編寫HTML
十二、爲何語義化很重要？
提高代碼可讀性、可維護性
搜索引擎優化
提高無障礙性
1三、擴展HTML
meta標籤：對整個頁面相關的通常都寫在meta中
data-*屬性：來存儲自定義的屬性， $0.dataset能夠用語獲取自定義屬性的值
<li data-id=」1」>apple</p>
<li data-id=」2」>banana</p>
microdata：告訴瀏覽器，這個實體是一個什麼東西。Itemscope itemtype itemprop，一個實體
HTML5中的一個規範
在HTML中經過屬性嵌入格式化數據
提供給搜索引擎、瀏覽器（插件）使用。好比在搜索引擎中搜索一個飯館，能夠在搜索頁面中，看見提取出來的信息：

JSON-LD：
  把上面的代碼結合到js中

HTML編碼規範：html valid..推薦兩個工具：emmet,markdowncaniuse.com