这是我参与「第五届青训营 」笔记创作活动的第1天
本堂课重点内容：
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
前端技术栈
HTML元素 + CSS样式 + JavaScript语言
HTML用于描述页面的结构，CSS用于控制页面中的样式、美化页面JavaScript负责页面的行为、用于响应用户操作
HTML 简介
就其核心而言，HTML是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义，将文档结构化为逻辑块，并且可以将图片，影像等内容嵌入到页面中。
HTML 语法
- HTML 标签和属性不区分大小写。不过，从一致性、可读性来说，最好仅使用小写字母。
- 一个HTML元素一般由开始标签，结束标签，内容组成。
- 不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签（br、img、hr、meta、input）。
常用的元素
h元素
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>
一般会用来做标题，h1 级别最高，而 h6 级别最低。（h元素通常与SEO优化有关）
p元素
p元素（HTML 段落元素）表示文本的一个段落。
如果想表示一个段落，这个时候可以使用p元素；p元素的多个段落之间会有一定的间距。
<h1>标题</h1>
<p>第111111111111111111111111111段</p>
<p>第222222222222222222222222222段</p>
img元素
img元素能让浏览器来显示一张图片。
img有两个常见的属性：
- src属性：必要的属性，它包含了你想嵌入的图片的文件路径。
- alt属性：非必要的属性，当图片加载不成功，会显示这段文本；屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。
img元素支持的图片格式：
a元素
a元素定义超链接，用于打开新的URL。或作为当前网页的锚点链接，用于跳转到网页中的具体位置。
a元素有两个常见的属性：
- href：指定要打开的URL地址
- target：该属性指定在何处显示链接的资源。
div元素&span元素
div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的
-
div元素：多个div元素包裹的内容会在不同的行显示，一般作为其他元素的父容器，把其他元素包住；代表一个整体，用于把网页分割为多个独立的部分。
-
span元素：多个span元素包裹的内容会在同一行显示，默认情况下，跟普通文本几乎没差别。
ul、ol、li元素
<ol>和<ul>都代表一组列表数据，不过前者有序，后者无序。
<h2>无序列表</h2>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
语义化
适当使用语义化元素，能增强代码的可读性，也有利于SEO优化
HTML5中新增了语义化的元素：
<header>：头部元素
<nav>：导航元素
<section>：定义文档某个区域的元素
<article>：内容元素
<aside>：侧边栏元素
<footer>：尾部元素
引用参考
