亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

360前端星學(xué)習(xí)筆記-HTML

kuangcaibao / 1882人閱讀

摘要：前端與一枚大三學(xué)生，非常感謝前端星計(jì)劃，在這里學(xué)習(xí)了很多，非常幸運(yùn)獲得的校招實(shí)習(xí)，非常感謝面試我的王峰老師和盧岳文老師總的來(lái)說(shuō)，這天的學(xué)習(xí)，讓我堅(jiān)定了走前端這條路。使用在模式下可以使元素水平居中，但在模式下卻會(huì)失效。

前端與HTML

一枚大三學(xué)生，非常感謝360前端星計(jì)劃，在這里學(xué)習(xí)了很多，非常幸運(yùn)獲得360的校招實(shí)習(xí)offer~，非常感謝面試我的王峰老師和盧岳文老師！總的來(lái)說(shuō)，這7天的學(xué)習(xí)，讓我堅(jiān)定了走前端這條路。

第一堂課是由360奇舞團(tuán)的趙文博老師講的《前端與html》，下面是講課時(shí)的 ppt鏈接

一、DOCTYPE 
H5: 

H4.01: 

怪異模式:

舉個(gè)栗子



    
        
        html
    
    
        
這是內(nèi)容
問(wèn)題1. doctype的作用是什么？

doctype的英文解釋?zhuān)郝暶?，文檔類(lèi)型
作用有以下兩點(diǎn):

指定文檔使用的標(biāo)準(zhǔn)和版本

瀏覽器根據(jù)doctype決定使用哪種渲染模式

通俗易懂的解釋就是：寫(xiě)doctype，瀏覽器就會(huì)按照標(biāo)準(zhǔn)模式解析文檔，不寫(xiě)的話，就會(huì)按照怪異模式解析文檔

問(wèn)題2： 標(biāo)準(zhǔn)模式與怪異模式的區(qū)別？

盒模型： IE下標(biāo)準(zhǔn)模式為標(biāo)準(zhǔn)w3c盒模型

【content+padding+border+margin】，怪異模式為IE盒模型【content+margin：padding與border包含在content寬高中】

行內(nèi)元素的垂直對(duì)齊：基于 Gecko 的瀏覽器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】標(biāo)準(zhǔn)模式對(duì)齊至基線，怪異模式對(duì)齊至底部

怪異模式中，IE6/7/8都不認(rèn)識(shí)!important聲明

設(shè)置行內(nèi)元素的高寬： 在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。

二、語(yǔ)義化

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

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

問(wèn)題3：語(yǔ)義化的好處？

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

搜索引擎優(yōu)化

提升無(wú)障礙性

三、html5標(biāo)簽分類(lèi)

流式元素（flow）

這些標(biāo)簽的內(nèi)容可以直接展示到頁(yè)面上

元數(shù)據(jù)元素（metadata）

有些標(biāo)簽元素的內(nèi)容不會(huì)直接展示給用戶

標(biāo)題內(nèi)容元素（heading）

章節(jié)內(nèi)容元素（sectioning）

段落內(nèi)容元素（phrasing）

嵌入式內(nèi)容（embedded）

圖片、音頻、視頻等元素

可交互內(nèi)容

問(wèn)題4：p里面可以嵌套div嗎？

不可以，p標(biāo)簽表示段落，里面只能嵌套段落內(nèi)容元素

四、HTML的擴(kuò)展性

meta

data-*

link

JSON-LD

1. 基于meta標(biāo)簽擴(kuò)展
2. data-* & dataset API

data-* 是自定義屬性，并且js可以通過(guò)dataset這個(gè)api來(lái)對(duì)這個(gè)自定義屬性進(jìn)行操控。

    
  
  • 蘋(píng)果
    • 
  
  • 香蕉
    • 
  
  • 芒果
    •
問(wèn)題5：如果我想拿到li[data-id="1"]標(biāo)簽里的屬性怎么辦？

方法1：可以用getAttribute
方法2：$("li").eq(0).dataset.id獲取

3. link標(biāo)簽擴(kuò)展
4. JSON-LD

JSON-LD是一種數(shù)據(jù)格式
上述的meta、link都是針對(duì)一個(gè)點(diǎn)進(jìn)行擴(kuò)展，如果有大量數(shù)據(jù)需要在頁(yè)面進(jìn)行展示的時(shí)候，就可以使用JSON-LD，LD是link-data的縮寫(xiě)。
例如：可以通過(guò)JSON-LD來(lái)結(jié)構(gòu)化一些數(shù)據(jù)

五、web無(wú)障礙

可訪問(wèn)性，Accessibility（A11y）

保證頁(yè)面可以讓任何人獲取信息，比如對(duì)待色盲的人，需要考慮顏色的選擇問(wèn)題。

