HTML笔记

一，html 标签， 也叫容器， 有二种容器，
块级容器；
_ 行级容器；
一个htmlfi 签， 不是块级容器， 就是行级容器。不存在第三种情况
块级容器的特性：
默认横向独占一行； 左右不能有其它容器出现。
宽高有效．
行级容器的特性：
默认可以横向排列，
宽、高·无效， 它的大小是受它的内容的影响。
行级、块级容器的转换，
display 属性，

• block, 行级转为块级显示，
• inline, 块级转为行级显示；
• inline-block, 以行级容器的规则， 来显示块级容器；
  还有其它的转换方式， 另说
  行级、块级容器有许多， 百度查一下， 大概的背个三五个就可以

二，盒模型是什么？
盒模型它规定了html容器处理它的内容， 内边距，外边距， 背景图、背景色的方式。
也就是说，

• Width
  -height
• background-color
• background-image
  -border它的宽高会成为容器的一部分。
• padding
  -margin
  margin:10 px; / / 这是定义四条边的外边距
  margin-left:1 0px; / ／ 单独定义左边
  margin:0 10 px;
  ／ ／ 第一个值定义上下的外边距；
  ／ / 第二个值定义左右的外边距；
  margin: 5 px 10px 15p× 20p× ；
  / / 这是分别定义四条边的外边距
  ／ / 顺时间定义， 上右下左
  ／ ／ 分别是， 上5p× ， 右10px, 下15p× ， 左20px
  padding:10px;//它定义容器里的内容,离边距有多远。
  padding 和margin, 定义的规则是完全一样的，
  只不过， padding 是负责容器内部的边距。
  这些加在一起， 就是盒模型。

三，页面的加载的顺序
页面的加载的顺序， 受很多因素的影响。
但默认情况下， 浏览器是按从上到下的顺序， 来一行一行的读取htm | 的代码。
（ 包括css 、js)
< ！ 一一页面中的各个容器的位置一一>
这是受浏览器解析d o m 树、cs s 树的过程， 生成d o m 树， 渲染页面的过程，
详细的说， 非常的复杂。
< ！ 一下面是我口语亻勺描述， 不是定义一>
但是现在我讲这个地方要说啥，
每个htm ] 容器， 它的位置， 至少受二个因素的影响，
一它相邻容器的宽、高；

• 它本身的宽、高；

四，元素的显示与隐藏
visibility:hidden; 它可以让一个html 元素隐藏。
display:block, 可以让一个元素显示；
display:none, 可以上一个元素隐藏；
区别，
visibility:hidden; / / 隐藏的时候， 保存原有的位置
display:nond; / / 隐藏的时候， 不保存原有的位置
给一个行级容器， 添加at 的丨/ right 属性， 就会自动变成块级容器。

五，CSS 的定位
利用css 的定位机制， 建立各种页面的布局结构。
1普通文档流，就是从上到下， 按位置、顺序来决定。
一个一个的排列， 容器之间的垂直距离由它们的边距计算而来。
· 浮动
相对定位、绝对定位
定位 position,

• static, 处于普通文档流的状态； 就等同于没加
• absolute, 绝对定位；
• 不保留原来的位置
• 以浏览器窗口左上角为原点坐标
• relative, 相对定位；
  会保留原来的位置
• 以它原来的位置的左上角为原点坐标
• fixed, 固定， 相对于浏览器窗口固定位置
  定位的本质， 就是脱离普通文档流。
  跟， absolute, relative, fixed— 起使用的，
  结合left、top 、right 、bottom ， 四个属性进行调整位置。
  分别指左上右下，
  一般用其中的left 、top 比较多， 用于确定容器的× y 坐标，
  z-index, 决定了定位元素的堆叠顺序， 也就是谁在上面。
  这是相对定位和绝对定位， 最常用的用法。
  当一个子容器是绝对定位，
  同时其父容器是相对定位时，
  此子容器的× y 定位原点，
  将以它的父容器的左上角为原点进行定位。
  < ！ 一position 和float, 一点关系都没有。一>

六.< ！ 一第一个功能， 也叫模块>
弹出菜单，
先Scss, 还是先写html， 没啥大区别。
一个大的模块， 它一般会用id 定义样式，
然后在它里面用class
菜单一般自动生成,不确切的知道它到底有多少个？
1.reset.css 这种东西都是网上找一个， 然后自己修改一下。
这种东西写好之后， 基本就不用再动了。
2.< !doctype html>
文档类型声明，
告诉浏览器， 用什么样的规范去解释读取到的代码。
< ！ 一页面的结构->
这里的页面结构， 不是说它有几个div ， 几行几列什么的。
而是说这个页面， 它的导入的文件的顺序、结构。
常见的有MVC 结构，
一M ， 数据模型； model
-V, 视图； view
· 目前阶段， 咱们在做的就是视图， 也就是网
-C, 控制； Ctrl
这个MVC, 它早期是从JAVA 来的，
然后为了" 表现和结构相分离"
被前端开发拿过来使用。
那么在前端里， 表现和结构都指什么？
一表现， css, 外观嘛； V
一结构， html, 网页是亻十么结构； M
最早期， 是把htm | 和css 完全写在一起
后来为了利于维护、扩展， 把cs s 拿到外面的文件里，
这就是， 最基本的" 表现和结构相分离"
在这个语境里， C, 也就是Ctrl 是什么呢？
就是JavaScript
页面的结构就是， 一个网页是由哪些文件共同组成的？
因为css 已经写在外部文件了，
那么一个网页就变成了， html + 一个或多个css 文件。
.CSS ，
网页的结构就是这样，

• html
  l_css 目录
  l_reset.css, //Ahtml
  l_base.css, ／ / 大的htm 丨结构的样式， 不一定有
  l-page.css ， / / 具体的页面css
  | common.css, / / 公共的（ ss
  | widge.css, / / 页面的小部件的css
  | 更多
  l_imgage 目录
  | 也按上面的分目录
  一个网页的结构， 如上所示。
  100 个， 10000 个网页， 就变成整个网站的前端架构设计。
  所以，所谓的前端架构设计，
  直白点讲， 我囗语化的描述，
  其实就是设计整个网站所有的htmls css 、js 等， 这些东西之间的关系。