開頭

Web前端開發基礎知識學習路線分享，前端開發入門學習三大基礎：HTML、CSS、JavaScript。除此之外還要學習數據可視化、Vue、React、Angular相關框架，熟練運用框架提升開發效率，提升穩定性。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-P8Df7Ow9-1622807228562)(//upload-images.jianshu.io/upload_images/23082890-b561553d82597393.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/771/format/webp)]

標簽語義化：

語義和默認樣式的區別：

• 默認樣式是瀏覽器設定的一些常用tag的表現形式；
• 語義化的主要目的就是讓大家直觀的認識標簽和屬性的用途和作用；

標簽語義化作用：

• 當只有HTML頁面時，沒有CSS，我們仍然可以很清晰的看懂頁面的DOM結構
• 團隊維護，當團隊來review代碼或者重構時，增強代碼的可讀性，更利于維護
• 有利于SEO，搜索引擎爬蟲依賴于標簽來確定上下文和各個關鍵字的權重
• 提高用戶體驗，比如 title 和 alt 等用來解釋內容信息

常用語義化的標簽：

• <header>頭部標簽，用來寫網頁最上方的公共頭部，也就是頁眉。

<header><h1>一級標題</h1><h2>二級標題</h2>
</header>

• <nav>標簽，用來寫導航，一般寫在<header>標簽里面，內部用<ul>無序列表。

<nav><ul><li></li><li></li><li></li></ul>
</nav>

• <code>：code可以包裹html語句而不會被瀏覽器再去解析。

• <pre>，<samp>：這是一段HTTP協議的內容描述，因為這段內容的換行是非常嚴格的，所以我們不需要瀏覽器幫我們做自動換行，因此我們使用了pre標簽，表示這部分內容是預先排版過的，不需要瀏覽器進行排版。

• <article>標簽，當我們要寫網頁文章的主要內容時，要用到這個標簽。

<article><h2>標題</h2><p>內容</p>
</article>

• <address>標簽，定義文檔作者或擁有者的聯系信息。

如果 <address> 元素位于<article>元素內部，則它表示該文章作者或擁有者的聯系信息。

通常的做法是將 address 元素添加到網頁的頭部或底部。

• <p>段落標簽

知道了

作為段落，你就不會再使用<br/>來換行了，而且不需要<br/>來區分段落與段落。
<p></p>中的文字會自動換行，而且換行的效果優于<br/>。

<p>段落內容</p>

• <span>標簽

<span>標簽的語義為被用來組合文檔中的行內元素

• <b>、<em>、<strong>

<b>標簽語義為“加粗”

<em>標簽語義為“強調”

<strong>標簽語義為“更強烈的強調” 而且em 默認用斜體表示，strong 用粗體表示。

結尾

學習html5、css、javascript這些基礎知識，學習的渠道很多，就不多說了，例如，一些其他的優秀博客。但是本人覺得看書也很必要，可以節省很多時間，常見的javascript的書，例如：javascript的高級程序設計，是每位前端工程師必不可少的一本書，邊看邊用，了解js的一些基本知識，基本上很全面了，如果有時間可以讀一些，js性能相關的書籍，以及設計者模式，在實踐中都會用的到。

資料領取方式：戳這里免費獲取

的書籍，以及設計者模式，在實踐中都會用的到。

資料領取方式：戳這里免費獲取