这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天 其实前端三件套早就掌握啦，但温故而知新又有了新的收获。对前端关注点的学习让我进一步有了提升前端水平的方向，前端的边界打破了我对前端只能在浏览器里的认知、也提供我了解决一些现实业务的思路，前端语意化往往被我忽略，常常一个div解决所有问题，未来我也要注意前端语意化，提升自己代码的可读性、可维护性、无障碍性。
前端技术栈
前端的关注点
美观 功能 安全 无障碍 性能 兼容性
前端的边界
nodejs 服务器端 electron 客户端应用 react native 客户端应用 webrtc 端对端传输 webgl 3d游戏 webassembly 集成其他语言编写的代码到浏览器
开发环境
浏览器
ie/edge chrome firefox safari
编辑器
vscode vim webstrom
html
html是什么？
HyperText Markup Language
hypertext
图片、标题、链接、表格
Markup Language:
<h1>文章标题</h1>
<img src="phonto.jpg"/>
src为“属性” phonto.jpg为属性值
实例
<!doctype html> 标记当前html文件是什么html版本，不写会导致，页面渲染一场
<html> 根标签
<head> 不直接呈现的信息
<body> 需要呈现给用户的内容
dom树
每一个节点成为dom节点
F12可以打开查看
语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
标题
h1-h6
列表
有序列表<ol>与<li>配合使用
无序列表<ul>与<li>配合使用
定义列表<dl>与<dt><dd>配合使用
链接
<a> href链接指向
多媒体
<img/> 图片
<audio/>声音
<video/>视频
输入控件
<input> 输入框，不仅仅是文本框,拖动条，checkbox
<textarea> 文本区，长文字
<select>+<option>
文本类
<blockquote> 块引用/长引用
<city> 短引用，引用名字/章节
<q> 内容
<code> 代码引用
<strong> 强调加粗
<em> 强调斜体
内容划分
语意化
HTML中的元素、属性及属性值都拥有某些含义 开发者应该遵循语义来编写HTML 有序列表用 ol;无序列表用 ul lang 属性表示内容所使用的语言
意义
- 开发者，方便修改维护页面，提升代码可读性
- 浏览器，识别、展示页面，提升可维护性
- 搜索引擎，提取关键词、排序，搜索引擎优化
- 屏幕阅读器，给盲人读页面内容，提升无障碍性。
