前言
简介：
我的培训方向主要是侧重后端的知识，前端的知识或有不足，有需要的可以参考我的前端知识，不足之处，大家可以留言补充。
1.前端需要掌握的技术（主要是专攻前端方向的小伙伴可以学习的方向）
（1）Photoshop
（2）HTML/HTML5
（3）CSS/CSS3
（4）布局知识(Photoshop+HTML/HTML5+CSS/CSS3)
（5）Bootstrap
（6）JavaScript
（7）jQuery
（8）Ajax
第一章 HTML标签
1.1 认识HTML
1.1.1 HTML概述
HTML 是 HyperText Mark-up Language 的首字母简写。
注意:
- HTML不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种 标记语言 (Markup Language)；
- 标记语言是一套 标记标签 (Markup Tag)，例如：求知讲堂web前端开发前端开发；
- HTML使用 标记标签 来描述网页内容。
1.1.2 HTML的功能
展示在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。
通过超链接检索在线的信息。
为获取远程服务而设计表单，可用于检索信息、定购产品等。
在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。
1.1.3什么是浏览器
浏览器是解释和执行HTML源码的工具。
五大主流浏览器：Internet Explorer (IE)，FireFox(火狐)，Chrome（谷歌），Opera（欧朋），Safari（苹 果）。
1.1.4 浏览器内核
- Trident内核：代表产品IE,又称为IE内核。是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有:IE、 遨游、世界之窗浏览器、腾讯TT等等。
- Gecko内核：代表产品Mozilla FirefoxGecko是一套开源的，C++编写的排版引擎。使用它最著名的浏览器有 Firefox,Netscape 6至9。
- WebKit内核：代表产品有Safari，主要用于Mac OS系统。使用它的浏览器是Safari和谷歌浏览器Chrome。
- Presto内核：代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染 速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了。
- Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome和Opera内 核是Blink。
1.2 开发工具
1.DCloud HBuilder
2.Sublime Text 3
3.Visual Studio Code
4.WebStorm（推荐使用）
只要能写⽂本都可以使用，例如： 记事本 editplus HBulider idea Myel El …
1.3 HTML标签
1.3.1 HTML文档结构
1.HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.解释
<html></html> 称为根元素，所有的网页元素都在 中；
<head></head>元素用于定义文档的头部；
头部元素含有有:
title:标签定义文档的标题。
meta:标签提供关于 HTML 文档的元数据。元数据不会显示在页 面上，但是对于机器是可读的。典型 的情况是，meta 元素被用 于规定页面的描述、关键词、文档的作者、最后修改时间以及其 他元数据。 元数据可用于浏览器（如何显示内容或重新加载页 面），搜索引擎（关键词），或其他 web 服务。针对 搜索引擎 的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
link:元素引入外部样式。
script:元素该元素可以定义页面的脚本内容。
style:标签用于为 HTML 文档定义样式信息。
body:元素用于定义网页显示的内容。
1.3.2 基本标签
div: 它是可用于组合其他HTML元素的容器。
可用于对大的内容块设置样式属性; 文档布局。它取代了使用表格定义布局的老式方法。
div: 它是可用于组合其他HTML元素的容器。
可用于对大的内容块设置样式属性; 文档布局。它取代了使用表格定义布局的老式方法。
hx: html提供的标题有六种分别是 h1 h2 h3 h4 h5 h6 。标题依次变小
p: 会自动在其前后创建一些空白。浏览器会自动添加这些空间。
br：会在浏览器插入一个简单的换行符。
hr：显示为一条水平线。
a：用来设置超文本链接。其中的href属性一定要写
href属性：描述了链接的目标URL；
target属性：设置链接跳转方式有 4 个保留的目标名称用作特殊的文档重定向操作：
| 属性值 | 功能 |
|---|---|
| _blank | 在一个新打开、未命名的窗口中打开目标文档 |
| _self | 这个目标的值对所有没有指定目标的 标签是默认目标 |
| _parent | 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集，与目标 _self 等效。 |
| _top | 这个目标使得文档载入包含这个超链接的窗口 |
img：用来申明图像的插入。其中的属性如下：
src属性：规定显示图像的 URL。URL为图片的相对路径或者绝对路径均可；
alt属性：规定图像的替代文本
title属性：定义图片的标题，鼠标移动到图片出现。
span：用来组合文档中的行内元素,可用作文本的容器，没有固定的格式表现。
ul：作为无序列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
ol：也是一列项目，列表项目使用数字进行标记
1.3.3 标签属性
HTML 元素可以通过设置属性，实现某些特定的效果
1.3.4 文本格式化标签
b:表示以粗体字体形式展现内容。
strong:strong标签与b标签都表示粗体。 但strong表示强调
i:表示以斜体字体形式展现内容
em:告诉浏览器把其中的文本表示为强调的内容并以斜体形式展现
pre:可定义预格式化的文本,其中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
small： 定义小型文本
sub：定义下标文本
sup： 定义上标文本
1.3.5 HTML单双标记的区别
1.单标记：单标记指的是由一个标签组成
比如：换行符
，水平线
，图片标签 ，文本标签，like标签,元信息标签
2.双标记:由“ 开始标签 ”和“ 结束标签 ”两部分构成，必须成对使用。
1.3.6 HTML实体转义
| 实体字符 | 编译后的字符 |
|---|---|
| < | 小于 |
| > | 大于 |
| & | 与 |
|   | 空格 |
| © | 版权 |
| × | 乘 |
| ÷ | 除 |
注意：其中的实体字符后的分号不要忘记写了
1.4 HTML块级元素和行内元素
1.4.1 块状元素
块级元素会独占一行，其宽度自动填满其父元素宽度,块级元素可以设置 width, height 属性一般用来搭建网站架构、布局,承载内容
块级标签如下：
address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul等
1.4.2 行内元素
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会换行。行内元素设置width和height无效
行内元素如下：
a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、 sup、textarea等。
两者的区别：
块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
1.4.3 标签嵌套规则
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。
- 块级元素不能放在里面。
- 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt
- 块级元素与块级元素并列、内嵌元素与内嵌元素并列。
1010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
