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

前端概览

什么是前端
前端的技术栈
前端的边界
前端的关注点

什么是前端？

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

屏幕截图_20230117_122224.png

前端应该关注哪些问题？

屏幕截图_20230117_122626.png

前端的边界

屏幕截图_20230117_122755.png

node 服务器端开发
electron、react native 客户端开发
WebRTC P2P 在线传输（多人会议）
WebGL 图像
WebASSEMBLY 将其他语言编译为浏览器可运行的代码

HTML

全称： HyperText Markup Language（超文本标记语言）

超文本：图片，标题，链接，表格等
标记语言：标签

<!doctype html> 标记html版本，若不指定，浏览器会以比较老的模式渲染，与预期不符

<html>
</html>

HTML的根标签

<head>
</head>

其指定了页面的源数据，即页面需要但不会直接呈现给用户的信息

<body>
</body>

真正展示给用户的内容大体样式：

屏幕截图_20230117_124759.png

DOM树

浏览器拿到html后会解析成一颗dom树
如图：

59b2d48679824a4783ea17a1f4e524af_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp

html语法

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

标签类型

标题

h1~h6

屏幕截图_20230117_125330.png

列表

屏幕截图_20230117_125345.png

链接

屏幕截图_20230117_125752.png 其中的 target 属性设置为_blank可以不替换原有页面打开新的页面

多媒体

屏幕截图_20230117_125410.png img的alt属性可以实现降级加载，在网络资源拥挤时显示文本来弥补图片无法加载
audio与video的controls可以使的对上传的文件进行播放与修改

输入

屏幕截图_20230117_130254.png

input 有多种类型选择，包括 range、number、date、file 等。

对于多行输入文字，我们可以采用 textarea 标签。

对于一些需要用户选择的选项，我们可以采用 input 的 checkbox（多选）、radio（单选）、select（下拉选择）来编写。

可以给 input 添加 list 属性，对于已有的选项提供快捷输入方式，并不限制文本的自由输入

e56ec73fac7d45ee9d1b6327e7989617_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp

引用标签

屏幕截图_20230117_130653.png

blockquote块级引用，里面的cite属性包含引用的来源

cite短引用，一般表示作品名字或章节

q标签短引用，一般是具体内容

code标签表示一些代码，对于多行需要在外面包裹pre标签

strong,em标签都表示强调，strong强调很严重、很紧急
em大多表示语气比较强烈

屏幕截图_20230117_131212.png

内容划分

屏幕截图_20230117_131434.png

语义化

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

谁在使用我们的html

开发者 - 修改、维护页面
浏览器 - 展示页面
搜索引擎 - 提取关键字、排序
屏幕阅读器 - 给盲人读页面内容

传达内容而不是样式！

如何做到语义化？

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

前端与HTML | 青训营笔记