这是我参与「第五届青训营 」伴学笔记创作活动的第1天
本堂课重点内容：
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML作用解析
- HTML语义化
知识回顾
问：什么是前端? （核心技术：HTML、CSS、JavaScript）
答：前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。广泛应用于以下几个方面：
- 解决 GUI 人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
- Web 技术栈
一个好的前端开发不仅要实现功能，还要关注安全、美观、体验、性能、无障碍等方面。
详细知识点介绍
一个完整的HTML代码格式:
一个完整的HTML内部结构:
问：语义化的好处？
答：代码实现语义化使阅读起来比较简洁易懂，主要从以下三点来体现：
1. 语义化的含义
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用 ol;无序列表用 ullang 属性表示内容所使用的语言
2. HTML的使用对象
- 开发者👉修改、维护页面
- 浏览器👉展示页面
- 搜索引擎👉提取关键词、排序
- 屏幕阅读器👉给盲人读页面内容
3.语义化的优点
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
具体案例
（h1~h6标签、p标签、input标签、ol/ul>li标签等）
- h1~h6/p标签
注：h1~h6发生了变化的是字体大小。在一个HTML文档里面只能有一个h1标签。p标签、h1~h6标签内容建议只放文字。
- input标签
input标签的作用很广，它可以是一个按钮，可以是一个单选框或者复选框，也可以是一个文本框等。
注意：不同类型的input标签对输入的内容有不同的要求。像number类型的只能输入数字,不能输入字母或特殊符号等。date类型的内容必须按照日期格式。
- ol/ul>li标签
表示列表有两大类：1. 有序列表(ol/li) 2. 无序(ul/li)列表
注：ol和ul标签的子元素只能是li标签!但li标签里面可以包含任何标签，且使用li标签时其父元素只能是ul或者ol。
- 引用标签
注：block quote 快捷引用；cite短引用（引用作品名字和章节）；q短句引用（引用具体事物的内容）。
注：<pre><code> 代码引用；strong表示这个东西很重要（强调含义）；em表示说话的重点所在（强调语气）
- a标签
超链接可以是一个字/词，或一组词/一幅图像，点击则跳转到新文档或现文档中的某个部分。 - img标签
img标签是对图片引入的一种方式。src:获取图片的地址。
注：img标签的初始大小由图片的大小决定，但可以通过调整标签大小来调整图片的大小。
- audio标签 👉 定义声音，比如音乐或其他音频流。
- video标签 👉 定义视频，比如电影片段或其他视频流。
注：目前，video>元素支持三种视频格式：MP4、WebM、Ogg。
结尾
今天主要学习标签的使用，对前端开发的实现方向与要点有了很清晰的认知。虽然对标签的使用不是很熟练，但是对于初学者入门来说,先了解这些常用标签对后面的学习来说有着事半功倍的效果。
综上，今天又是好好学习的一天！😊
