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

一、前端基础

1. 什么是前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

总结：前端是通过Web技术栈解决多端用户界面交互问题。

2. 前端技术栈

HTML（内容）、CSS（样式）、JavaScript（行为）、http协议等

3. 前端需要关注的方面

功能、美观、无障碍、性能、安全、兼容、体验等

4. 前端的边界

服务器应用、客户端应用、在浏览器端运行代码、游戏、文件传输等

5. 开发环境

至少有一个浏览器和一个编辑器

浏览器：IE/Edge、Chrome、Firefox、Safari
编辑器：VSCode、Vim、WebStorm

二、HTML

1. 什么是HTML

超文本传输协议

2. DOM树

graph TD
document --> html --> head --> meta
head --> title
html --> body --> h1
body --> p

3. HTML语法

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

4. HTML标签

标题

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    </body>
    </html>

效果展示

列表

有序列表
无序列表
自定义列表
链接、图片、音频、视频

  <a href="https://juejin.cn/">稀土掘金首页</a>
  <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a6519c6f4944bd18a91987126a27a3d~tplv-k3u1fbpfcp-zoom-1.image" alt="字节跳动青训营">
  <video src="#">视频</video>
  <audio src="#">音频</audio>

输入

文本框
密码框
范围
数字
日期
文本域

多选框
单选框
下拉菜单

长引用
短引用
引用之前的内容
引用代码
引用代码块
加粗
倾斜

内容划分

5. 语义化

语义化是什么
- html中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写html
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码

三、个人感受

HTML是前端的入门课程，在我看来，最重要的是掌握HTML中的各种标签并灵活使用，为以后的学习打下基础。还有就是，会做笔记很重要，真的很重要。

前端与HTML | 青训营笔记