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

語言: CN / TW / HK

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

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