360前端星计划学习-html
前端與HTML
一枚大三學生，非常感謝360前端星計劃，在這里學習了很多，非常幸運獲得360的校招實習offer~，非常感謝面試我的王峰老師和盧岳文老師！總的來說，這7天的學習，讓我堅定了走前端這條路。
第一堂課是由360奇舞團的趙文博老師講的《前端與html》，下面是講課時的 ppt鏈接
一、DOCTYPE
H5: <DOCTYPE html>H4.01: 怪異模式: 復制代碼舉個栗子
<html><head><meta charset="utf-8"><title>html</title></head><body><h1>這是內容</h1></body> </html> 復制代碼問題1. doctype的作用是什么？
doctype的英文解釋：聲明，文檔類型
作用有以下兩點:
- 指定文檔使用的標準和版本
- 瀏覽器根據doctype決定使用哪種渲染模式
通俗易懂的解釋就是：寫doctype，瀏覽器就會按照標準模式解析文檔，不寫的話，就會按照怪異模式解析文檔
問題2： 標準模式與怪異模式的區(qū)別？
二、語義化
- HTML中的元素、屬性及屬性值都擁有某些含義
- 開發(fā)者應該遵循語義來編寫HTML
問題3：語義化的好處？
三、html5標簽分類
-
流式元素（flow） 這些標簽的內容可以直接展示到頁面上
-
元數據元素（metadata） 有些標簽元素的內容不會直接展示給用戶
-
標題內容元素（heading）
-
章節(jié)內容元素（sectioning）
-
段落內容元素（phrasing）
-
嵌入式內容（embedded） 圖片、音頻、視頻等元素
-
可交互內容
問題4：p里面可以嵌套div嗎？
不可以，p標簽表示段落，里面只能嵌套段落內容元素
四、HTML的擴展性
- meta
- data-*
- link
- JSON-LD
1. 基于meta標簽擴展
<!-- 編碼 --> <meta charset="UTF-8"><!-- 指定HTTP Header --> <meta http-equiv="Content-Security-Policy"content="script-src 'self'"><!-- SEO 搜索引擎優(yōu)化 --> <meta name="keywords" content="關鍵詞"> <meta name="description" content="頁面介紹"><!-- 移動設備Viewport --> <meta name="viewport" content="initial-scale=1"><!-- 關閉iOS電話號碼自動識別 --> <meta name="format-detection" content="telphone=no"><!-- 360瀏覽器指定內核 --> <meta name="renderer" content="webkit"><!-- 指定IE渲染模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> 復制代碼2. data-* & dataset API
data-* 是自定義屬性，并且js可以通過dataset這個api來對這個自定義屬性進行操控。
<ul><li data-id="1">蘋果</li><li data-id="2">香蕉</li><li data-id="3">芒果</li> </ul> 復制代碼問題5：如果我想拿到li[data-id='1']標簽里的屬性怎么辦？
方法1：可以用getAttribute 方法2：$('li').eq(0).dataset.id獲取
3. link標簽擴展
<!-- 引入 CSS --> <link rel="stylesheet" href="style.css"><!-- 瀏覽器預加載 --> <link rel="dns-prefetch" href="//example.com"> <link rel="prefetch" href="image.png"> <link rel="prerender" href="http://example.com"><!-- favicon --> <link rel="icon" type="image/png" href="myicon.png"><!-- RSS --> <link rel="alternate" type="application/rss+xml" href="/feed"> 復制代碼4. JSON-LD
JSON-LD是一種數據格式 上述的meta、link都是針對一個點進行擴展，如果有大量數據需要在頁面進行展示的時候，就可以使用JSON-LD，LD是link-data的縮寫。
例如：可以通過JSON-LD來結構化一些數據
五、web無障礙
- 可訪問性，Accessibility（A11y）
- 保證頁面可以讓任何人獲取信息，比如對待色盲的人，需要考慮顏色的選擇問題。
提升無障礙性：
- 為img提供alt屬性
- noscript
當瀏覽器禁用 js 時，解析 noscript 標簽 - input和label對應
- 圖形驗證碼和語音驗證碼
- 文字和背景有足夠的對比度
- 鍵盤可操作性，比如用tab來切換focus
擴展:
<p></p>是將內容解析一段顯示一段，；它是段落標簽，兩個p標簽之間會空出一行
<table></table>是內容全部解析之后才展示出來，會多次經過重排重繪，所以影響性能，對seo也不是很友好，但是對于比較規(guī)范的表格類型的數據時，還是需要用<table></table>標簽的
table標簽
- 表示表格數據 — 即通過二維數據表表示的信息。
- dom接口： HTMLTableElement
因為好多屬性都被廢棄了，所以列出幾個我常用的屬性，其他樣式盡量用css實現
| border | pixels | 規(guī)定表格邊框的寬度 |
| cellpadding | pixels% | 規(guī)定單元邊沿與其內容之間的空白 |
| cellspacing | pixels% | 規(guī)定單元格之間的空白 |
table MDN文檔
最后
html這一節(jié)課所學的知識就介紹到這里了，由于自己學識較淺，可能理解與老師的講解會有偏差，如有錯誤，請指正，非常感謝！
總結
以上是生活随笔為你收集整理的360前端星计划学习-html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 隐私计算工程化之殇，为什么“久攻不破”？
- 下一篇： The C Programming La