HTML CSS 基础知识

风茫

已于 2023-06-11 23:00:47 修改

阅读量213

点赞数

文章标签： css html 前端

于 2023-06-11 20:42:26 首次发布

本文链接：https://blog.csdn.net/qq_46032105/article/details/131142251

版权

1.空白折叠

含义：指的是在源代码中的连续空白字符（空格、换行、制表符），在页面显示时，会被折叠成一个空格。

2.pre

含义：在pre元素中的内容，不会出现空白折叠，就是pre元素中的内容会按照源代码格式显示。本质是通过css样式控制的，white-space: pre;其它的元素加上这个属性页可以达到同样的效果。

3.code

含义：语义化标签，当要把一些代码显示到页面上时，可以把代码放到code标签中，可以配合pre标签让代码的格式按照源代码中的格式显示。

4.a标签的href属性

含义： href的全称是 hyper reference（引用），它的值有以下几种情况：

跳转地址。（普通链接）
跳转到某个锚点。当前页面的某个位置，（锚链接）
例子：

<body style="text-align: center;">
  <h2>
    <a name="start">顶部</a>
  </h2>
  <p><a href="#A">前端三件套--标题</a></p>
  <div style="height: 100vh;"></div>
  <p><a name="A">前端三件套--内容</a></p>
  <p><a href="#start">底部-返回顶部</a></p>
</body>

5. a标签的target属性

target的取值：

_self: 在当前页面窗口打开，默认值。
_blank: 在新窗口打开。

6.块级元素和行级元素

含义：在页面上独占一行（块级元素），某些元素不会（块级元素），到了HTML5已经弃用了这种说法。

7.元素包含关系

以前：块级元素可以包含行级元素，行级元素不能包含块级元素。a标签除外。
现在：每一个标签都属于一个或多个类别，包含关系是有内容类别决定的。
总结：

容器元素可以包含任何元素。
a标签几乎可以包含任何元素。
某些元素有固定的子元素(ul > li、ol > li、dl> dt + dd)。

7. 层叠

声明冲突：同一个样式，多次应用到了同一个元素。
含义：解决声明冲突的过程，浏览器自动处理（权重计算）。

1.比较重要性

作者样式表: 开发者书写的样式
重要性从高到底：
1 ）作者样式表中的 !important。
2 ）作者样式表中的普通样式。
3 ）浏览器默认样式

2.比较特殊性

看选择器，总体规则：选择器的范围更窄，越特殊。
具体规则：通过选择器，计算出一个4位数（XXXX），最终来比较这四位数，哪个四位数越大，哪个胜出。

千位：如果是内联样式，记作1，否则记0。
百位：看ID选择器的数量，有多少个百位数字就位几，不是十进制。
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量。
个位：等于选择器中元素选择器，伪元素选择器的数量。

3.比较源次序

含义：代码书写靠后的胜出。

8.CSS属性的计算过程

浏览器要渲染一个页面，必须一个一个元素来渲染，顺序按照文档的树形目录结构进行。渲染每个元素的前提条件，该元素的所有CSS属性必须有值。
含义：一个元素，从所有属性没有值，到所有属性都有值的计算过程就叫属性的计算过程。

确定声明值：参考样式表（作者样式表和浏览器默认样式表）中没有冲突的声明，作为CSS属性值。
层叠冲突：对样式表中，有冲突的声明值使用层叠规则，确定CSS属性值。
使用继承，对仍没有值的属性，若可以继承，则继承父元素的值。
对仍然没有值的属性，使用默认值。

9.断词规则

work-break: 会影响文字在什么位置被阶段换行。
normal：普通，CJK字符，中日韩国家的字符在文字出截断，非CJK在单词出截断。
break-all: 截断所有，所有字符都在文字出截断。英文会在中间截断。
keep-all: 所有文字都在单词之前截断。英文没有变化，中文没有空格的话不会换行。

10. 可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素的内容，成为非可替换元素。
少部分元素，页面上显示的结果，取决于元素的属性，称为可替换元素。
可替换元素img、video、audio,绝大部分可替换元素均为行盒，尽管它们是行盒，但它们可以设置宽高。

11.object-fit 图片、视频的适应方式

默认值：fill,适应整个图片的宽度和高度，不能保持比例。
contain：保持图片的宽高比例，图片的全部内容会显示出来，可能会有空白。
cover：保证把区域填充慢，且爆出宽高比例，所有会有些图片区域可能不能显示完全。
图片的宽高，当没有设置图片的高度时，当图片的宽度变化时，图片的高度也会按照宽高比例变化。

12.作用域值变量提升

在同一个作用域之下，变量和函数的声明与在代码的书写顺序无关，JS都会把它们的声明提到前面。

console.log(a);
var a = 1
// 输出结果 undefined

fn()
var fn = function() {
  console.log('fn');
}
// 报错：TypeError: fn is not a function

13.全局对象window

所有的全局变量，全局函数都会附加到全局对象。
这称之为全局污染，又称之为全局暴露，简称污染、暴露。
如果要避免污染，需要使用立即执行函数改变其作用域。
立即执行函数又称之为IIFE,它的全称是Immediately invlked Function Expression.
IIFE通常用于强行改变作用域
立即执行函数写法：

(function(){
})()

当我外部想用立即执行函数中的一些变量和函数时，可以在立即执行函数中将它们放在一个对象中，将这个对象暴露出去。

var data = (function () {
  var a = 1;
  var b = 2;
  var user = {
    name: 'Tom',
    age: 18
  }
  var fn = function () {
    console.log(a + b);
  } 
  return {
    user: user,
    fn: fn
  }
})() 
console.log('data',data);
console.log(data.fn());

14.ES6新变化 let 和const

ES6建议不再使用var定义变量，而使用let定义变量，使用const定义常量

let a = 1
a = 2

const b = 3
b = 4 //报错： 常量的值不可修改

对于开发的影响，所有的变量使用const,实在需要修改变量，再改为let
使用let和const定义变量，有以下特点：

全局定义的变量不会再作为属性添加到全局对象中。
在变量定义之前使用会报错。
不可重复定义同名变量。
使用const定义的变量，声明的时候必须初始化。
变量具有块级作用域，在代码块之外不可使用。
注意：在for循环中使用let定义变量，变量所在的作用域是循环体，因此在循环外不能使用，另外，for循环会对变量做特殊处理，让每次循环使用的都是一个独立的循环变量，这可以解决JS由来已久的问题。

15.ES6新变化 for of 循环

含义：可以遍历数组和伪数组。

const arr = [1,2,3]
for (const item of arr) {
  console.log(item);
  //输出1 2 3 
}

const btns = document.querySelectorAll('button')
for (const item of btns) {
  console.log(item);
}