这是我参与「第四届青训营 」笔记创作活动的的第1天
一、本堂课重点内容：
- 前端定义
- 前端技术栈
- 前端重点与边界
- 开发环境
- HTML基本概念
- HTML语法
- 语义化
二、详细知识点介绍：
- 前端定义：利用WEB技术栈解决图形界面下人机交互问题（PC\APP\小程序\VR）
- 前端技术栈：HTML（内容、结构）、CSS（样式）、JS（行为）、HTTP（渲染）
- 前端重点：功能、美观、无障碍、安全、兼容
- 前端边界：react、webRTC
- 开发环境：浏览器+编辑器（VScode、VIM、WEBSTORM）
- HyperText(图片、标题、链接、表格）Markup Language（标记语言）
eg:<标签>内容</标签>
eg:<img 属性名=“属性值”/>
- 骨架/DOM树：
-
HTML语法：
- 标签和属性不区分大小写、推荐小写
- 空标签可以不闭合
- 属性值用双引号包裹
- 部分属性值可以省略
-
标题：
h1：一级标题1
h2：二级标题2
p：内容
h3：三级标题3
-
列表：
- ol:有序列表（li）
- ul:无序列表 (li)
- dl:定义列表(dt列表标题dd具体描述)
-
链接：
a标签表示，href=引用地址
` <a href="https://www.bytedance.com/">字节跳动官网</a>`target="_blank"：打开新标签
`<a href="https://www.bytedance.com/" target="_blank"> 字节跳动官网</a>` -
多媒体：
-
图片：img
-
视频：audio
-
视频：video
src=图片地址/视频url/视频属性
alt="Metal movable type"%%替代性文本
controls%%默认显示
-
-
输入：
input placeholder="默认显示内容"
input type="范围">
input type="number" min="最小值" max="最大值"
input type="date" min="日期"
textarea：多行文本
label：标签
input type="checkbox" ：多选
input type="checkbox" checked ：已选择
input type="radio" name="sport"：单选
select：从多个选择一个
option：选择的内容
input list="countries" ：用户自由输入
datalist：快捷输入
-
文本类：
blockquote cite：长引用
cite：短引用
q:具体引用内容
code：引用代码
strong：加粗
em:斜体
- 页面内容：
-
语义化：
- 代码可读性高
- 可维护
- 搜索引擎优化
- 无障碍
