360前端星計劃學習-html

liusGG發表於2018-06-02
前端HTML

前端與HTML

一枚大三學生，非常感謝360前端星計劃，在這裡學習了很多，非常幸運獲得360的校招實習offer~，非常感謝面試我的王峰老師和盧嶽文老師！總的來說，這7天的學習，讓我堅定了走前端這條路。

第一堂課是由360奇舞團的趙文博老師講的《前端與html》，下面是講課時的 ppt連結

一、DOCTYPE

H5: <DOCTYPE html>

H4.01: <!DOCTYPE HTML PLUBIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

怪異模式: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.ded">
複製程式碼

舉個栗子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html</title>
    </head>
    <body>
        <h1>這是內容</h1>
    </body>
</html>
複製程式碼

問題1. doctype的作用是什麼？

doctype的英文解釋：宣告，文件型別
作用有以下兩點:

  • 指定文件使用的標準和版本
  • 瀏覽器根據doctype決定使用哪種渲染模式

通俗易懂的解釋就是：寫doctype，瀏覽器就會按照標準模式解析文件，不寫的話，就會按照怪異模式解析文件

問題2： 標準模式與怪異模式的區別？

  1. 盒模型： IE下標準模式為標準w3c盒模型 【content+padding+border+margin】，怪異模式為IE盒模型【content+margin：padding與border包含在content寬高中】
  2. 行內元素的垂直對齊：基於 Gecko 的瀏覽器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】標準模式對齊至基線，怪異模式對齊至底部
  3. 怪異模式中，IE6/7/8都不認識!important宣告
  4. 設定行內元素的高寬： 在Standards模式下，給等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效。
  5. 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

二、語義化

  • HTML中的元素、屬性及屬性值都擁有某些含義
  • 開發者應該遵循語義來編寫HTML

問題3：語義化的好處？

  1. 提升可讀性、可維護性
  2. 搜尋引擎優化
  3. 提升無障礙性

三、html5標籤分類

  • 流式元素（flow） 這些標籤的內容可以直接展示到頁面上

    流式元素

  • 後設資料元素（metadata） 有些標籤元素的內容不會直接展示給使用者

    後設資料元素

  • 標題內容元素（heading）

    heading

  • 章節內容元素（sectioning）

    sectioning

  • 段落內容元素（phrasing）

    phrasing

  • 嵌入式內容（embedded） 圖片、音訊、視訊等元素

    alt

  • 可互動內容

    可互動內容

問題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 搜尋引擎優化 -->
<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來結構化一些資料

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "jobTitle": "Graduate research assistant",
  "affiliation": "University of Dreams",
  "additionalName": "Johnny",
  "url": "http://www.example.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
  }
}
</script>
複製程式碼

五、web無障礙

  • 可訪問性，Accessibility（A11y）
  • 保證頁面可以讓任何人獲取資訊，比如對待色盲的人，需要考慮顏色的選擇問題。

提升無障礙性：

  • 為img提供alt屬性
  • noscript
    當瀏覽器禁用 js 時，解析 noscript 標籤
  • input和label對應
  • 圖形驗證碼和語音驗證碼
  • 文字和背景有足夠的對比度
  • 鍵盤可操作性，比如用tab來切換focus

擴充套件:

  1. <p></p>是將內容解析一段顯示一段，；它是段落標籤，兩個p標籤之間會空出一行

    示例

  2. <table></table>是內容全部解析之後才展示出來，會多次經過重排重繪，所以影響效能，對seo也不是很友好，但是對於比較規範的表格型別的資料時，還是需要用<table></table>標籤的

table標籤

  • 表示表格資料 — 即通過二維資料表表示的資訊。
  • dom介面： HTMLTableElement

因為好多屬性都被廢棄了，所以列出幾個我常用的屬性，其他樣式儘量用css實現

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

table MDN文件

最後

html這一節課所學的知識就介紹到這裡了，由於自己學識較淺，可能理解與老師的講解會有偏差，如有錯誤，請指正，非常感謝！

相關文章