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

什么是前端？

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

前端技术栈 HTML（内容） CSS（样式） 通过网络协议提交到服务器端 JavaScript（行为） 前端应该关注哪些方面？ ·功能 ·美观 ·无障碍 （能否保证所有用户均可用） ·安全（能否保障用户信息安全） ·性能 ·兼容性 ·用户体验 前端的边界？ nodejs去开发服务器端应用 electron react native去开发客户端应用 Web RTC PtoP 在线传输 多人 Web gl 3D游戏 WebASSEMBLY 不断学习 跟上新技术

HTML（HyperText Markup Language）

浏览器选择渲染模式 根标签 放页面元数据 需要呈现给用户的内容

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

标题h1~h6 关于列表的标签 有序列表

无序列表

描述

定义列表

标题

描述上一标题

可以多对多

链接 target="_blank" 表示新窗口的打开

多媒体 图片 音频 视频

输入 占位符 未输入之前显示 滑动块 选择范围 输入数字 可以限定范围 日期

Hey文本域

选择

可以多选 xx xx

单一选择 name相同 xx xx

选项太多 下拉选择

想要用户输入一些信息，有提示选项，但不会限制输入内容

1 2 3

文本类内容

快即引用

我最喜欢的一本书是小王子。

短引用，例如表示一段话中引用其他书名 或者章节

也是短引用与cite区别 cite多用于名字或章节 q常用于具体内容

const

代码标签 当引用多行代码时

加粗强调 重要紧急 程度强调 斜体强调 语气强调

内容划分 header 页头 nav 导航 main 主体（一般来说，只有一个主体）
article aside相关推荐 article footer 页尾

语义化是什么？ ·HTML中的元素、属性及属性值都拥有某些含义 ·开发者应该遵循语义来编写HTML ·有序列表用ol；无序列表用ul ·lang属性表示内容所使用的语言

谁在使用我们写的HTML ·开发者-修改、维护页面 ·浏览器-展示页面 ·搜索引擎-提取关键词、排序 ·屏幕阅读器-给盲人读页面内容 语义化的好处 ·代码可读性 ·可维护性 ·搜索引擎优化 ·提升无障碍性

HTML是传达内容，而不是样式 如何做到语义化？ ·了解每个标签和属性的含义 ·思考什么标签最适合描述这个内容 ·不使用可视化工具生成代码