第一节：后端与前端
后端
后端，又称(Back End),
BE.后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等.实现这些功能，都可以用不同的语言去实现。其中包话几个主流语言，例如：JAVA、PHP、.NET、Python、C++等等.后端开发可能最大的操作就是业务逻辑处理和操作数据库
前端
前端，又称(Front End),
FE。网页中看到的界面，包括布局、色调、字体、图片、动画等等。技术面上看，前端可粗略分为【传统前端】和【H5大前端】
【传统前端】：HTML、CSS、JavaScript
【H5大前端】：各种端的兼容开发、Ajax+服务端开发、高级设计模式和框架、网站安全、SEO优化、测试、源代码管理、移动APP和移动站点的开发
我们打开网页所看到的所有东西包括：文字或背景颜色、图片、布局、鼠标移上去的效果都属于前端范筹
例：
简单地说，前端实现的是网页看得见的东西，而后端则是实现的是看不见的东西
第二节：HTML基本结构与解释器(流览器)
什么是HTML
HTML是超文本标记语言（HyperText Markup Language），是在浏览器上运行的一种标记语言，不需要编译，它有一套完整的标签用来描述一个网页
标签
超文本标记语言标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
- 标签的格式
由尖括号包围的关键词，比如 ，标签通常是成对出现的，比如
<div>和</div>
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。但它也有单独呈现的标签，如：<img src="我的图片.jpg" />等。
- 标签的分类
【 双标签】
一般成对出现的标签，其内容在两个标签中间。如<h1>内容</h1>
【单标签】
单独呈现的标签，一般在标签属性中赋值。如：<input type="text" value="按钮" />。
流览器与编缉器
当我们写代码的时候，都需要一个可视化的程序，用于直观地看到代码的效果,这种可视化的程序叫
解释器，例如：后端技术python代码，可以使用Pycharm解释器运行代码，看见代码执行的结果。而HTML的解释器，每台电脑都有，就是【流览器】。
- 常用的流览器
ChromeFirefoxSafanSafariIE(IE6-8、IE9-10)Opera
- 流览器的作用
流览器的作用就是：
解析html结构并生成相应的界面，推荐使用谷歌流览器或火狐流览器，其中谷歌流览器应该是到目前为止，最好的一款流览器了
- 常用的编辑器
所谓工欲善其事，必先利其器。对于前端来说，编辑器是除了浏览器以外，每天打开时间最长的软件。选择一款功能强大又趁手的工具，可以让开发效率提升，达到事半功倍的效果。
常用的编缉器有：
1、Adobe Dreamweaver CC
2、Atom
3、Sublime Text
4、Brackets
5、WebStorm
6、Notepad++
7、HBuilder
8、VS Code
9、aptana
理论上来说，HTML可以使用任何编缉器，甚至记事本也能用，只要技术足够强大！往后的内容会以Sublime Text3编缉器作为演试，因为Sublime Text3现今在前端比较受欢迎。
Sublime Text3常用快捷键
| 快捷键 | 功能 | 说明 |
|---|---|---|
| ctrl+d | 就近选择相同项 | 把光标放在单词上，按下一次或多次ctrl+d |
| ctrl+k+u | 英文变大写 | 一 |
| ctrl+k+l | 英文变小写 | 一 |
| ctrl+shift+↑或 ↓ | 整行的上下移动 | 一 |
| ctrl+x | 剪切 | 单行剪辑或选中项 |
| ctrl+shift+d | 复制行或选中项 | 选中了文本按，会复制选中项。把光标放在行上按，会复制行。 |
| ctrl+shift+k | 删除一行 | 一 |
| ctrl+shift+m | 选择括号内的内容 | 这有助于选择括号之间的一切。同样适用于CSS。 |
| ctrl+z | 撤消 | 一 |
| ctrl+/ | 注释选中项/行 | 一 |
| alt+f3 | 选择当前文件所有匹配项 | 把光标放在单词上，按下alt+f3 |
| alt+shift+w | 用标签包裹行或选中项 | 一 |
HTML的基本结构
- 类型、头部与主体
1、文档类型：
<!doctype html>
2、网页头部<head>包括：标题、样式、javaScript
3、网页主体<body>包括：
页头：一般是放网站logo和导航链接
主体：就是网页看到的主要内容部分
页尾：版权申明、使用协议、友情链接等
- HTML的注释
注释标签用于在源代码中插入注释。注释
不会显示在浏览器中。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯
HTML的注释格式 :<!--注释内容-->
例：HTML的基本结构
解析HTML文件
当编写完HTML代码后，可以对文件进行任意路径的保存，文件后缀必须是
.html
例：
- 打开（解析）方式
解析HTML文件，会自动打开默认解析器（浏览器）
1、双击HTML文件打开
2、在编辑器打开
（不同编辑器的打开方式不同，这里以Sublime Text3为例,因为目前Sublime Text3在前端有着超高的人气）
例：右键打开执行open in Browser打开,也可以按F12打开
HTML的调试工具
有时候，自己写的代码并没有达到预期想的那样的结果，可能是编写过程错误，想要看看它每一步执行得怎么样，执行到哪里，是哪里出了问题，才没有达到预期的结果。那要怎么调试呢？这时我们可以用到浏览器的调试工具
例：在谷歌浏览器右击执行，点击【检查】，便可打开调试窗口（F12也可打开）
第三节：常用双标签
标题系列标签 h1~h6
作用：把页面上的文字加上标题的语义
例：
浏览器结果：
段落标签 p
作用：给页面上的一段文字加上段落语义，段落上下有一定间隔，便于阅读
例：腾讯某条新闻的一个段落
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<h1>广东人爱“买买买”</h1>
<p>假设这里写了一段文字</p>
<p>假设这里又写了一段文字</p>
</body>
</html>
浏览器结果：
文本格式化标签
strong—— 加粗，（加强语气）
ins—— 下划线
em—— 倾斜
del—— 删除线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<h3>绝望诗</h3>
<p>天<strong>苍苍</strong>，野芒芒，</p>
<p>今年的<ins>希望</ins>太渺茫。</p>
<p>楼高高，<em>人忙忙</em>，</p>
<p><del>恨不得马上抢银行。</del></p>
</body>
</html>
浏览器执行结果：
列表标签
ul—— 显示一列没有排列顺序的数据
ol—— 显示一段有顺序的数据
li—— 用于存放列表内容，一般与ul、ol配合使用
以腾讯新闻页面最下方为例，这里就使用了无序列表
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<h3>相关新闻：</h3>
<ul>
<li>广东人读不好绕口令</li>
<li>广东人爱煲汤</li>
<li>加拿大为什么那么多广东人</li>
<li>浙江人广东人</li>
<li>广东人喝茶习惯</li>
</ul>
<ol>
<li>广东人读不好绕口令</li>
<li>广东人爱煲汤</li>
<li>加拿大为什么那么多广东人</li>
<li>浙江人广东人</li>
<li>广东人喝茶习惯</li>
</ol>
</body>
</html>
浏览器结果： 圆点只是样式设置的问题，以后再做探讨
超链接标签 a
作用：跳转页面
属性：
href—— 点击链接跳转目标地址target—— 设置链接的跳转方式_blank—— 保留原始页面，再进行跳转_self—— 在当前页面进行跳转
标签的属性一般放在起始标签中
格式：<标签 属性=“属性值”>
以上面新闻列表为例，我们仅仅只是创建了一个新闻标题的一个列表，每条新闻的详细内容，是不知道的。在正常网页上的列表，都可以通过点击进入，跳转到相关的内容页面。这就是一个链接，正是用
a标签所实现的。a标签还可以定义相关属性，例如点击时指定跳到哪一个网页、跳转方式是什么等等
例：定义a标签，让每条新闻点击时都跳转到百度页面或其他页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<h3>相关新闻：</h3>
<ul>
<li><a href="http://www.baidu.com">广东人读不好绕口令</a></li>
<li><a href="https://www.taobao.com">广东人爱煲汤</a></li>
<li><a href="http://www.jd.com">加拿大为什么那么多广东人</a></li>
<li><a href="http://www.baidu.com" target="_blank">浙江人广东人</a></li>
<li><a href="http://www.baidu.com" target="_self">广东人喝茶习惯</a></li>
</ul>
</ol>
</body>
</html>
浏览器结果：文字加下划线，颜色变蓝，可点击
div 与span标签
div标签没有语义，一般只做容器
span标签没有语义，一般用于设置字体样式
div与span标签都没有语义，但也是非常常用的标签，几乎到外可见。div标签都是用于做容器，把内容包裹成块，方便对内容整体操作。如下图：div把整首诗进行包裹。而span标签常常用于文本，也可以看作是把文字进行包裹，方便对文字进行颜色等样式的处理
例：
第五节：常用单标签
换行标签 br
- 作用：换行
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用单标签</title>
</head>
<body>
<h3>黑松林</h3>
黑松林中一条沟,
一年四季水长流；
不见牛羊来吃草,
但见和尚来洗头。
<br/>
<br/>
黑松林中一条沟,<br/>
一年四季水长流；<br/>
不见牛羊来吃草,<br/>
但见和尚来洗头。<br/>
</body>
</html>
浏览器效果：
图片标签 img
- 作用：在页面显示一张图片
- src属性：显示图片的路径
- 相对路径
- 绝对路径
随便打开一个网页，都是由文字和图片还有其他元素构成，其中图片基本都是由
img标签实现的，如下图：百度一下的搜索页面，可以右击查看网页源代码，指针移到图片处，发现这张图片正是使用了img标签。
- 使用img标签
使用img标签，要注意属性hrc,可以填写图片的相对路径，也可以填写绝对路径。效果都一样，但是相对路径就需要细心些。相对路径指的是相对于当前html文件的路径。
./表示当前目录。../表示当前文件的上一级目录
如：电脑桌面有一文件夹myHTML,文件内容如下图，运用img标签使用img文夹内的一张meinv.jpg图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用单标签</title>
</head>
<body>
<h4>相对路径实现美女图</h4>
<img src="./img/meinv.jpg">
<h4>绝对路径实现美女图</h4>
<img src="C:/Users/PC/Desktop/myHTML/img/meinv.jpg">
</body>
</html>
浏览器效果：
第六节：标签类型与属性
HTML标签类型
-
块标签
块标签又称块元素，块标签的特点是占据页面一行，如：p标签
-
行内标签
行内标签又称行内元素，行内标签的特点是占据内容所在部分，如span标签
-
块标签与行内标签总结
【块元素】
div、p、ul、li、h1~6、ol …
【行内元素】
span、img、a、strong、em、del、ins …
【行内元素与块元素的转化】
行内元素与块元素可以使用display属性进行转化，其值有3种设定：
inline—— 设置为行内元素（内联元素）
block—— 设置为块元素
inline-block—— 表现为行内元素，但能设置宽和高
HTML标签属性
- 常用的标签属性
【专有属性】：特定的标签所具有的属性，如：
src—— img标签专有
href—— a标签专有
target—— a标签专有
【公共属性】：每个标签都具有的属性，如：
id—— 标签的唯一标识，一般用于DOM节点操作
class—— 设置类名，用于样式
style—— 设置样式
title—— 设置某个标签的标题，用在a标签比较多，例如www.163.com 的轮播图之类都有
第七节：附录
HTML 中有用的字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | &apos (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |