重學前端

時間 2019-11-12

標籤前端简体版

原文原文鏈接

先來看個大綱

整個系列包含三個部分，即構建Web應用程序或頁面要用的最基本的三部分：HTML、CSS和JavaScript。javascript

HTML部分

HTML語義：只用div和span是否是就夠了？
HTML語義：一篇wiki文章究竟會用到哪些語義元素？
文檔元信息：你知道head裏一共能寫哪幾種標籤嗎？
連接：除了a標籤，還有標籤叫連接？
嵌入型元素：怎麼link一個CSS要用href，而引入JS要用src呢？
HTML標籤：標籤總結
HTML語言：dtd究竟是什麼？
ARIA：可訪問性不止是給盲人用戶的特性

初看了一下提綱中的八個部分。細思了一下，本來自覺得相對了解HTML的我，有幾點仍是不敢確定、準確的說出答案。那麼從我本身的角度來看這幾點。css

HTML語義化

早期的前端開發者都會比較在乎和注重這方面。隨着時代的遷移，其實有不少同窗開始不太在乎這方面的細節。所以在不少網站通篇的只能看到div這樣的標籤元素。但事實上，像div和span這樣的標籤元素是沒有任何語義化的，他們僅僅是隻被運用於佈局上。並且在任何瀏覽器中，都沒法使用鍵盤讓其得到焦點，另外也可訪問性API也沒法進行任何通訊。事實上，構建一個具備語義化的頁面或應用程序，咱們除了使用具備語義化的HTML標籤以外，還須要在結構作一些考量，好比說，header、footer、main、aside、em和strong標籤，應該放在什麼位置，應該在什麼地方使用它們。html

在個人認知裏，一個具備語義化的頁面是要經得起HTML標記驗證服務的驗證。另外還有一種更土的方式，那就是當你的Web頁面在CSS裸奔的時候，結構清晰，並且不會影響用戶對網站的瀏覽。更爲高層次的呢？前端

寫出來的HTML結構要讓機器能夠讀懂，也要能讓人能夠讀懂！java

有關於HTML語義化相關的討論也較多，其中 @E0 大大在知乎上的回答就很詳細。有關於其餘的討論和文章，要是感興趣的話，能夠閱讀下面的幾篇文章：web

The practical value of semantic HTML
Semantics in HTML 5
semantic html
Semantic HTML
Accessibility Through Semantic HTML
Let’s Talk about Semantics

`<head>`能放些什麼標籤

<head>標籤是全部文檔元素的容器，它包含了文檔的所有信息。常見的信息主要包括：<meta>、<title>、<base>、<style>、<link>、<script>和<noscript>等標籤。而其中<meta>的信息量是最大的。好比：api

<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url="/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="150 words"/>
<meta name="keywords" content="your tags"/>
<meta name="robots" content="index,follow"/>
<meta name="author" content="author name"/>
<meta name="google" content="index,follow"/>
<meta name="googlebot" content="index,follow"/>
<meta name="verify" content="index,follow"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-title" content="標題">
<meta content="telephone=no" name="format-detection"/>
<meta content="email=no" name="format-detection"/>
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">

有關於meta標籤更詳細的介紹能夠閱讀：xcode

Meta 標籤與搜索引擎優化
meta 標籤大全
HTML Meta標籤知多少
HTML Tags for SEO: to use or not to use?
Complete list of html meta tags/

連接：除了`a`標籤，還有標籤叫連接？

這個話題我比較期待。在HTML中除了<a>標籤，還有什麼標籤叫連接？在個人印象中，<area>標籤有點相似於<a>標籤，能夠作連接跳轉。可是不是這個答案，我將期待着。瀏覽器

怎麼`link`一個CSS要用`href`，而引入JS要用`src`呢？

這個問題真沒有細想過。前段時間恰好在哪翻到過這方面的討論，能夠找不到答案了。不過在stackoverflow網站上也有一個相似的問題。看了一個點贊較高的答案：性能優化

簡單點說，使用src表達的是該無事的內容能夠被替換，好比img、script、iframe元素；href表達的是超連接，與引用文檔或外部資源創建關係，好比a，link等元素。

其餘

另外幾條，相對而言接觸的比較多。特別是ARIA相關的方面。有關於ARIA相關的東西，在24 Accessibility網站有不少話題。另外在Web內容無障礙指南 2.0是ARIA方面最新的規範指南。

CSS部分

媒體、分頁、視口：除了屬性和選擇器，你還要知道這些帶@的規則
選擇器：爲何只有子元素選擇器，沒有父元素選擇器
佈局正常流：其實從畢昇開始，大家就在用正常流
佈局彈性盒：垂直居中爲何這麼難？
文本：baseline究竟是啥東西？
顏色與形狀：CSS是如何繪製顏色與形狀的？
動畫與交互：爲何動畫要用貝塞爾曲線這麼奇怪的東西？
CSS屬性：CSS總結

對於CSS部分而言，本身相對接觸的比較多一點，若是要把CSS方面的東西講全，那足能夠講很久，甚至花一本書的章節來介紹，都不必定難闡述的完。簡單的列了一個大綱，差很少有26章節的內容可聊。本身也在根據這個大綱完善內容。相比之下，我在完善的內容是怎麼使用CSS，而@winter大大在聊的是爲何？好比其中：