前端基础总结
前端基础
- HTML
- 语义化标签
概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（可以通过 CSS 随便控制效果），语义最重要！
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）
理解：主要从代码层面，让机器读懂，让人容易读懂。
-
- 表单与输入验证
表单：一个包含交互的区域，用于收集用户提供的数据。
-
- 行内元素、块级元素和行内块元素
- 行内元素
- 行内元素、块级元素和行内块元素
行内元素不独占一行
1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 无法通过 CSS 设置宽高
| 1. 文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins> 2. <a> 与 <label> |
-
-
- 块级元素
-
块级元素：独占一行（排版标签都是块级元素）。
1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
2. 默认宽度：撑满父元素。
3. 默认高度：由内容撑开。
4. 可以通过 CSS 设置宽高。
| 1. 主体结构标签： <html> 、 <body> 2. 排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div> 3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd> 4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption> 5. <form> 与 <option>
|
-
-
- 行内块元素
-
元素早期只分为：行内元素、块级元素，区分条件也只有一条："是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。
行内块元素，又称内联块元素，特点：
1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 可以通过 CSS 设置宽高
| 1. 图片： <img> 2. 单元格： <td> 、 <th> 3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button> 4. 框架标签： <iframe> |
-
-
- 总结
-
修改元素的显示模式：
通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：
| 值 | 描述 |
| none | 元素被影藏 |
| block | 元素作为块级元素显示 |
| inline | 元素将作为内联元素显示 |
| inline-block | 元素将作为行内块元素显示 |
- CSS
-
- 盒模型
content
padding
border
margin
-
- 布局方式
- 传统布局——浮动
- 布局方式
- 概述
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
- 元素浮动后的特点
- 脱离文档流。
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
- 高。
- 不会独占一行，可以与其他元素共用一行。
- 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
- 不会像行内块一样被当做文本处理（没有行内块的空白问题）
- 浮动产生的影响
- 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
- 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
- 如何清除浮动
- 方案一： 给父元素指定高度。
- 方案二： 给父元素也设置浮动，带来其他影响。
- 方案三： 给父元素设置 overflow:hidden 。
- 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
- 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用
-
-
- 传统布局——定位
-
- 相对定位
- 绝对定位
-
-
- 圣杯布局和双飞翼
-
-
-
- 现代布局
-
- 概述
传统布局：即基于传统盒状模型，主要靠display 属性 + position 属性 + float属性实现布局。
现代布局：Flexible Box，伸缩盒模型的出现，出现了一种新的布局方式。
flexbox 弹性盒子
grid
骰子3点
-
- BFC
哪些方式形成BFC
- 记录
将盒子摆在正中央：
