資訊專欄INFORMATION COLUMN
摘要：前端與一枚大三學生，非常感謝前端星計劃，在這里學習了很多，非常幸運獲得的校招實習，非常感謝面試我的王峰老師和盧岳文老師總的來說，這天的學習，讓我堅定了走前端這條路。使用在模式下可以使元素水平居中，但在模式下卻會失效。
前端與HTML
一枚大三學生，非常感謝360前端星計劃，在這里學習了很多，非常幸運獲得360的校招實習offer~，非常感謝面試我的王峰老師和盧岳文老師！總的來說，這7天的學習，讓我堅定了走前端這條路。
第一堂課是由360奇舞團的趙文博老師講的《前端與html》，下面是講課時的 ppt鏈接
一、DOCTYPEH5:H4.01: 怪異模式:
舉個栗子
html
這是內(nèi)容
問題1. doctype的作用是什么？
doctype的英文解釋：聲明，文檔類型
作用有以下兩點:
指定文檔使用的標準和版本
瀏覽器根據(jù)doctype決定使用哪種渲染模式
通俗易懂的解釋就是：寫doctype，瀏覽器就會按照標準模式解析文檔，不寫的話，就會按照怪異模式解析文檔
問題2： 標準模式與怪異模式的區(qū)別？盒模型： IE下標準模式為標準w3c盒模型
【content+padding+border+margin】，怪異模式為IE盒模型【content+margin：padding與border包含在content寬高中】
行內(nèi)元素的垂直對齊：基于 Gecko 的瀏覽器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】標準模式對齊至基線，怪異模式對齊至底部
怪異模式中，IE6/7/8都不認識!important聲明
設置行內(nèi)元素的高寬： 在Standards模式下，給等行內(nèi)元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
二、語義化HTML中的元素、屬性及屬性值都擁有某些含義
開發(fā)者應該遵循語義來編寫HTML
問題3：語義化的好處？提升可讀性、可維護性
搜索引擎優(yōu)化
提升無障礙性
三、html5標簽分類流式元素（flow）
這些標簽的內(nèi)容可以直接展示到頁面上
元數(shù)據(jù)元素（metadata）
有些標簽元素的內(nèi)容不會直接展示給用戶
標題內(nèi)容元素（heading）
章節(jié)內(nèi)容元素（sectioning）
段落內(nèi)容元素（phrasing）
嵌入式內(nèi)容（embedded）
圖片、音頻、視頻等元素
可交互內(nèi)容
問題4：p里面可以嵌套div嗎？不可以，p標簽表示段落，里面只能嵌套段落內(nèi)容元素
四、HTML的擴展性meta
data-*
link
JSON-LD
1. 基于meta標簽擴展2. data-* & dataset API
data-* 是自定義屬性，并且js可以通過dataset這個api來對這個自定義屬性進行操控。
方法1：可以用getAttribute
方法2：$("li").eq(0).dataset.id獲取
4. JSON-LD
JSON-LD是一種數(shù)據(jù)格式
上述的meta、link都是針對一個點進行擴展，如果有大量數(shù)據(jù)需要在頁面進行展示的時候，就可以使用JSON-LD，LD是link-data的縮寫。
例如：可以通過JSON-LD來結構化一些數(shù)據(jù)
可訪問性，Accessibility（A11y）
保證頁面可以讓任何人獲取信息，比如對待色盲的人，需要考慮顏色的選擇問題。
提升無障礙性：
為img提供alt屬性
noscript
當瀏覽器禁用 js 時，解析 noscript 標簽
input和label對應
圖形驗證碼和語音驗證碼
文字和背景有足夠的對比度
鍵盤可操作性，比如用tab來切換focus
擴展:
是將內(nèi)容解析一段顯示一段，；它是段落標簽，兩個p標簽之間會空出一行
是內(nèi)容全部解析之后才展示出來，會多次經(jīng)過重排重繪，所以影響性能，對seo也不是很友好，但是對于比較規(guī)范的表格類型的數(shù)據(jù)時，還是需要用
標簽的
表示表格數(shù)據(jù) — 即通過二維數(shù)據(jù)表表示的信息。
dom接口： HTMLTableElement
因為好多屬性都被廢棄了，所以列出幾個我常用的屬性，其他樣式盡量用css實現(xiàn)
| 屬性 | 值 | 描述 |
|---|---|---|
| border | pixels | 規(guī)定表格邊框的寬度 |
| cellpadding | pixels% | 規(guī)定單元邊沿與其內(nèi)容之間的空白 |
| cellspacing | pixels% | 規(guī)定單元格之間的空白 |
table MDN文檔
最后html這一節(jié)課所學的知識就介紹到這里了，由于自己學識較淺，可能理解與老師的講解會有偏差，如有錯誤，請指正，非常感謝！
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52444.html
摘要：課程一繼承某些元素會自動繼承其父元素的計算值舉例上述代碼，標簽里的就會繼承父元素的，為。顯示繼承給設置顯示繼承根元素下所有元素除獨自設置如的都是。二初始值當向上繼承到頂點還是沒找到值的話，就需要初始值了。 課程ppt 一、css繼承 1.1 某些元素會自動繼承其父元素的計算值 舉例： This is a test of inherit. p { color: #666; ...
摘要：深入課程鏈接一的版本規(guī)范在之前，把所有標準放在一起去管理，這樣推進起來版本升級比較難，后來在的版本中，將標準分成幾個模塊來管理。 深入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...
摘要：前言如何寫好這門課是由技術專家月影老師講的?？刂屏髟O計原則為什么要用到事件機制呢因為要降低結構之間的耦合度，如果不這樣做的話，我們需要做雙向的操控的。 前言 《如何寫‘好’javascript》這門課是由360技術專家月影老師講的。 這堂課的ppt 說實話，我一直在糾結要不要寫關于js的文章，因為對于js來說，我的實際經(jīng)驗不足，更不要說面向?qū)ο缶幊膛c函數(shù)式編程了，對于過程抽象與行為抽象...
摘要：設計思想兼容已有內(nèi)容避免不必要的復雜性解決現(xiàn)實問題優(yōu)雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區(qū)分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
閱讀 1840·2023-04-25 15:51
閱讀 2521·2021-10-13 09:40
閱讀 2159·2021-09-23 11:22
閱讀 3262·2019-08-30 14:16
閱讀 2682·2019-08-26 13:35
閱讀 1876·2019-08-26 13:31
閱讀 896·2019-08-26 11:39
閱讀 2761·2019-08-26 10:33
