网页的组成部分：1.html：超文本标记语言 2.css：样式结构 3.javaScript负责逻辑的语言
1. HTML: 用于描述 页面中 有什么内容 结构如↓
<DOCTYPE html>:定义文档的类型:<html></html>代表网页内容 Lang标签的属性 en是英文 zh中文 <head></head>:表示头部:设置网页文本的编码集（世界通用）<meta charest="UTF-8"> <title></title>:表示浏览器上面的标题文字 <body></body>:里边写标签
HTML常用标签：写法<div></div>,<p></p>,<h1></h1>,<img>........
1.div: 是容器标签 用于盛放其它标签 常用div分块
格式: <div></div>
2.p标签:是文本、段落标签 里面用于盛放 文本、图片、超链接
格式: <p> hello</p>
3.h系列标签:h1-h6 标题标签 由1到6依次字体依次变小 <h1></h1>
4.ul ol dl 列表标签：最常用的列表标签是 ul
ul：无序列表 -> li
ol:有序列表 -> li
dl:自定义列表 -> dt 标题 dd 内容
5.input:输入标签
type:可以指定输入标签的类型 如text：文本输入
6.换行标签 br <br>
7.超级链接标签 a标签 <a href=""> <a> href 指定要跳转的位置
8.图片标签img src：图片资源的路径 alt：当图片不存在的时候 显示的文字
9.不换行的文本标签 span
总体可以分为两类：
1. 换行标签 -> 可以设置宽高 -> 块级元素 -> div ul p li h ol dl
2. 不换行标签 -> 不可设置宽高 -> 行内元素 内联元素 span img a input
2. CSS: 让HTML变得更漂亮 渲染HTML样式 那么CSS怎么学呢?↓
CSS的学习一共分为两大部分, 一个是CSS的属性, 另一个是CSS选择器. 也就是说着两部分学完CSS就没有别的东西了 基本格式如下
通过style标签 设置样式↑
当然了 也可以通过这种方式来引用
CSS盒模型：每一个元素 都有一个盒模型 那么什么是盒模型呢？
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子。在HTML中所有的标签都可以设置
1.内容部分 宽度/高度 == 指定可以存放内容的区域
2.内边距(padding) 会增加整个容器的宽高元素实际宽度=width+水平方向的内边距
3.边框(border) 会增加整个容器的宽高
元素实际宽度=width+水平方向的内边距+水平方向的边框
4.外边距(margin) = 盒子和盒子之间的间隙 它不会影响，容器的实际宽高→挤相邻元素的位置
特点: 相邻两个元素的外边距会重合
此外,padding margin 如果想一起设置4个方向(上右下左顺序) 如margin: 40px 30px 20px 10px; padding: 20px 50px;
不管是内边距 外边距 边框 都可以单独设置某个方向 如：
Padding-left border-bottom margin-top
HTML选择器：作用：用于选择给哪些html元素设置样式的工具
1.元素选择器：可以通过标签的名字选择上标签
2.类选择器：可以把标签划分很多种类通过类选择器来找到这些元素
特点：可以忽略标签限定不限制选择标签的数量，可以通过class指定类选择器的名字在css里通过.类选择器名字就可以找到这类元素
3.id选择器 同一个名字的id选择器只能在页面中设置一次→在页面中唯一性
4.选择器权重 上边设置了样式，底下设置了相同的属性→把上边的给覆盖
选择器的权重越高，越优先选择上元素
计算权重：由大到小→ id选择器→类选择器（多少个类选择器都抵不过一个id选择器）→元素选择器（多少元素选择器都抵不过一个类选择器）
也就是id选择器数量多的优先备选上然后数类选择器的数量再去数元素选择器数量
注意: 当设置样式时，不起作用的时候需要检查，是不是选择器的权限不够
在html中给元素设置选择器定义样式 ↓
黄色的是标签选择器，蓝色的是id选择器，红色的是class类选择器 想要设置一些宽高颜色之类的在{}里边设置就好了！
浮动 float：left or right
设置完浮动后，设置浮动的元素就不占高度→影响页面的布局。so我们就要清除浮动
清除浮动的常用方式方式：
1.给他父元素设置 overflow:hidden 作用1.可以将超出标签范围的内容裁剪掉2.清除浮动3.可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
2.利用伪元素选择器清除浮动 给需要清除浮动的父元素添加伪元素 设置clear:both
如 ：.clear:after{
Content:””; display:block; clear:both;
}
Display: 可以转换 元素的显示方式
1 块级元素→独占一行可以设置宽高（div，p，li，ul，h）→block
2 内联元素→与别的标签 共享一行 不可以设置宽高（a，span，input）→inline
3 内联块级元素→可以设置宽高但与别的标签共享一行 →inline-block
通过display进行转换
定位：position
1.相对定位：相对定位就是相对于自己以前在标准流中的位置来移动 position: relative;
注意:1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 2.在相对定位中同一个方向上的定位属性只能使用一个 3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素 4.由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
相对定位应用场景:1.用于对元素进行微调 2.配合后面学习的绝对定位来使用
2.绝对定位: 绝对定位就是相对于body来定位 position: absolute;
注意：1.绝对定位的元素是脱离标准流的 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素
3. JS:负责页面逻辑
网友评论