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

第一节课感觉比较基础，算是复习巩固之前的基础知识趴，简单介绍前端和HTML的一些相关知识：

一、什么是前端？

• 解决GUI人机交互问题（GUI：图形用户界面）

• 跨终端

  • PC / 移动浏览器
  • 客户端 / 小程序

• Web技术栈

二、前端相关技术栈

1. HTML（内容）
2. CSS（样式）
3. JavaScript（行为）
4. 网络协议（HTTP协议）

三、前端关注点

美观 安全 兼容性 体验 性能 阅读无障碍

四、前端边界

• Node.js：服务器端应用
• ELECTRON、React Native：客户端应用
• WebRTC：点对点 在线传输
• WebGL：3D游戏
• WebASSEMBLY：在浏览器运行语言代码

六、HTML初识

HyperText（超文本）：如图片、标题、链接、表格

Markup Language（标记语言）：<h1>一级标题</h1>

示例：

七、HTML常见标签

• 标签和属性不区分大小写，推荐小写
• 可以参考[菜鸟教程](HTML 教程 | 菜鸟教程 (runoob.com))

7.1 链接

<a href="[掘金 - 代码不止，掘金不停 (juejin.cn)](https://juejin.cn/)">掘金官网</a>

• href：跳转地址
• target：打开新的标签（_blank）

7.2 输入

<input>

• 范围（range）、数字（number）、多选框（checkbox）、单选框（radio）
• min/max：最大值最小值（type="n"）、日历（type=“date”）

7.3 文本

引用：

• <blockquote>：快捷引用

• <cite>：短引用/标题

• <q>：短引用/内容

• <code>：单行代码引用

• <pre>><code>：多行代码引用 强调：

• <strong> ：含义强调

• <em>：语气强调

7.4 板块划分

• <header>：页头
• <nav>：导航
• <main>：主体
• <article>：文章
• <aside>：侧边栏
• <footer>：页尾

7.5 语义化

• HTML 中的元素、属性及属性值都拥有某些含义
• 保证代码可读性
• 提升无障碍性

打卡第一天！最后放一张可爱的阿尼亚~