前端与 HTML | 青训营笔记

489 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天。

前端工程师主要任务:使用web技术栈解决多终端GUI人机交互问题。
技术栈分三层:HTML负责内容、CSS负责样式、JS负责行为。三者运行在浏览器里,浏览器依据网络协议与服务器端交互。
主要关注页面功能、美观、无障碍、安全性、性能、兼容性、用户体验。
常用的一些不太直观的缩写标签的含义:

标签/属性名含义
olordered list
ulunordered list
lilist item, 在ul/ol中使用
dldefinition list 定义列表,t-value形式
dtdefinition title 定义列表中一项的type
dddefinition description 定义列表中一项的value,可多对一type
a起源于anchor ,加链接
hrefhyper reference 超链接,a标签的引用地址
srcsource 多媒体标签的源
altalternative text 多媒体加载失败时显示的替代性文本
controlsaudio/video 标签用于显示浏览器的播放控件
trtable row 一行表格
thtable head cell 表头单元格
tdtable data cell 表格一般单元格
pparagraph 一般文本
ememphasis 文本强调,一般用斜体展示
qquotation 引用
bbold 加粗
iitalic 斜体
brbreak 换行
uunderlined 加下划线
sstrikethrough 删除线

HTML编写遵循语义化原则:HTML中的元素、属性及属性值都拥有某些含义,开发者应该遵循语义来编写HTML。e.g.有序列表用 ol、无序列表用 ul。
强调语义化意义:自己写的HTML同时给开发者修改维护、浏览器展示页面、搜索引擎提取关键词排序、给屏幕阅读器供盲人读页面。
语义化优点:代码可读性、可维护性、搜萦引擎优化、提升无障碍性。关键在于理解每个标签/属性的用途并合理应用。