摘要：昨天上課的老師是超厲害的趙文博老師，主要內容是相關。下面是對昨天課程的總結趙文博老師什么是前端開發(fā)使用標準技術開發(fā)網頁或應用通常運行在瀏覽器可交互根據設計圖還原成頁面，參考產品經理的需求，再做成頁面。拼寫檢查，不是布爾值。

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

12-03 HTML 趙文博老師

使用web標準技術

開發(fā)網頁或web應用

通常運行在瀏覽器

可交互

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

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

屬性和API一定要背會

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

基本的瀏覽器結構：

UI Backend：和操作器系統(tǒng)相關的如何繪制頁面
瀏覽器引擎：

殼瀏覽器（沒有做自己的渲染引擎和JavaScript引擎，IE內核）
：360瀏覽器（急速模式：webkit,其他模式:lE引擎），UC瀏覽器，QQ瀏覽器，搜狗瀏覽器，一般都是雙內核
URL：結構：

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

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

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

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

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

HTML5設計思想：1、兼容已有內容，2、避免不必要的復雜性，3、解決現(xiàn)實的問題（支持實現(xiàn)復雜的交互，比如定位，locals），4、優(yōu)雅降級（比如，可以在canvas中寫html，如果瀏覽器中不支持canvas，就執(zhí)行canvas中的html代碼，支持就忽略繼續(xù)執(zhí)行。），5、尊重事實標準，6、用戶》開發(fā)者》瀏覽器廠商》標準制定者》理論完美。

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

HTML5中的語法：標簽不區(qū)分大小寫，推薦小寫；空標簽可以不閉合，比如input、meta；屬性可以不用引號，推薦雙引號

標簽分類：流式元素、可交互內容、段落內容、標題內容、章節(jié)內容

HTML中的文本標簽：

p、h1~h6（讀附加的文章，會影響SEO）、hr段落級別的話題切換（在一個section中講一個時期，前面幾段是一個主題，后面是一個主題，在兩個主題中間加一個

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

引用：

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

代碼：code .短代碼…，長代碼

…

網頁總體結構：

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

我因為用什么標簽？

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

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

HTML是HyperText Markup Language的簡稱，一種用戶創(chuàng)建網頁的標記語言

HTML
標準由W3C
制定和修改。

代碼：code；var 描述變量；需要kbd 用戶操作鍵盤時可以用；samp 用例的輸出。

上標和小標：sup；sub

mark：和用戶當前行為相關的突出，比如在所示結果中匹配到的詞，或者在一部分內容需要在后面引用時。

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

換行控制（盡量避免）：br 手動控制內容換行；wbr 在展示的時候，需要換行時，會在wbr出現(xiàn)的地方做一個換行的處理

div和span：找不到其他標簽用的時候

實體（Entity）字符：&?<>:?￥

省略協(xié)議： 現(xiàn)在是什么協(xié)議就會跳轉成什么協(xié)議，比如當前現(xiàn)在是http，跳轉后是http。可以節(jié)省一點字節(jié)，如果在https中引用了http的資源，瀏覽器時不會讓引用的，但是如果省略協(xié)議，瀏覽器就可以跳轉成HTTPS，就可以用了。
省略協(xié)議和host： 會自動補齊協(xié)議和host.

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

相對路徑和絕對路徑：

  絕對路徑  host省略，從跟目錄寫起，這個用的比較多。

  相對路徑
  相對路徑

頁面內鏈接（錨點）：

     到test

鏈接目標：

     當前窗口打開
     新窗口打開
     自定義abc方式

alt必須寫，比如盲人在用讀屏設備，就讀alt中的文字。圖片未加載，可以通過alt來表明圖片內容。width和height建議在html中寫。Html中的width和height不能寫單位，默認為px

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

常用圖片格式：
1、Jpg：照片，顏色種類比較多；2、Png：色彩較少時使用，png24可以辦透明；3、Gif:：適合色彩較少時，無法半透明，可以多幀做動畫；4、Webp：google新出的，照片和色彩較少的都可以使用，而且大小會比jgp和png小一些，但是有部分瀏覽器不支持，所以有兼容性問題。

table, 只要被認為是表頭都可以用th

列組（colgroup）可以一列一列的來定義樣式

表格標題，caption 必須是table的第一個元素，對盲人讀屏軟件來說要先知道這個表格做什么的

    
      


    

        

        

可以用css來繪制表格，有什么區(qū)別呢？1、用css描寫，會把表格給固定了，要調整位置很麻煩，會要把html重寫2、性能問題，如果用css，要把html加載后，再加載樣式3、語義化

使用form獲取讓用戶提供數(shù)據

type：
search,email,url，在可用性上做一些輔助，對讀屏軟件來說有區(qū)別，在手機上有區(qū)別，鍵盤的布局會不一樣，在手機上如果是search，go會變成搜索。而且有輸入驗證，比如email，會驗證郵箱格式。

novalidate：
不實現(xiàn)驗證，在。如果要自己實現(xiàn)驗證，不用默認的就寫這個：

請輸入你的名字：