这是我参与「第四届青训营 」笔记创作活动的第1天
一、导入部分
1、什么是前端？
前端工程师就是使用web技术栈解决多端图形用户界面交互问题的工程师。①前端技术栈
- HTML(内容):页面、结构、内容
- CSS(样式)
- JavaScript（行为）
2、前端应该关注哪些方面？
①功能②性能③美观④安全⑥无障碍⑦兼容性⑧用户体验
3、前端的边界？
前端并不止于页面。服务器、客户端的开发甚至3D游戏的制作等都有涉猎
4.开发环境
浏览器与编辑器
二、HTML
HyperText Markup Language
1、HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，比如 required、readonly
标签用例(用^^代表>)
- ^a href="https://ww.bytedance.com" target="_blank"/^👉在新标签页打开
- ^img src="图片地址" alt="未加载图片时显示的文字" width="宽度" /^
- ^audio src="音频的url" controls(音频控制) ^^/audio^
- ^input placeholder="请输入用户名"^
- ^input type="date" min="2022-7-24"^
- ^textarea^ Hey ^/textarea^
- ^label^^input type="checkbox" /^🍎^/label^
- ^label^^input type="radio"(只能选一个) /^🍎^/label^
- ^select^
^option^🍊^/option^
^option^🍑^/option^
^option^🍉^/option^
^/select^ - ^blockquote cite="url"^(快捷引用长文字)
- 我最喜欢的一本书是^cite^小王子^/cite^(短引用)，里面曾说过^q^说的话^/q^(引用语言)
- ^code^代码^/code^(引用代码) ^pre^^code^………………^/code^^/pre^(引用多行代码）
- ^strong^内容^/strong^强调
2.语义化是什么？
- HTML里的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
有序列表用ol；无序列表用ul
lang(language)属性表示内容所使用的语言
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
传达内容，而不是样式
小结
编写代码时，最重要的是以人为本，用户或者说观看者的体验是第一要点，所以结构清晰、层次分明是很重要的。这也是“传达内容，而不是样式”所想表达的，内容质量是第一位。
