HTML與前端

360前端星計(jì)劃-第一課
主講：趙文博老師

什么是前端

用web技術(shù)棧解決多端的人機(jī)交互的問(wèn)題

前端技術(shù)棧

HTML（內(nèi)容）CSS（樣式）JavaScript（行為）

關(guān)注問(wèn)題

美觀、安全、功能、性能、無(wú)障礙

開(kāi)發(fā)環(huán)境

編輯器（VScode）、瀏覽器

HTML

超文本（圖片、標(biāo)題、鏈接、表格、音視頻等）+標(biāo)記語(yǔ)言

瀏覽器解析HTML==》DOM樹(shù)

HTML語(yǔ)法

1.標(biāo)簽和屬性不區(qū)分大小寫(xiě)，推薦小寫(xiě)
2.空標(biāo)簽可以不閉合，比如 input、meta
3.屬性值推薦用雙引號(hào)包裹
4.某些屬性值可以省略，比如 required、readonly

語(yǔ)義化

1.HTML中的元素、屬性及屬性值都擁有某些含義
2.開(kāi)發(fā)者應(yīng)該遵循語(yǔ)義來(lái)編寫(xiě)HTML
有序列表用 ol；無(wú)序列表用 ul
lang 屬性表示內(nèi)容所使用的語(yǔ)言

為什么語(yǔ)義化

• 誰(shuí)在使用我們寫(xiě)的 HTML
  開(kāi)發(fā)者 - 修改、維護(hù)頁(yè)面
  瀏覽器 - 展示頁(yè)面
  搜索引擎 - ?????提取關(guān)鍵詞、排序
  屏幕閱讀器 - 給盲人讀頁(yè)面內(nèi)容
• 語(yǔ)義化的好處
  代碼可讀性
  可維護(hù)性
  搜索引擎優(yōu)化
  提升無(wú)障礙性
  

如何做到語(yǔ)義化

• 了解每個(gè)標(biāo)簽和屬性的含義
• 思考什么標(biāo)簽最適合描述這個(gè)內(nèi)容
• 不使用可視化工具生成代碼

總結(jié)

以上是生活随笔為你收集整理的HTML与前端的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。