这是我参与「第五届青训营」伴学笔记创作活动的第 1 天。
前端工程师主要任务:使用web技术栈解决多终端GUI人机交互问题。
技术栈分三层:HTML负责内容、CSS负责样式、JS负责行为。三者运行在浏览器里,浏览器依据网络协议与服务器端交互。
主要关注页面功能、美观、无障碍、安全性、性能、兼容性、用户体验。
常用的一些不太直观的缩写标签的含义:
| 标签/属性名 | 含义 |
|---|---|
| ol | ordered list |
| ul | unordered list |
| li | list item, 在ul/ol中使用 |
| dl | definition list 定义列表,t-value形式 |
| dt | definition title 定义列表中一项的type |
| dd | definition description 定义列表中一项的value,可多对一type |
| a | 起源于anchor ,加链接 |
| href | hyper reference 超链接,a标签的引用地址 |
| src | source 多媒体标签的源 |
| alt | alternative text 多媒体加载失败时显示的替代性文本 |
| controls | audio/video 标签用于显示浏览器的播放控件 |
| tr | table row 一行表格 |
| th | table head cell 表头单元格 |
| td | table data cell 表格一般单元格 |
| p | paragraph 一般文本 |
| em | emphasis 文本强调,一般用斜体展示 |
| q | quotation 引用 |
| b | bold 加粗 |
| i | italic 斜体 |
| br | break 换行 |
| u | underlined 加下划线 |
| s | strikethrough 删除线 |
HTML编写遵循语义化原则:HTML中的元素、属性及属性值都拥有某些含义,开发者应该遵循语义来编写HTML。e.g.有序列表用 ol、无序列表用 ul。
强调语义化意义:自己写的HTML同时给开发者修改维护、浏览器展示页面、搜索引擎提取关键词排序、给屏幕阅读器供盲人读页面。
语义化优点:代码可读性、可维护性、搜萦引擎优化、提升无障碍性。关键在于理解每个标签/属性的用途并合理应用。