这是我参与「第五届青训营」伴学笔记创作活动的第1天
一、初识前端
1.什么是前端？
- 解决GUI人机交互问题
- 跨终端
P/C浏览器
客户端/小程序
VR/AR - Web技术栈
2.前端技术栈
- HTML：负责页面结构与内容
- CSS：设置页面的样式
- JavaScript：定义网页的行为
3.前端应关注哪些方面？
- 产品功能是否满足客户需求
- 界面是否美观
- 是否面向所有客户
- 能否保障所有用户数据的安全
- 网站是否流畅
- 是否能在各种设备上使用
4. 前端的边界
5.开发环境
二、HTML入门
1.什么是HTML？
HTML，是HyperText Markup Language的缩写，即超文本标记语言，用来描述网页的结构与内容。
如我们需要表示一张图片，可用以下代码进行表示：
DOM树：
2.HTML语法
（1）标题标签
h1~h6标签定义标题依次减小，h1标签定义最大标题，h6标签定义最小标题。
（2）列表标签
- 有序列表：ol标签定义有序列表，li标签定义列表项。
- 无序列表：ul标签定义无序列表，li标签定义列表项。
- 自定义列表：dl标签定义，dt标签定义名词，dd标签定义名词解释
（3）链接标签
- a标签标示链接
如在页面中插入字节跳动官网的链接：
- target标签表示在新窗口打开链接
（4）媒体标签
img用于插入图片，audio用于嵌入音频，video用于嵌入视频。
alt用于不加载图片情况下，替代性的文本。scr用于存放路径。
（5）输入键标签
input可以插入一些输入键，如范围，数字，日期等等。
（6）选项标签
让用户在已有的选项中选择，如用户可以选择多个：
用户只可以选择一个：
用户可以下拉选择：
当用户输入时进行提示：
（7）引用标签
- blockquote标签：长引用或快引用，cite属性表示引用来源。
- cite标签：短引用（引用作品名或章节）
- q标签：短引用（引用内容）
- code标签：代码引用
- strong标签：字体加粗
- em标签：字体倾斜
代码效果：
（8）页面内容划分
- header：页头
- nav：页面导航
- main：页面内容主体（只有一个）
- aside：副内容，如广告、热点推荐
- article：正文，可有可无，可有多个
- footer：页尾，如参考链接、版权信息等
3.HTML语义化
（1）什么是语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
有序列表用ol;无序列表用ul
lang属性表示内容所使用的语言
（2）语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
前端工程师的修养：传达内容，而不是样式。
三、课后小结
通过本章“前端与HTML”的学习，我初步了解了前端的技术栈，接触到了HTML的相关标签，与其用法。这部分内容学习起来相对简单与轻松，但正如老师所说，前端学习入门容易，学好困难。因此，今后的学习旅途更需要打起十二分精神。关关难过关关过，前路漫漫亦灿灿。
