这是我参与「第五届青训营 」笔记创作活动的第1天。

前端与HTML

一、前端工作的定义

前端工程师是使用web技术栈解决多端图形交互的工程师。

二、前端技术栈拆解与分析

HTML（内容）+CSS（样式）+JS（行为） HTTP支持客户端和服务器端的交互

三、前端应该关注哪些方面

美观+功能+无障碍（对所有人都可以用）+安全+性能+兼容性+用户体验

四、前端的边界

1. nodejs 服务器端应用
2. electron，react native 客户端应用
3. webRTC p2p在线传输实现多人会议
4. webgl 3d游戏
5. webassembly 将c++、rust编写的代码编译成可在浏览器中使用

五、开发环境

浏览器+编辑器

HTML

一、什么是HTML

HyperText Markup Language
超文本：图片、标题、链接、表格
标记语言：<h1></h1>

doctype:标记了当前html文件使用的版本。
html：文档的根标签。
meta：不需要呈现给用户的（页面的标题、编码）。
body：要呈现给用户的真正内容。
浏览器解析html代码为dom树，每个结点称为dom结点：

二、HTML语法

1. 标签和属性不区分大小写，推荐小写
2. 空标签可以不闭合，如input、meta
3. 属性值推荐用双引号包裹
4. 某些属性值可以省略。如required、readonly

三、HTML标签

1. 标题h1~h6
2. 列表
   有序列表ol->li
   无序列表ul->li
   key-value列表 dl key:dt value:dd
3. 链接
   <a href="...com/" target="_blank">网站</a> target属性表示新标签页打开。
4. 图片img
   src表示图片地址，alt图片加载不出来时的替代文本
5. 音频audio
   src表示地址，controls表示要显示浏览器默认的播放控件
6. 视频video
   同上
7. 输入input type输入类型，placeholder="..."默认显示内容
   多选type="checkbox" 单选type="radio"
8. 多行文字textarea
9. 下拉选择select
   选项写在子标签option
10. 文本类标签
    a. blockquote快捷引用
    表示长引用，cite属性表示引用自哪
    b. cite短引用，表示引用章节
    c. q短引用，表示引用内容
    d. code代码，多行代码用pre嵌套
    e. strong 加粗，表示重要
    f. em 斜体，表示语气

四、页面结构

1. header 页面元数据
2. main 主体
3. aside
4. footer
   放参考链接，版权信息等

五、语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义。
开发者应遵循语义来编写HTML。