1.什么是web前端？
简单的来说就是一个网站；
web前端就是由多种技术制作，用来给用户展示的页面，也可以认为是网站的前台部分。
那这里的所谓的多种开发技术就是我们本次课程要学习的东西，其中包含：
- HTML
- CSS
- JavaScript
- jQuery
- BT（Bootstrap）
更高端的前端技术：
2.6 网页分类
第三章 HTML常用的标签
3.1 第一个HTML程序
html标签
html标签表示网页的开始，应该把它放在最外层，其他所有的标签出去文件头声明都该放在html标签内。
head标签
表示头部标签，通常放title、meta、style等标签。从这些名字就能看出来，head标签的作用是用来定义页面属性。
body标签
表示主体标签，网页上所有要显示的内容都放在这个标签内。
meta标签
meta标签下载head标签内，meta提供了网页的信息，包括作者、关键字、网页编码、自动刷新等信息。
常用的网页编码有：GB2312 UTF-8 BIG5 GBK
3.2 常用标签
<img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png">
</body>
</html>
strong/b 标签
这俩标签显示效果一样，都是加粗的效果，strong有强调语气的意味，但对我们程序员来说显示效果一致的话，选简单的。主要使用b标签表加粗
em/i 标签
em、i标签都是加斜文本的标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。
u和del标签
u表示下划线，del的表示删除线。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>粗体|斜体|下划线|删除线</title>
</head>
<body>
<strong>粗体</strong>
<b>也是粗体</b>
<em>斜体</em>
<i>还是斜体</i>
<u>下划线</u>
<del>删除线</del>
</body>
</html>
3.2.2 br、hr标签
br标签表示换行 hr标签表示分割线
我们还是以代码为例来演示下效果。
<html>
<head>
<meta charset = "utf-8">
<title>换行|分割线</title>
</head>
<body>
<br>这是一个换行符测试<hr width = 400 size = 1 noshade>这是一条分割线
</body>
</html>
注意：网页源代码中的回车在浏览器中并不表示换行。
3.2.3 p标签
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换行时行与行之间不空行。
font：标签用来修饰字体 color表示字体的颜色 “#ff0000”是颜色值，表示红色。
注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699。
3.2.4 sub、sup、pre、span标签
sub表示文字下标；sup表示文字的上标 ；pre标签原样输出文本内容；span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>sub sup pre span</title>
</head>
<body>
2<sup>2</sup>=4<br>
数组a的2下标：a<sub>[2]</sub><br>
<hr>
<span style="color:purple;font-size:20px">这是一个标准输出</span><br>
<pre>
静夜思 —— 李白
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡
</pre>
</body>
</html>
行内标签：占据内容部分，对宽高等属性不能直接起作用。
3.2.5 hn、div标签
hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题。
div标签是一个标准的块标签，主要用来布局。
h1<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题和div</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<div></div>
</body>
</html>
块标签：占据整行空间，对宽高等属性生效。
3.3 语义化标签
优点：
增强代码可读性，提高程序员的维护效率，降低维护成本。
可以为搜索引擎起到引导作用。
3.4 多媒体标签
img标签
目前在网页中使用的图片主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使用居多。
GIF 支持动画和背景透明，同时图片通常比较小，但仅支持 256 色以内的图像，因此色彩不够丰富。
JPEG 支持 1670 万种颜色，但不支持动画和背景透明。当想要背景透明的时候，一般会使用PNG格式的
图片，所以我们可以根据两者的优缺点来选择图像的格式。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>在网页中插入图片</title>
</head>
<body><!--
img标签用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址 如下面的就是表示在当前文件夹下有个images文件夹，里面有个图片， 名称叫做rose.jpg，这种叫做相对路径寻找法
-->
<img src="images/rose.jpg"> <!-- 当然也可以这样写，和上面一个意思 -->
<img src="./images/rose.jpg"> <!--
这样写表示绝对路径查找，一般很少这样写，因为这个路径只是这台电脑的路径， 换一台电脑就没有这张图片了
-->
<img src="c://images/rose.jpg"> <!-- 如果路径是网络路径也可以滴哦~~ -->
-
Angular
-
AngularJS
-
VUE
-
React
-
webpack
-
nodejs等等
-
什么是HTML？
HTML：hyper text markup languge，超文本标记语言，标记也可以称作标签或者元素.
它是使用目前网络上使用最广泛之一，也是主要的基石。
它是一个描述性文本，浏览器通过这个描述文本渲染和呈现网页。
它之所以被称为超文本标记语言是因为它拥有所谓的“超链接”和媒体文件.
它能展现文字，表格，声音，图像，动画等等。
注意：HTML不是一个编程语言，他是一个描述性的文本。制定了
HTML的历史
创作者叫博纳斯~李，90年创建的HTML的雏形，目的是为了MIT和欧洲核子物理研究所之间学术交流。
HTML2.0有IEFT组织制定推出，之后优博纳斯里领先W3C制定了HTML的规范协议，之后W3C制定了HTML4.01标准，他是一个里程碑
式的协议。W3C XHTML规范HTML的语法，紧接着又推出了 XHTML2.0这就是一个灾难性的协议，也是导致 XHTML彻底没落的关键性因素。
之后Opera公司的员工向W3C提出申请制定 HTML5.0的规范.
Apple oppera Mozilla创建了一个组织叫做WHATWG，用以研发H5协议.
W3C宣布放弃 XHTML转而研究H5标准.
HTML他有什么特点
1.简单灵活
2.可扩展性强
3.平台无关性 -
第二章 环境的配置以及浏览器的介绍
1.运行环境：有浏览器即可
2.开发环境：有记事本工具即可。（Hbilder）
二.1什么是浏览器？
浏览器是渲染和呈现网页的软件。HTML的语法结构：
1.标签通常是由开始标签和结束标签构成，自结束标签列外。
2.标签可以有属性，属性必有值.
3.开始标签和结束标签之间包裹的内容成为区域
4.标签不区分大小写（<P> </p>）
2.2网页的分类
静态网页：是指不修改源码的前提下，无论何时何地去访问都显示相同的内容。（静态网页的后缀名通常为：html htm）动态网页：通过用用户提交的信息给网站，从而反馈出的页面结果.（动态网页的后缀名通常为：asp,aspx,js,php）
第三章HTML的编写
3.1常用标签
加粗字体：斜体3.2 语义化标签
好处：1.可读性强，方便开发者进行维护
2.对搜索引擎有指导效果
第四章 多媒体标签
4.1 img标签
它是image的缩写，代表图片。
常用的图片格式：
brmp：他是Windows专有的图片格式，本身不进行压缩，清晰度略略对于png，但占据磁盘空间较大，
故而处于淘汰中的状态。
png：他是无损压缩的图片格式，他支持背景透明，并且清晰度最高，相比于jpg占据磁盘空间略大.
jpg：他是有损压缩图片格式，他不支持背景透明，且清晰度略差于png，但 -
2.5 HTML的基础语法
-
语法结构：HTML标签
<标签 属性 = "值">内容</标签>
<p align = "center">标签内容</P>
-
语法格式：
<p align = "center">标签内容</p>
<p align = "center">表示标签开始
</p>表示标签结束
align表示属性名
center表示属性值
-
语法解析
标签通常成对出现，分为其实标签和结束标签，结束标签只是开始标签前面加一个“/”
标签可以有属性，属性必须有值
标签开始和标签结束中的内容称之为区域
标签不区分大小写p跟P是相同的。
-
静态网页
是指不修改网页源码的前提下，网页无论在何时何地被浏览都将显示相同的内容。静态网页一般以html、htm结尾。
-
动态交互式网页
交互式网页是指用户提交给网站信息，网站根据用户提交的信息响应用户的要求。比如网上注册、论坛、调查等等。这种网页一般以aspx，jsp，php，asp等
-
第一步：创建一个文本文件，名字随你喜好随便起，修改文件的后缀名为.html（如何显示扩展名，如何新建文本文件需要提一下）
-
第二步：使用工具（sublime）打开这二个文本文件。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>这是一个标题内容</title>
</head>
<body>
这是一个主体内容
</body>
</html>
- 3.2.1 strong/b em/i del等常用标签
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
