前端与HTML | 青训营笔记
这是我参加【第四届青训营】笔记创作活动的第3天
转眼间，青训营开课已经三天了，也该把前两天没写的笔记做个总结了。
一、前端
（一）什么是前端？
我们要学习前端web开发，首先要知道前端是什么？前端工程师是干什么的？
一句话概括：前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师。
（二）前端技术栈
浏览器通过HTTP协议和服务器通信，将运行在浏览器中的HTML(定义页面结构内容)、CSS(设置布局样式)、JavaScript(定义网页行为)从服务器端获取后渲染到界面上。
HTTP协议、HTML、CSS、JS构成了前端最基础的技术栈。
（三）前端应该关注哪些方面？
功能、美观、无障碍、安全、性能、兼容性、体验
（四）前端的边界
nodejs、electron、react native、webrtc、webgl、webassembly
（五）开发环境
二、HTML
(一)HTML是什么？
HTML全称为HyperText Markup Language超文本标记语言。其中超文本不只包括文字，还可以是图片、标题、链接、表格等；标记语言是指用标签来描述网页，但又不属于真正意义上的编程语言的标签语言。
（二）DOM树
（三）HTML语法
1、标签和属性不区分大小写，推荐小写；
2、空标签可以不闭合，比如：input、meta；
3、属性值推荐用双引号包裹；
4、某些属性值可以忽略，比如：required、readonly
<!doctype html>：声明为 HTML5 文档<html>：HTML 页面的根元素<head>：头标签<title>：文档标题<body>：页面的内容<h1>：一级标题<p>：段落内容
(四)HTML的部分标签
<h1>~<h6>:标题标签
<ol>:有序列表
<ul>:无序列表
<dl>:一个或多个<dt>分别对应一个或多个<dd>的列表
<pre>:定义预格式化的文本，保留空格和换行符
<a href=""> :通过href插入url链接
<img src="" alt="" width="":图片标签，通过src定位图片位置，当图片因为某种原因无法显示时，显示alt中的内容，width则属性定义图片的宽度
<audio src="" controls>:音频标签，通过sec定位音频位置，controls启动运行
<video src="" controls>:视频标签，属性功能同音频标签一致
<input type="">:输入标签，type决定输入形式
<textarea>:文件框标签
<select>:下拉选择框标签
<code>:代码标签
（五）内容划分
（六）语义化
语义化是什么？
html中的元素、属性及属性值都拥有某些含义；
开发者应该遵循语义来编写html：
有序列表ol，无序列表用ul；
lang属性表示内容所使用的语言
谁在使用我们写的html
开发者-修改、维护页面；
浏览器-展示页面；
搜索引擎-提取关键词、排序；
屏幕阅读器-给盲人读页面内容
语义化的好处
代码可读性；可维护性；搜索引擎优化；提升无障碍性。
如何做到语义化？
了解每个标签和属性的含义；
思考什么标签最适合描述这个内容；
不使用可视化工具生成代码
