简单认识一下web前端
web前端就是用多种技术制作，用来给用户展示的网页也被称作网站的前台部门。
HTML：（hyper text markup language）超文本表记语言，不具备编译，只是一个文本表达
CSS：装饰器用来修饰HTML，美化网页，是一堆数据，只有结合HTML才会有相对应的用处
JavaScript：一种编程语言
jQuery：一种代码库
BT（bootstrap）：一种开源的代码库，很好的渲染前台网页
JavaScript框架：AugurlarJS、VUE、React、webpack
第一章 HTML
什么是HTML？
HTML是一种超文本标记语言，标记也可以称作标签或者元素。它也是目前网络上使用最广泛之一的，也是最主要的基石。
它是一个描述性文本，浏览器通过这个描述性文本渲染和呈现网页。
它之所以被称为超文本语言是因为它所拥有的“超级链接”和媒体文件。它能够展示文字、表格、声音、图像、动画等等。
注意：HTML并不是一个编程语言，它是一个描述性的文本！
HTML的特点：简单灵活、可扩展性强、平台无关性（和你所使用的系统是无关的）
第二章 运行环境的配置以及浏览器的介绍
运行环境：有浏览器即可
开发环境：建议使用记事本工具
什么是浏览器？
浏览器是渲染和呈现网页的软件。
web前端的地位：
作为一个网站产品，前端页面用户可以直接看到。前端页面可以将文字、图片、视频等内容信息，通过程序语言整合到一个前端页面中，通过用户访问，将网站的产品以及服务展示到用户的面前，从而与用户建立沟通的渠道。
B/S：优点：轻便
HTML的语法结构
语法结构：HTML标签
<标签 属性 = "值">内容</标签>
<p align = "center">标签内容</P>
语法格式：
<p align = "center">标签内容</p>
<p align = "center">表示标签开始
</p>表示标签结束
align表示属性名
center表示属性值
标签的定义：
1、标签通常是由开始标签和结束标签构成，自结束标签例外
2、标签可以由属性，属性必有值
3、开始标签和结束标签之间包裹的内容成为区域
4、标签不区分大小写
标签一般会成对出现，但是也存在自结束标签，例如：
自结束标签
- 以下两种写法都是对的，要不要斜杠都能正常运行。
- < img >
- < img/ >
- < input >
- < input/ >
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。
就像<meta> </meta>这就是一个字节数标签。
ctrl+/可以生成注释
网页的分类
静态网页：是指在不修改源码的前提下，不论何时何地去访问都将显示相同的内容
动态网页：通过用用户提交的信息给网站，而反馈出的页面结果
第三章 HTML的编写
div和span是没有语义的，它们是一个盒子，用来装内容
特点：div标签用来布局，但是现在一行只能放一个div
其中div占一整行，而span占一格
<b></b> 字体加粗
<strong></strong> 字体加粗
<em></em> 斜体
<i></i> 斜体
<u></u> 下划线
<del></del> 删除线
<br> 换行
<p> 段落
<html>
<head>
<meta charset = "utf-8">
<title>段落</title>
</head>
<body>
<p align = "center">
<font color = "#ff0000">第一行</font>
</p>
<p align = "left">第二段落</p>
</body>
</html>
p标签表示段落，两个相邻的p标签之间会空一行，align是p段落的一个属性，right center left对align的值 分别代表右对齐 中心对齐 和左对齐。p标签与br标签有一些相似都能换行，但是br换行时行与行之间不空行。
ont：标签用来修饰字体 color表示字体的颜色 “#ff0000”是颜色值，表示红色。
注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699。
<sub></sub> 表示文字下标
<sup></sup> 表示文字上标
<pre></pre> 表示按照原样输出文本内容
行内标签：占据内容部分，对宽高等属性不能直接起作用。
语义化标签
语义化标签的优点：
1、增强代码可读性，提高程序员的维护效率，降低维护成本。
2、可以为搜索引擎起到引导作用。
多媒体标签
<img>标签：用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址
作业：
<html>
<head>
<meta charset = "utf-8">
<title>这是一个标题</title>
</head>
<body>
<h1><b style="font-size:35px">将进酒<b style="font-size:30px">君不见黄河之水天上来</b></b></h1>
<img src ="1.jpg" alt="图片加载中···" width="300" height="500"style="float: left">
<p> 君不见，黄河之水天上来，奔流到海不复回。</p>
<p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。 </p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>
优化之后：
