这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端简述
前端内容
- 解决GUI人机交互问题
- 跨终端 【PC端或移动端浏览器、客户端及小程序、VR及AR】
- 技术栈
- 基础 - HTML内容 CSS样式 JavaScript行为 网络协议
前端关注点
- 美观
- 功能
- 安全
- 无障碍
- 性能
- 体验
- 兼容
前端范围
- 后端 Node
- 客户端 Electron ReactNative
- 在线会议 WebRTC
- 游戏 WebGL WebGPU
- 其他语言使用 WebAssembly
前端开发环境
浏览器
编辑器IDE
HTML
html = hypertext markup language
<h1>标题</h1>
<img src="photo.jpg" />
DOM 树
语法
- 标签及属性不区分大小写，推荐使用小写
- 空标签可以不闭合
- 属性值使用双引号包裹
- 部分属性的属性值可以省略
常见标签
-
页面标签 !doctype html head body
-
标题标签 h1~h6
-
列表标签
- 有序列表 ol li
- 无序列表 ul li
- 描述列表 dl dt dd
-
链接 a
-
图片 img
-
音频 audio
-
视频 video
-
表单
- 输入框 input
- 多行输入 textarea
- 标签 label
- 选择 select-option
- 提示选择 datalist-option
-
文本格式化
- 块级引用 blockquote
- 作品 cite
- 行内引用 q
- 代码 code
- 强调 strong em
-
内容
- header
- nav
- main
- article
- aside
- footer
语义化
建议遵循语义来编写HTML
有序列表使用 ol、无序列表使用 ul
使用lang属性表示内容使用的语言
便于开发者修改维护页面、浏览器展示页面、搜索引擎提取关键词及排序并协助屏幕阅读器朗读页面内容
可以提升代码可读性、可维护性、搜索引擎优化、提升无障碍性
传达内容而非样式（html专注表现内容并使用css传递样式）
做法
了解各个标签及属性的含义
使用相对适合的标签而非通用的标签
尽量减少使用可视化工具
