这是我参与「第四届青训营 」笔记创作活动的第一天
HTML传达内容，而不是样式
什么是前端？
-
解决 GUI 人机交互问题
-
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
-
Web 技术栈
前端技术栈
HTML(结构)+CSS(样式)+JavaScript(行为)
HTML页面内容
- html贯穿整个页面，
- css可以定义在head头标签中，也可以在定义在html标签的属性中
- JavaScript定义在
前端应该关注的方面
功能、安全、美观、兼容、性能、体验、无障碍
DOM树
HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
HTML内容划分
大部分情况下会使用<div id='header'>之类的div标签进行页面内容划分
语义化是什么？
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用 ol；无序列表用 ul
- lang 属性表示内容所使用的语言
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
谁在使用我们写的 HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
前端性能优化
- 尽量减少HTTP请求 (Make Fewer HTTP Requests)
- 减少[DNS]查找 (Reduce DNS Lookups)
- 避免重定向 (Avoid Redirects)
- 使得 [Ajax]可缓存 (Make Ajax Cacheable)
- 延迟载入组件 (Post-load Components)
- 预载入组件 (Preload Components)
- 减少[DOM]元素数量 (Reduce the Number of DOM Elements)
- 切分组件到多个域 (Split Components Across Domains)
- 最小化[iframe]的数量 (Minimize the Number of iframes)
- 杜绝 http[404]错误 (No 404s)
