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 等, 这些东西之间的关系。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页