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

12-03 HTML 趙文博老師

什么是Web前端開發(fā)

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

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

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

可交互

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

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

屬性和API一定要背會(huì)

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

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

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

瀏覽器引擎：

殼瀏覽器(沒有做自己的渲染引擎和JavaScript引擎，IE內(nèi)核)

：360瀏覽器(急速模式：webkit,其他模式:lE引擎)，UC瀏覽器，QQ瀏覽器，搜狗瀏覽器，一般都是雙內(nèi)核

URL：結(jié)構(gòu)：

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

HTML:簡(jiǎn)介和文本

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

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

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

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

HTML5：

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

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

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

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

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

p、h1~h6(讀附加的文章，會(huì)影響SEO)、hr段落級(jí)別的話題切換(在一個(gè)section中講一個(gè)時(shí)期，前面幾段是一個(gè)主題，后面是一個(gè)主題，在兩個(gè)主題中間加一個(gè)

---

語(yǔ)義，展示出來(lái)是一個(gè)橫線);

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

引用：

長(zhǎng)段落引用；短引用，比較短，只提到書名、電影名之類的；;

cite和q的區(qū)別：cite表示這塊東西的來(lái)源、標(biāo)題，書名，第一章之類。q引用一句話，包括的一句內(nèi)容。

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

代碼：code .短代碼…，長(zhǎng)代碼

…

figure：可以用來(lái)表示圖表，也可以做其他用途。

對(duì)figure的標(biāo)題

網(wǎng)頁(yè)總體結(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ī)院中是否要找一個(gè)醫(yī)生嗎？是，立即，馬上。)；em：從一句話中突出某個(gè)詞語(yǔ)(比如是否需要找一個(gè)醫(yī)生？不，要一個(gè)護(hù)士。護(hù)士用em，強(qiáng)調(diào)一個(gè)詞)；b：將詞語(yǔ)從視覺上和其他部分區(qū)別，比如一篇論文摘要中的關(guān)鍵詞；i：換一種語(yǔ)調(diào)去說(shuō)一句話時(shí)，比如其他語(yǔ)言翻譯，對(duì)話中的旁白

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

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

HTML

標(biāo)準(zhǔn)由W3C

制定和修改。

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

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

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

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

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

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

實(shí)體(Entity)字符：&?

HTML：鏈接

省略協(xié)議： 現(xiàn)在是什么協(xié)議就會(huì)跳轉(zhuǎn)成什么協(xié)議，比如當(dāng)前現(xiàn)在是http，跳轉(zhuǎn)后是http?？梢怨?jié)省一點(diǎn)字節(jié)，如果在https中引用了http的資源，瀏覽器時(shí)不會(huì)讓引用的，但是如果省略協(xié)議，瀏覽器就可以跳轉(zhuǎn)成HTTPS，就可以用了。

省略協(xié)議和host： 會(huì)自動(dòng)補(bǔ)齊協(xié)議和host.

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

相對(duì)路徑和絕對(duì)路徑：

絕對(duì)路徑 host省略，從跟目錄寫起，這個(gè)用的比較多。

相對(duì)路徑

相對(duì)路徑

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

到test

鏈接目標(biāo)：

當(dāng)前窗口打開

新窗口打開

自定義abc方式

HTML：圖片

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

指定圖片寬高：

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

常用圖片格式：

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

HTML：表格

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

列組(colgroup)可以一列一列的來(lái)定義樣式

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

HTML：表單

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

action：在用戶提交數(shù)據(jù)后，希望提交到哪個(gè)URL。

GET vs. POST

1、get從服務(wù)器獲取，get是一個(gè)比較安全的操作，不會(huì)對(duì)服務(wù)器的數(shù)據(jù)有改動(dòng)；post向服務(wù)器提交數(shù)據(jù)，會(huì)對(duì)服務(wù)器的數(shù)據(jù)有一些改動(dòng)；2、緩存上，get有可能是緩存的，post永遠(yuǎn)不會(huì)緩存；3、數(shù)據(jù)傳輸?shù)姆绞?#xff0c;get請(qǐng)求會(huì)把每一個(gè)字段都放在url中，可以一次性把請(qǐng)求都發(fā)給服務(wù)器，POST不會(huì)把數(shù)據(jù)放在url中，而是會(huì)進(jìn)行編碼，然后把編碼后的數(shù)據(jù)存在http的body中，再發(fā)送給服務(wù)器。數(shù)據(jù)發(fā)送時(shí)分兩撥，先發(fā)送head，服務(wù)器同意后再發(fā)送body。

URL encode(編碼)

HTTP method:

GET、POST、HEAD：不會(huì)返回http內(nèi)容，只返回http head、PUT、DELETE、OPTIONS：用來(lái)返回HTTP有哪些head選擇，常用在跨域中

單行文本框：

placeholder：

autofocus：焦點(diǎn)focus到要輸入的地方

密碼：

多行文本框：

輸入驗(yàn)證：required：必填的；想要更好的提示語(yǔ)句在js中寫，原生的驗(yàn)證及時(shí)性不是很好.

type：

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

novalidate：

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

radio：單選框

checkbox:復(fù)選框

laber：

關(guān)聯(lián)文字，使點(diǎn)擊文字也可以點(diǎn)擊到。以及讀屏軟件可以同label知道輸入的是什么。兩種方式：

請(qǐng)輸入你的名字：

select：

實(shí)現(xiàn)多選：加一個(gè) multiple 屬性；size屬性，決定露出來(lái)幾個(gè)選項(xiàng)，默認(rèn)1個(gè)

分組： optgroup

hidden：

不在界面上展示出來(lái)，隱藏。type=”hidden”

