[ 前端與 HTML | 青訓營筆記]

語言: CN / TW / HK
時間 2023-01-22 03:15:25
主題:

theme: smartblue

這是我參與「第五屆青訓營 」伴學筆記創作活動的第 1 天

什麼是前端工程師？

在學習過程中老師用一句話總結就是：前端工程師是使用web技術棧解決多端圖形使用者頁面互動問題的工程師。

前端技術棧

前端最基礎的技術棧是由我們通常所說的前端三件套（HTML（內容）、CSS（樣式）、JavaScript（行為））以及服務端構成，通過http等網路協議實現互動，由這些就構成了我們所說的前端最基礎的技術棧。

image.png

在系統學習前端之前我並不清楚前端真正應該關注哪些方面，目前我所瞭解並學習的前端的技術棧，給我的感覺就是學習速度跟不上技術棧迭代更新的速度，雖然vue3推出來至今也有兩年半的時間了，雖然目前大部分公司並沒有普及，但是尤大大的團隊依舊在持續更新，當然這些僅僅是技術棧上的關注點，而實際開發過程中我們需要考慮到的方面遠不止這些。

網頁開發的功能、美觀、是否考慮視覺障礙、安全、效能、相容性以及使用者的體驗，這些都是我們在開發過程中需要關注的地方。

HTML

說實話在在此之前，我只知道html是我們俗稱的頁面檔案，網頁最基礎的部分，但是全稱是什麼呢？HyperText Markup Language

相信前端工程師大部分比較喜歡使用VSCode編輯器，不僅僅是輕巧便捷，同樣有很多大佬釋出的實用性很強的外掛，相信我們不少同學在寫HTML的頁面模板都是！快捷鍵生成的，那麼我們通常忽略了的第一行是什麼意思呢？

```

```

其實這行程式碼是告訴瀏覽器html的版本根據這行程式碼去使用哪種渲染模式，如果不加上這一行瀏覽器會採用比較老舊的方式，會導致實際加載出來的畫面可能與你的程式碼不符合。

image.png

  • 標籤和屬性不區分大小寫，通常推薦小寫（在Vue和React中自定義的元件我們通常會駝峰，大寫開頭）
  • 空標籤可以不閉合，比如input、meta
  • 屬性值推薦用雙引號包裹
  • 某些屬性值可以忽略，比如 required、readonly

之前在使用a標籤時都只知道當外鏈使用，但是如果加上target="_blank"這個屬性，則會在瀏覽器新開一個頁面開啟這個外鏈，預設不加的情況是覆蓋當前的url，直接在當前頁面開啟。

語義化

  • HTNL中的元素、屬性及屬性值都擁有某些含義
  • 開發者應該遵循語義來編寫HTML
    • 有序列表用ol；無序列表用ul
    • lang屬性表示內容所使用的語言

使用HTML

  • 開發者 - 修改、維護頁面
  • 瀏覽器 - 展示頁面
  • 搜尋引擎 - 提取關鍵字、排序
  • 螢幕閱讀器 - 給盲人讀頁面內容
「」