这是我参与【第四届青训营】笔记创作活动的第一天。
先说总结：前端工程师是使用web技术栈，解决多端图形、用户界面交互功能的工程师。
前端技术栈
分为三层，分别是html（内容）、CSS（样式）、JavaScript（行为），再通过http（网络协议）与服务器进行交互。
前端应关注功能、美观、无障碍、安全、性能、兼容性。
前端的开发环境：游览器:IE/Edge、Chrome、Firefox、Safari。
编辑器：VSCode、Vim、WebStorm。
<img src="photo.ipg" />，其中src表示属性名、photo.jpg表示属性值。
DOM树
graph TD
document --> html
html --> head
html --> body
head --> meta
head --> title
body --> h1
body --> p
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required，readonly
列表
- 有序列表
<ol> <li>阿凡达</li></ol> - 无序列表
<ul> <li>变形金刚</li></ul> - 定义列表
<dl><dt>导演</dt><dd>陈凯歌</dd></dl>
链接
字节跳动官网<a href="https://www.bytedance.com/">
语义化是什么？
- HTML中地元素、属性以及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所用的语言
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 游览器-展示页面
- 搜索引擎-提供关键词、排序
- 屏幕阅读器-给盲人读页面的内容
语义化的好处
-
代码可读性
-
可维护性
-
搜索引擎优化
-
提升无障碍性
传达内容，而不是样式
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
个人总结
今天先简单介绍了前端三件套的大概，然后主要讲述了html的部分内容。
html主要由head和body组成，我们通常是在body中填写主要内容。而我们学习了列表和链接等功能帮助我们更好地填写内容。
之后我们学习的一个关键知识点便是语义化。语义化指的是HTML中地元素、属性以及属性值都拥有某些含义，而开发者应该遵循语义来编写HTML。语义化通常是帮助其他，如后续的开发者看懂你的代码并可以轻松做到对你的代码进行一些修改，这需要长期培养自己合法、规范写代码的习惯。
