这是我参与「第五届青训营 」伴学笔记创作活动的第3天
本文主要介绍前端的定义、技术栈、关注点、边界、开发环境，还有HTML的概念、DOM树、语法、部分标签、语义化和使用场景。
前端
定义
前端工程师使用web技术栈，解决GUI（图形用户界面）人机交互问题。
技术栈
- JavaScript（行为）
- CSS（样式）
- HTML（内容）
关注点
功能、美观、安全、体验、无障碍、性能、兼容性
边界
范围较大，有：
- nodejs
- ELECTRON
- React Native
- WebRTC
- WebGL
- WebASSEMBLY
开发环境
- 浏览器：
- IE/Edge 、Chrome 、Firefox 、Safari
- 编辑器：
- VSCode 、Vim、 WebStorm
HTML
概念
超文本标记语言（HyperText Markup Language），包含图片、标题（h1~h6）、链接、表格等标签。例如：
-
<title>页面标题</title> -
<h1>一级标题</h1> -
<p>段落内容</p>
<img src="photo.jpg">
img代表图片，src是属性名，photo.jpg是属性值。
DOM树
浏览器解析代码后，产生DOM树。
语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input 、meta
- 属性值，推荐双引号包裹
- 可以忽略某些属性，比如required、readonly
标签
列表
顺序列表ol
- 苹果
- 西瓜
- 芒果
无序列表ul
- 苹果
- 西瓜
- 芒果
py6形式的列表dl
<dl>
<dt>水果：</dt> 水果：
<dd>苹果</dd> 苹果
<dd>西瓜</dd> 西瓜
<dd>芒果</dd> 芒果
链接
使用标签a，设置超链接。 例如：
<a href = "https://wwww.bytedance.com/">
字节跳动官网
</a>
图片
使用< img />单标签。alt的属性值是图片的文字描述，当出现加载失败等原因时，会显示文字描述。例如，引用图片xxx.jpg。
音频
使用双标签audio，例如引用音频xxx.ogg。一般情况下，显示默认的播放空间。
视频
使用双标签video，例如引用视频xxx.mp4。
输入框
- 使用标签input，可以完成多种设置。例如：
-
用占位符placeholder，设置输入框初始状态下的默认值。 -
设置type的属性值为range，显示出可拖拉的进度条。 -
设置type的属性值为number，并设置好min和max值，显示可上下调整的数值范围。 -
设置type的属性值为date，并设置好min值，显示可选择年月日的日期。
- 使用标签textarea，实现多行输入的文本框。
选项
- 单选
使用label，展示全部选项；使用select，可以折叠选项。
例如：使用label，实现苹果、西瓜中二选一。
<p>
<label><input type = "radio" name = "fruit" /> 苹果 </label>
<label><input type = "radio" name = "fruit" /> 西瓜 </label>
</p>
相同的name属性值，选其中一个。
- 多选
使用标签label
- 输入选项的前几位字符，可自动匹配选项
用输入框input设置好list的属性值，使用datalist设置id值为list值，option写下多个选项，即可实现。
引用
- 长引用blockquote
- 短引用cite
- 双引号q
代码
使用标签code，代码中的const可用于声明创建一个只读常量。
段落
- 单行p
- 多行pre
强调
- strong，效果为字体加粗。
- em，效果为字体倾斜。
语义化
- HTML中的元素，属性及属性值都拥有某些含义。
- 开发者应该遵循语义来编写HTML。
- 优点：代码可读性、可维护性、搜索引擎优化和提升无障碍性。
- 做法：
- 了解每个标签和属性的含义
- 不使用可视化工具生成代码
- 思考选择适合描述当前内容的标签
使用场景
- 开发者 ——> 修改、维护页面
- 浏览器 ——> 展示页面
- 搜索引擎 ——> 提取关键词、排序
- 屏幕阅读器 ——> 给盲人读页面内容
