国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

kuangcaibao / 1825人閱讀

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

前端與HTML

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

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

一、DOCTYPE 
H5: 

H4.01: 

怪異模式:

舉個(gè)栗子



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

doctype的英文解釋：聲明，文檔類型
作用有以下兩點(diǎn):

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

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

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

問題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ì)失效。

二、語義化

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

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

問題3：語義化的好處？

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

搜索引擎優(yōu)化

提升無障礙性

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

流式元素（flow）

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

元數(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)容

問題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可以通過dataset這個(gè)api來對(duì)這個(gè)自定義屬性進(jì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ù)需要在頁面進(jìn)行展示的時(shí)候，就可以使用JSON-LD，LD是link-data的縮寫。
例如：可以通過JSON-LD來結(jié)構(gòu)化一些數(shù)據(jù)

五、web無障礙

可訪問性，Accessibility（A11y）

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

提升無障礙性：

為img提供alt屬性

noscript

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

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

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

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

鍵盤可操作性，比如用tab來切換focus

擴(kuò)展:

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

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

table標(biāo)簽

表示表格數(shù)據(jù) — 即通過二維數(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ò)誤，請指正，非常感謝！

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52444.html

相關(guān)文章

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

    摘要：課程一繼承某些元素會(huì)自動(dòng)繼承其父元素的計(jì)算值舉例上述代碼，標(biāo)簽里的就會(huì)繼承父元素的，為。顯示繼承給設(shè)置顯示繼承根元素下所有元素除獨(dú)自設(shè)置如的都是。二初始值當(dāng)向上繼承到頂點(diǎn)還是沒找到值的話，就需要初始值了。 課程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)起來版本升級(jí)比較難，后來在的版本中，將標(biāo)準(zhǔn)分成幾個(gè)模塊來管理。 深入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í)筆記-如何寫‘好’JavaScript

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

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

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

    摘要：設(shè)計(jì)思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實(shí)問題優(yōu)雅降級(jí)尊重事實(shí)標(biāo)準(zhǔn)變化新增語義化標(biāo)簽去除純表示性的標(biāo)簽拖拽離線語法標(biāo)簽不區(qū)分大小寫推薦小寫空標(biāo)簽可以不閉合屬性不必引號(hào)。遇到這種情況時(shí)，會(huì)生成匿名塊級(jí)盒來包含行級(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元查看
<