这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端的认识与了解
前端技术栈主要分为HTML（内容）、CSS（样式）和JavaScript（行为）用HTTP协议（网络协议）与服务器交互渲染成所看到的页面。
前端的开发环境，浏览器主要使用Chrome（谷歌浏览器）和Firefox（火狐浏览器），编辑器本人 一般使用Visual Studio Code和WebStorm。
HTML
HTML的全名HyperText Markup Language。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
基础代码为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题> <p> 元素定义一个段落
HTML基础语法：
标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta、img...
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly.
HTML基础
HTML 标题（Heading）是通过h1 - h6标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML 段落是通过标签 p来定义的。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
HTML 链接是通过标签 a来定义的。
<a >href="http://www.****.com">这是一个链接</a>
HTML 图像是通过标签 img 来定义的.
<img src="/images/###.png" width="300" height="200" />
HTML列表：HTML 支持有序、无序和定义列表。 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 ul 标签
<ul>
<li>苹果</li>
<li>葡萄</li>
<li>香蕉</li>
</ul>
- 苹果
- 葡萄
- 香蕉
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 ol标签。每个列表项始于 li标签。列表项使用数字来标记。
<ol>
<li>苹果</li>
<li>葡萄</li>
<li>香蕉</li>
</ol>
- 苹果
- 葡萄
- 香蕉
自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd开始。
<dl>
<dt>红楼梦</dt>
<dd>-曹雪芹</dd>
<dt>西游记</dt>
<dd>-吴承恩</dd>
</dl>
红楼梦
-曹雪芹
西游记
-吴承恩
HTML语义化：
- HTML中的元素属性及属性值都拥有某种含义
- 开发者应遵循语义来编写HTML
- 有序列表用ol，无序列表用ul
- Lang属性表示，内容所使用的语言
