这是我参与「第四届青训营 」笔记创作活动的的第1天。
第一天的内容主要包括前端的基础知识和HTML常用的标签。内容较为基础，对初学者较为友好。
以下是第一节课主要内容的总结：
基础知识部分
什么是前端?
- 前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师
前端技术栈
- HTML 结构
- CSS 样式
- Javescript 行为
（运行在浏览器里，浏览器通过HTTP协议和服务器端进行通信）
前端应该关注的问题
- 功能、美观、无障碍、安全、性能、兼容性、用户体验
前端的边界
- nodejs开发服务器端的应用
- 使用electron或开发客户端的应用
- WebRTC进行P2P在线传输实现多人会议
- WebGL开发3D游戏
开发环境
浏览器：IE,Chrome，Firefox，Safari
编辑器：VSCode，Vim，WebStorm
HTML介绍部分
HTML是什么
- 全称HyperText Markup Language，指的是超文本标记语言。
一些重要的HTML标签
<!doctype html>标记HTML版本<html>根标签<head>页面元数据 不需要呈现给用户的内容<body>呈现给用户的内容
（浏览器会把HTML解析为DOM树结构）
HTML语法特点
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
常用标签
标题标签
<h1> ~ <h6>
列表标签
<ol>有序列表<ul>无序列表<dl>定义列表
<dt>列表标题
<dd>具体描述
链接标签
<a href=" ">
多媒体标签
<img><audio><video>
输入
<input type=" "><textarea>输入多行内容
文本类标签
<blockquote>长引用<cite>短引用<q>短引用 表示引用内容<code>引用代码<pre>引用长段代码时包裹在code标签外
强调标签
<strong>重要内容<em>重音，需要重读的内容
内容划分标签
- header
- main -> article
- aside
- footer
HTML语义化
- HTML中的元素、属性、属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
谁在使用我们写的HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容，也指正常人在特别场景下的使用
语义化的好处
- 代码可读性
- 可维护化
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述某个内容
- 不使用可视化工具生成代码
以上是第一天课程的主要内容，让大家对HTML有了基本的了解。HTML标签相关的详细内容可以参考MDN网站上的相关介绍。
