IFE百度前端技術學院4/24/2018
阿新 • • 發佈：2018-04-25
結果 sheet terms 自然 spa 外部 for link 等價
day1:
day2: 好的簡歷：
你可以參考自己的簡歷內容，也可以參考網上一些熱門簡歷內容，比如 羨轍 的簡歷（她簡歷的樣式每年校招簡歷總能看見很多人在復用，所以，希望大家以後做簡歷的時候換個樣式吧，哪怕是換個顏色也是極好的）。
HTML語義。
article 元素
- 獨立的文檔、頁面、應用、站點
- 可以單獨發布、重用
- 可以是...
- 一篇帖子
- 一篇文章
- 一則用戶評論
- 一個可交互的 widget
section 元素
- 按主題將內容分組，通常會有標題 (heading)
- 並非「語義化的
div」
何時使用？
一個簡單的評判標準：當你希望這個元素的內容體現在文檔的提綱 (outline) 中時，用 section 是合適的。
nav 元素
a section with navigation links
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/news">News</a></li>
<li><a>Examples</a></li>
</ul>
</nav>可以幫助 UA 迅速獲得導航內容，例如讀屏器可以省去很多渲染直接跳到導航位置。
不一定要包含 ul，也可用自然文本進行導航。
aside 元素
- 表示與周圍內容關系不太密切的內容 (eg. 廣告)
- 通常表現為側邊欄內容 (eg. 相關背景內容)、引述內容
引述
footer 元素
- 代表最近的父級區塊內容的頁腳
- 作者信息 / 相關文檔 / 版權信息
- 不影響文檔提綱的生成
<footer><!-- site footer -->
<nav>
<p>
<a href="/credits.html">Credits</a> —
<a href="/tos.html">Terms of Service</a> —
<a href="/index.html">Blog Index</a>
</p>
</nav>
<p>Copyright ? 2009 Gordon Freeman</p>
</footer>
title 屬性
- 鏈接 - 描述目標信息
- 圖片 - 版權 / 描述
- 引用 - 來源信息
- 交互元素 - 操作指南
- ...
lang 屬性
內容的語言
head 元素
一組元數據
title 元素
文檔對外的標題
窗口標題 / 歷史記錄 / 搜索結果標題 / ...
meta 元素
name/http-equiv/charsetname屬性決定種類，content屬性表示內容- 標準名稱
(application-name,author,description,generator,keywords) - 擴展名稱 (WHATWG Wiki MetaExtensions)
- Baidu:
mobile-agent,baiduspider - Twitter:
twitter:card,twitter:image,twitter:creator:id - Google:
application-url,google-site-verification,googlebot - 360:
renderer(未註冊)
- Baidu:
鏈接 (links)
鏈接類型
-
外部資源鏈接
指向用來組成當前文檔的外部資源，通常由 UA 自動處理
-
超鏈接
用來「導航」到其他資源 (可以在 UA 中打開, 下載, ...)
元素：link, a, area
link 元素
- 元數據，用來描述文檔本身與其他資源的關系
- 必須包含
rel及href屬性
<link rel="author license" href="/about">link + rel + author, link + rel + license 都有預定義的語義
link + rel
-
rel="stylesheet"鏈接到樣式表 (外部資源)
-
rel="alternate"鏈接到當前文檔的其他形式 (超鏈接)
<link rel="alternate" type="application/rss+xml" title="Matt Mullenweg ? Feed" href="http://ma.tt/feed/" />
→ 
h1–h6 元素
<body>
<h1>Let‘s call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
</body><body>
<h1>Let‘s call it a draw(ing surface)</h1>
<section>
<h1>Diving in</h1>
</section>
<section>
<h1>Simple shapes</h1>
</section>
</body>語義上等價header 元素
- 一組介紹性描述或導航信息 (目錄 / 搜索框 / logo / ...)
- 用來描述最近的父級區塊
- 通常包含
h1–h6 - 不影響文檔提綱的生成
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>footer 元素
- 代表最近的父級區塊內容的頁腳
- 作者信息 / 相關文檔 / 版權信息
- 不影響文檔提綱的生成
<footer><!-- site footer -->
<nav>
<p>
<a href="/credits.html">Credits</a> —
<a href="/tos.html">Terms of Service</a> —
<a href="/index.html">Blog Index</a>
</p>
</nav>
<p>Copyright ? 2009 Gordon Freeman</p>
</footer>address 元素
代表與最近父級 article 或整個文檔關聯的聯系人信息
<address>
<a href="../People/Raggett/">Dave Raggett</a>,
<a href="../People/Arnaud/">Arnaud Le Hors</a>,
contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>
IFE百度前端技術學院4/24/2018