一枚大三學生,非常感謝360前端星計畫,在這裡學習了很多,非常幸運獲得360的校招實習offer~,非常感謝面試我的王峰老師和盧嶽文老師!總的來說,這7天的學習,讓我堅定了走前端這條路。
第一堂課是由360奇舞團的趙文博老師講的《前端與html》,下面是講課時的 ppt鏈結
h5: h4.01:
怪異模式:
舉個栗子
問題1. doctype的作用是什麼?
doctype的英文解釋:宣告,文件型別
作用有以下兩點:
通俗易懂的解釋就是:寫doctype,瀏覽器就會按照標準模式解析文件,不寫的話,就會按照怪異模式解析文件
問題2: 標準模式與怪異模式的區別?
盒模型: ie下標準模式為標準w3c盒模型
【content+padding+border+margin】,怪異模式為ie盒模型【content+margin:padding與border包含在content寬高中】
行內元素的垂直對齊:基於 gecko 的瀏覽器【mozilla firefox、hotbrowser、mozilla suite、camino】標準模式對齊至基線,怪異模式對齊至底部
怪異模式中,ie6/7/8都不認識!important宣告
設定行內元素的高寬: 在standards模式下,給等行內元素設定wdith和height都不會生效,而在quirks模式下,則會生效。
使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下卻會失效。
問題3:語義化的好處?
提公升可讀性、可維護性
搜尋引擎優化
提公升無障礙性
這些標籤的內容可以直接展示到頁面上
有些標籤元素的內容不會直接展示給使用者
問題4:p裡面可以巢狀div嗎?
不可以,p標籤表示段落,裡面只能巢狀段落內容元素
data-* 是自定義屬性,並且js可以通過dataset這個api來對這個自定義屬性進行操控。
方法1:可以用getattribute
方法2:$('li').eq(0).dataset.id
獲取
json-ld是一種資料格式
上述的meta、link都是針對乙個點進行擴充套件,如果有大量資料需要在頁面進行展示的時候,就可以使用json-ld,ld是link-data的縮寫。
例如:可以通過json-ld來結構化一些資料
"@context": "",
"@type": "person",
"name": "john doe",
"jobtitle": "graduate research assistant",
"affiliation": "university of dreams",
"additionalname": "johnny",
"url": "",
"address":
}提公升無障礙性:
當瀏覽器禁用 js 時,解析 noscript 標籤
擴充套件:
是將內容解析一段顯示一段,;它是段落標籤,兩個p標籤之間會空出一行
是內容全部解析之後才展示出來,會多次經過重排重繪,所以影響效能,對seo也不是很友好,但是對於比較規範的**型別的資料時,還是需要用
標籤的
因為好多屬性都被廢棄了,所以列出幾個我常用的屬性,其他樣式盡量用css實現屬性值
描述border
pixels
規定**邊框的寬度
cellpadding
pixels%
規定單元邊沿與其內容之間的空白
cellspacing
pixels%
規定單元格之間的空白
table mdn文件
html這一節課所學的知識就介紹到這裡了,由於自己學識較淺,可能理解與老師的講解會有偏差,如有錯誤,請指正,非常感謝!
360前端星計畫
360前端星計畫詳情跳轉 上午 10 00 主持人裕波大大開場白 10 15 月影提10個問題 你們都有github嗎?了解到什麼情況?善於思考 前端工程師是怎樣的人?前端工程師有怎樣的特質?優秀的前端工程師最重要的是什麼?平時工作中前端攻城獅主要做哪些事情?前端工程師一般湧什麼開發工具和除錯工具?...
360前端星計畫 前端常用的HTTP知識
http是應用層協議。請求型別 描述get 獲取乙個資源內容 post 新增乙個資源 put更新資源內容 delete 刪除資源 options 根據返回判斷是否有對其請求的許可權 head 只返回 head,不返回實體內容 patch 更新部分內容 狀態碼描述 1xx請求已接受,需要繼續處理 2x...
參加360前端星計畫總結(二) HTML CSS
文件宣告的作用 a.指定html的文件標準和版本 b.告訴瀏覽器渲染模式,有怪異模式 較為古老的模式,不寫文件宣告,或者文件宣告不在第一行時會觸發 準標準模式 大部分是按照標準模式渲染,特殊情況下按照怪異模式渲染 標準模式 xml的區別 屬性小寫,屬性值加引號,標籤要被正確的關閉,寫script用等...