整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 文档流介绍
浮动（ float）
普通流（ normal flow）也叫标准流、文档流
前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种：普通流（标准流）、浮动和定位
htmi语言当中另外一个相当重要的概念——标准流！或者普通流，或者文档流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
2 浮动是用来做文字环绕效果的
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经是我们真正意义上的网页布局，具体CSS3我们会详细解释）
3 体会浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{ float：属性值；}
4 浮动就是漂浮的意思
浮动脱离标准流，不占位置，会影响标准流。可以盖住标准流。浮动只有左右浮动。
5 浮动首先需要添加标准流父级
浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
6 浮动特性对齐父盒子
7 浮动特性盒子排列
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
8 浮动影响盒子显示模式
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。
浮动根据元素书写的位置来显示相应的浮动。
9 浮动总结
浮动的目的就是为了让多个块级元素同一行上显示。
float浮漏特（形象的表示）
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性。
10 版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960pX、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML页面，CSS文件。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
11 一列固定宽度且居中
12 两列左套右宽型
快捷生成框架：
按tab键即可生成如下框架：
13 通栏平均分布型
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《12 清除浮动》小伙伴们不要错过哟！
者：hh_phoebe
转发链接：https://juejin.im/post/5ee0cf335188254ec9505381
上一篇：php基础知识
主要参考：https://www.w3school.com.cn
思维导图
思维导图第一版
web网站可以说是互联网的基础。每个网站，可以比喻为一座座房子。宽带网络，就是房子门前的路。url地址，就是房子的门牌标志。HTML代码，就是建造房子的建筑材料（砖头、水泥、钢筋）；CSS代码，就是装修房子的装修材料；那么Javascript代码就是这房子的水电了？ JS代码则更像是未来世界可以让房子成为变形金刚的智能机器。因此，一些展示“老房子”的浏览器，可能并不支持Javascript。
定义：
HTML（Hyper Text Markup Language），是使用标记标签来描述网页的一种超文本标记语言。
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。HTML定义网页的内容。
CSS（Cascading Style Sheets），指层叠样式表。样式定义如何显示HTML元素，规定网页的布局。
Javascript 则是属于HTML和Web的编程语言，对网页进行编程。
Jquery 是一个Javascript函数库
参考上一篇：php基础知识，安装-集成环境与编辑器
推荐使用 phpstudy + phpstorm
操作步骤：1、在phpstudy 安装目录下，把代码文件放大到根目录www/ 下。
2、浏览器直接访问 localhost/index.html即可看到效果。
HTML元素：是从开始标签（start tag）到结束标签（end tag）的所有代码。
例如：<p>前面这个是开始标签，中间文字是元素内容，后面这个是结束标签</p>
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
常用HTML元素属性：
class ：规定元素的类名（classname），一个html文件里面多个标签可以拥有相同的类名。
id ：规定元素的唯一 id，一个html文件里面id不能相同。
style ：规定元素的行内样式（inline style）
1、标题：标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。
2、段落：通过 <p> 标签定义。
3、注释标签 <!-- 与 --> 用于在 HTML 插入注释。
4、链接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。
5、图像：<img src="yummuu.png" alt="Yummuu" /> 。src 图像源属性，alt替换文本属性。
6、表格标签：
7、列表标签
8、块级元素和内联元素
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
<span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
两者的区别：就是在显示时是否起新行。块级元素会起新行，而内联元素则不会。
9、框架与内联框架：frame，<iframe src=" " name=" "></iframe>
10、脚本：<script> 定义客户端脚本，如Javascript；<noscript> 为不支持客户端脚本的浏览器定义替代内容。
11、头部元素：
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title>：在所有 HTML/XHTML 文档中都是必需的。它能够定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题。
<base>：为页面上的所有链接规定默认地址或默认目标（target）
<link> ：定义文档与外部资源之间的关系。最常用于连接样式表。
<style>：用于为 HTML 文档定义样式信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
<script> 标签用于定义客户端脚本，比如 JavaScript。
12、HTML实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
13、表单元素：
<form> ：定义 HTML 表单。
<input> ：是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。
input的输入类型type有text、password、submit、radio、checkbox、button；（HTML5新增）number、date、color、range、month、week、time、datetime、datetime-local、email、search、tel、url。
input的常用属性：value、readonly、disabled、size、maxlength；（HTML5新增）required、multiple、pattern、min和max、list、height和width、autocomplete
<select> ：定义下拉列表 <option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。
<textarea>：定义多行输入字段（文本域）
<button>：定义可点击的按钮
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 <head> 标签内部）
4、内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
1、派生选择器：
通过依据元素在其位置的上下文关系来定义样式，例如: h1 span{color:red;}
2、id选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
3、类选择器：
以一个点号显示，例如： .className{text-align: center;}
4、属性选择器：
对带有指定属性的 HTML 元素设置样式。例如： div[rel=’mm’]{ color:’#000’;}
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
5、后代选择器（包含选择器）：可以选择作为某元素后代的元素
6、子元素选择器：选择作为某元素子元素的元素。例如：h1>span{font-size:16px;}
7、相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。
例如：h1 + p {margin-top:50px;}
8、伪类：用于向某些选择器添加特殊的效果。
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个子元素添加样式（不建议使用）
:lang 向带有指定lang属性的元素添加样式
9、伪元素：用于向某些选择器设置特殊效果。
:first-letter 向文本的第一个字母添加样式
:first-line 向文本的首行添加样式
:before 在元素之前添加内容
:after 在元素之后添加内容
*请认真填写需求信息，我们会在24小时内与您取得联系。
