这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
本篇笔记只是针对个人不太熟悉的概念进行整理，不代表所有的重点内容。
1、前端应该关注哪些方面？
- 功能 产品有哪些功能，解决什么问题，满足用户哪些方面的需求
- 美观
- 无障碍 对于特殊群体的照顾，如色盲人士
- 安全 保障用户数据的安全
- 性能 速度是否快，动画是否流畅等
- 兼容 是否能在各种设备上使用，如PC端、移动端等
- 体验 用户的体验直接影响对产品的感受
2、前端的边界
- node.js 开发服务器端应用
- electron、React Native 开发客户端应用
- WebRTC 在线文件传输，实现多人会议
- WebGL 开发更流畅的3D游戏
- WebAssembly 开发能直接在浏览器编译的代码调试界面
3、HTML是什么？
HyperText Markup Langurage 超文本标记语言
超文本：图片、标题、链接、表格等
标记语言：<h1>文章标题</h1>
4、<!doctype html>的含义
表示当前文件的HTML版本，浏览器会以此决定使用什么渲染模式。如果不写，浏览器会用奇怪的模式对页面进行渲染，从而导致一些问题。
5、HTML的语法
- 标签和属性不区分大小写。一般原生用小写，自定义组件用大写（为了便于区分）
- 不需要在标签之间放置文本的标签可以不写结束标签，如input、meta，或者在首标签末尾写个斜杠就行。
- 属性值推荐使用双引号包裹
- 某些默认属性值可以省略，只要写个属性名就知道它的属性值是true或者false，所以就能省略属性值，如required、readonly。
6、定义列表
- definition list <dl></dl>
- definition title <dt></dt>
- definition discription <dd></dd>
7、其他标签与属性
- a标签的target属性
target="_blank" 跳转链接时不会替换原有页面，而是在新窗口打开 - input标签的placeholder属性
用户未输入时的默认显示 - input标签的type属性
range 拖动条的形式
number 数字形式，可设置max和min值
date 日期形式，也可设置max和min值
checkbox 方形选择框形式，可选择多个
radio 圆形选择框形式，若name属性相同则只能单选（互斥） - input标签的list属性与datalist标签
list的属性值和datalist的id值相同时，datalist中的若干option标签内的值就能以下拉框的形式在input中选择。当然只是提供选择，用户还是能自由输入内容。
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist> - select和option
多个选项的下拉框形式 - textarea标签
可输入多行文本 - blockquote标签
cite="引用地址"，快捷引用，用于引用一段文本 - cite标签
短引用，引用书名或章节，一般是一个词（字数较少） - q标签
引用上文提到的内容，一般较短 - code标签引用代码
可以引用关键字，如果有多行，要在外面加上pre标签 - em标签表示英语重音
8、HTML的语义化
概念：开发者遵循HTML的元素、属性的规范来编写HTML。
意义：代码可读性；可维护性；搜索引擎优化；提升无障碍体验
9、如何做到语义化
-
了解每个标签和属性的含义 学好基本语法，可参考MDN和W3C规范
-
思考什么标签最适合描述这个内容 内容的呈现比样式重要！
-
不使用可视化工具生成代码 因为模板都是固定的，不方便自主修改