提升無(wú)障礙性：

為img提供alt屬性

noscript

當(dāng)瀏覽器禁用 js 時(shí)，解析 noscript 標(biāo)簽

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

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

文字和背景有足夠的對(duì)比度

鍵盤(pán)可操作性，比如用tab來(lái)切換focus

擴(kuò)展:

是將內(nèi)容解析一段顯示一段，；它是段落標(biāo)簽，兩個(gè)p標(biāo)簽之間會(huì)空出一行

是內(nèi)容全部解析之后才展示出來(lái)，會(huì)多次經(jīng)過(guò)重排重繪，所以影響性能，對(duì)seo也不是很友好，但是對(duì)于比較規(guī)范的表格類(lèi)型的數(shù)據(jù)時(shí)，還是需要用
標(biāo)簽的

table標(biāo)簽

表示表格數(shù)據(jù) — 即通過(guò)二維數(shù)據(jù)表表示的信息。

dom接口： HTMLTableElement

因?yàn)楹枚鄬傩远急粡U棄了，所以列出幾個(gè)我常用的屬性，其他樣式盡量用css實(shí)現(xiàn)

屬性 值 描述
border pixels 規(guī)定表格邊框的寬度
cellpadding pixels% 規(guī)定單元邊沿與其內(nèi)容之間的空白
cellspacing pixels% 規(guī)定單元格之間的空白

table MDN文檔

最后

html這一節(jié)課所學(xué)的知識(shí)就介紹到這里了，由于自己學(xué)識(shí)較淺，可能理解與老師的講解會(huì)有偏差，如有錯(cuò)誤，請(qǐng)指正，非常感謝！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/52444.html

相關(guān)文章

  • 360前端星學(xué)習(xí)筆記-深入css(2)

    摘要：課程一繼承某些元素會(huì)自動(dòng)繼承其父元素的計(jì)算值舉例上述代碼，標(biāo)簽里的就會(huì)繼承父元素的，為。顯示繼承給設(shè)置顯示繼承根元素下所有元素除獨(dú)自設(shè)置如的都是。二初始值當(dāng)向上繼承到頂點(diǎn)還是沒(méi)找到值的話，就需要初始值了。 課程ppt 一、css繼承 1.1 某些元素會(huì)自動(dòng)繼承其父元素的計(jì)算值 舉例： This is a test of inherit. p { color: #666; ...

    William_Sang 評(píng)論0 收藏0

  • 360前端星學(xué)習(xí)筆記-深入CSS

    摘要：深入課程鏈接一的版本規(guī)范在之前，把所有標(biāo)準(zhǔn)放在一起去管理，這樣推進(jìn)起來(lái)版本升級(jí)比較難，后來(lái)在的版本中，將標(biāo)準(zhǔn)分成幾個(gè)模塊來(lái)管理。 深入CSS 課程ppt鏈接 一、CSS的版本（level） css Level 1 css Level 2（CSS2.2規(guī)范） css Level 3 Color Module Level 3 Selectors Level 3 Media Queri...

    xcold 評(píng)論0 收藏0

  • 360前端星學(xué)習(xí)筆記-如何寫(xiě)‘好’JavaScript

    摘要：前言如何寫(xiě)好這門(mén)課是由技術(shù)專(zhuān)家月影老師講的?？刂屏髟O(shè)計(jì)原則為什么要用到事件機(jī)制呢因?yàn)橐档徒Y(jié)構(gòu)之間的耦合度，如果不這樣做的話，我們需要做雙向的操控的。 前言 《如何寫(xiě)‘好’javascript》這門(mén)課是由360技術(shù)專(zhuān)家月影老師講的。 這堂課的ppt 說(shuō)實(shí)話，我一直在糾結(jié)要不要寫(xiě)關(guān)于js的文章，因?yàn)閷?duì)于js來(lái)說(shuō)，我的實(shí)際經(jīng)驗(yàn)不足，更不要說(shuō)面向?qū)ο缶幊膛c函數(shù)式編程了，對(duì)于過(guò)程抽象與行為抽象...

    arashicage 評(píng)論0 收藏0

  • 360前端星計(jì)劃學(xué)習(xí)-HTML + CSS

    摘要：設(shè)計(jì)思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實(shí)問(wèn)題優(yōu)雅降級(jí)尊重事實(shí)標(biāo)準(zhǔn)變化新增語(yǔ)義化標(biāo)簽去除純表示性的標(biāo)簽拖拽離線語(yǔ)法標(biāo)簽不區(qū)分大小寫(xiě)推薦小寫(xiě)空標(biāo)簽可以不閉合屬性不必引號(hào)。遇到這種情況時(shí)，會(huì)生成匿名塊級(jí)盒來(lái)包含行級(jí)盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    lpjustdoit 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

kuangcaibao

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<