360前端星學習筆記-HTML

時間 2019-11-21

標籤前端學習筆記 html 欄目 HTML 简体版

原文原文鏈接

前端與HTML

一枚大三學生，很是感謝360前端星計劃，在這裏學習了不少，很是幸運得到360的校招實習offer~，很是感謝面試個人王峯老師和盧嶽文老師！總的來講，這7天的學習，讓我堅決了走前端這條路。css

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

1、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的英文解釋：聲明，文檔類型
做用有如下兩點:html5

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

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

問題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模式下卻會失效。

2、語義化

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

問題3：語義化的好處？

提高可讀性、可維護性
搜索引擎優化
提高無障礙性

3、html5標籤分類

流式元素（flow）

這些標籤的內容能夠直接展現到頁面上
json

元數據元素（metadata）

有些標籤元素的內容不會直接展現給用戶
api

標題內容元素（heading）

章節內容元素（sectioning）

段落內容元素（phrasing）

嵌入式內容（embedded）

圖片、音頻、視頻等元素
瀏覽器

可交互內容

問題4：p裏面能夠嵌套div嗎？

不能夠，p標籤表示段落，裏面只能嵌套段落內容元素app

4、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>

5、web無障礙

可訪問性，Accessibility（A11y）
保證頁面可讓任何人獲取信息，好比對待色盲的人，須要考慮顏色的選擇問題。

提高無障礙性：

爲img提供alt屬性
noscript

當瀏覽器禁用 js 時，解析 noscript 標籤

input和label對應
圖形驗證碼和語音驗證碼
文字和背景有足夠的對比度
鍵盤可操做性，好比用tab來切換focus

擴展:

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

<table></table>是內容所有解析以後才展現出來，會屢次通過重排重繪，因此影響性能，對seo也不是很友好，可是對於比較規範的表格類型的數據時，仍是須要用<table></table>標籤的

table標籤

表示表格數據 — 即經過二維數據表表示的信息。
dom接口： HTMLTableElement

由於好多屬性都被廢棄了，因此列出幾個我經常使用的屬性，其餘樣式儘可能用css實現

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