文件選擇：multipart/form-data：把提交的file分為幾段

同時(shí)選擇多個(gè)文件：;對(duì)選擇的文件進(jìn)行一個(gè)篩選： // 只能選擇圖片;可以不用原生的上傳，使用js

date & time：

datetime-local

month

week

number &range：

input type=”number” min=”0.5” max=”2.5” step=”0.01” name=”height” value=””

input type=”rage”

元素：對(duì)用戶輸入的輸出結(jié)果 output for=”weight”

color:

button：

type屬性：submit,button(沒有默認(rèn)行為，要用js來(lái)實(shí)現(xiàn)),reset。默認(rèn)值是submit

回車提交：？？？

只要有input，按下回車后就會(huì)提交，瀏覽器自動(dòng)觸發(fā)？？

不指定type

觸發(fā)控件：

disabled, readonly：對(duì)readonly來(lái)說(shuō)會(huì)提交到服務(wù)器，但是只讀。disabled不能提交到服務(wù)器

表單設(shè)計(jì)：

幫助用戶不出錯(cuò)(能讓選的就不讓填，對(duì)填的可以進(jìn)行一些輔助，比如輸入郵箱的時(shí)候提示補(bǔ)全)

盡早提示錯(cuò)誤

擴(kuò)大選擇/點(diǎn)擊區(qū)域

空間較多時(shí)要分組

分清主要?jiǎng)幼骱痛我獎(jiǎng)幼?/p>

傳統(tǒng)上，用p把input包裹起來(lái)比較多。

HTML：擴(kuò)展知識(shí)

全局屬性：(幾乎所有的元素都可以擁有的屬性)

1、accesskey & tabindex

accesskey 可以給每個(gè)元素指定一個(gè)key，當(dāng)用戶在鍵盤上按下ctrl+alt+這個(gè)key，就相當(dāng)于點(diǎn)擊了這個(gè)元素。如何告訴給用戶可以這樣按呢？有的插件當(dāng)按下Ctrl時(shí)，會(huì)在旁邊顯示。

tabindex 通過(guò)table鍵可以控制頁(yè)面元素。如果做得不是很好，會(huì)出什么問(wèn)題呢？

2、id,class,style

3、contenteditable & spellcheck

contenteditable : 頁(yè)面是可以被修改的，而是是html的，是富文本的，不是text的。

spellcheck：拼寫檢查，不是布爾值。這樣寫spellcheck=””

4、語(yǔ)言lang & dir

lang：在大網(wǎng)站有多語(yǔ)言版本時(shí)，很有用。

dir：文字書寫方向，默認(rèn)是從左到右的書寫順序。從右到坐時(shí)：dir=”rtl”

5、title

鼠標(biāo)放上去，可以看見解釋或者完全的文字。體驗(yàn)不是很好，因?yàn)橛醒舆t。所以一般自己做

6、hidden

你看不見我

一般用于暫時(shí)隱藏，等待一個(gè)時(shí)機(jī)顯示出來(lái)。和display:none類似，但是在恢復(fù)元素的時(shí)候，要考慮是block，還是inline-block。使用hidden屬性還有一個(gè)是有利于讀屏軟件。

7、無(wú)障礙性

8、web開發(fā)者應(yīng)該做的事情

WCAG(比較老，更多的關(guān)注的是內(nèi)容上的規(guī)范)

ARIA(Accessible Rich Internet Applications)對(duì)Web的富應(yīng)用做了一個(gè)可用性的規(guī)范，不管用什么標(biāo)簽來(lái)實(shí)現(xiàn)這個(gè)功能，可以加上aria屬性，來(lái)告訴輔助性軟件這個(gè)標(biāo)簽是做什么的

9、ARIA

指定role

• 10、提升無(wú)障礙性

  為img提供alt屬性

  noscript：HTML標(biāo)簽，對(duì)于不支持JavaScript的瀏覽器，給予一個(gè)替代性的方案或者一個(gè)提示

  input和label對(duì)應(yīng)

  圖形驗(yàn)證碼與語(yǔ)音驗(yàn)證碼

  文字和背景有足夠?qū)Ρ榷?/p>

  鍵盤可操作

  11、語(yǔ)義化

  HTML中的元素、屬性及屬性值都擁有某些含義

  開發(fā)者應(yīng)該遵循語(yǔ)義來(lái)編寫HTML

  12、為什么語(yǔ)義化很重要？

  提升代碼可讀性、可維護(hù)性

  搜索引擎優(yōu)化

  提升無(wú)障礙性

  13、擴(kuò)展HTML

  meta標(biāo)簽：對(duì)整個(gè)頁(yè)面相關(guān)的一般都寫在meta中

  data-*屬性：來(lái)存儲(chǔ)自定義的屬性， $0.dataset可以用語(yǔ)獲取自定義屬性的值

• apple
• banana

  microdata：告訴瀏覽器，這個(gè)實(shí)體是一個(gè)什么東西。Itemscope itemtype itemprop，一個(gè)實(shí)體

  HTML5中的一個(gè)規(guī)范

  在HTML中通過(guò)屬性嵌入格式化數(shù)據(jù)

  提供給搜索引擎、瀏覽器(插件)使用。比如在搜索引擎中搜索一個(gè)飯館，可以在搜索頁(yè)面中，看見提取出來(lái)的信息：

  JSON-LD：

  把上面的代碼結(jié)合到j(luò)s中

  HTML編碼規(guī)范：html valid..

  推薦兩個(gè)工具：emmet,markdown

  caniuse.com

總結(jié)

以上是生活随笔為你收集整理的HTML5训练营,360奇舞特训营（一）：HTML的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。