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

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

12-03 HTML 趙文博老師

使用web標(biāo)準(zhǔn)技術(shù)

開發(fā)網(wǎng)頁或web應(yīng)用

通常運(yùn)行在瀏覽器

可交互

根據(jù)設(shè)計(jì)圖還原成頁面，參考產(chǎn)品經(jīng)理的需求，再做成頁面。交互：使用HTTP接口。

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

屬性和API一定要背會

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

基本的瀏覽器結(jié)構(gòu)：

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

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

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

HTML：使用標(biāo)簽來描述頁面的內(nèi)容和結(jié)構(gòu)。HyperText Markup Language。

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

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

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

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

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

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

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

HTML中的文本標(biāo)簽：

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

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

引用：

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

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

…

網(wǎng)頁總體結(jié)構(gòu)：

內(nèi)容劃分：header、nav、main、article、aside（附加的內(nèi)容，去掉能看懂，如果看不懂應(yīng)該放入main中）、footer

我因?yàn)橛檬裁礃?biāo)簽？

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

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

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

HTML
標(biāo)準(zhǔn)由W3C
制定和修改。

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

上標(biāo)和小標(biāo)：sup；sub

mark：和用戶當(dāng)前行為相關(guān)的突出，比如在所示結(jié)果中匹配到的詞，或者在一部分內(nèi)容需要在后面引用時。

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

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

div和span：找不到其他標(biāo)簽用的時候

實(shí)體（Entity）字符：&?<>:?￥

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

$0 當(dāng)前選中的東西。 Chrome控制器中的

相對路徑和絕對路徑：

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

  相對路徑
  相對路徑

頁面內(nèi)鏈接（錨點(diǎn)）：

     到test

鏈接目標(biāo)：

     當(dāng)前窗口打開
     新窗口打開
     自定義abc方式

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

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

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

table, 只要被認(rèn)為是表頭都可以用th

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

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

    
      


    

        

        

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

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

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

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

請輸入你的名字：