HTML与前端
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é)
- 上一篇: 推荐一个临时邮箱生成网站,专门用于各种注
- 下一篇: 手机端如何阻止苹果浏览器输入框默认放大事