前端基础 - DAY-1

Iridescent_up
219 阅读8分钟

JS

1.JS 语言的特点？和 C 语言、Java 语言的区别？

  • 是弱类型语言，较为灵活；
  • 与操作系统无关，跨平台的语言；
  • 脚本语言、解释性语言
  • 单线程

区别：

  1. C、C++、Java都属于静态类型语言。
  2. C、C++为编译型语言，需要编译器编译成本地可执行程序后才能运行

2.原始类型有哪几种？null 是对象嘛？

在 JS 中，存在着 7 种原始值，分别是：

  • boolean
  • null
  • undefined
  • number
  • string
  • symbol
  • bigint

引用数据类型: 对象Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function）

null不是对象。

解释: 虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object 。

3.对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？

原始类型存的是值，对象类型它所存储的就是地址（指针）了，当声明一个对象的时候，会在内存开辟一个存储空间来存放

函数参数是对象的情况

function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> ?
console.log(p2) // -> ?
  • 首先，函数传参是传递对象指针的副本
  • 到函数内部修改参数的属性这步，当前p1的值也被修改了
  • 但是当我们重新为了person分配了一个对象时就出现了分歧，请看下图

所以最后person拥有了一个新的地址（指针），也就和p1没有任何关系了，导致了最终两个变量的值是不相同的。

4.typeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么？

typeof 并不能准确判断变量到底是什么类型

typeof 对于原始类型来说，除了 null 都可以显示正确的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

typeof 对于对象来说，除了函数都会显示 object

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

instanceof可以正确判断一个对象的正确类型，其内部机制是通过原型链来判断的

5.转换规则：基本类型转换为布尔值？基本类型转换为数字？基本类型和引用类型转换为字符串？

转Boolean

在条件判断时，除了 undefined， null， false， NaN， ''， 0， -0，其他所有值都转为 true，包括所有对象。

对象转原始类型

对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数，对于该函数来说，算法逻辑一般来说如下：

  • 如果已经是原始类型了，那就不需要转换了
  • 调用 x.valueOf()，如果转换为基础类型，就返回转换的值
  • 调用 x.toString()，如果转换为基础类型，就返回转换的值
  • 如果都没有返回原始类型，就会报错

CSS

1.CSS 的全称？加载 CSS 的方式？

层叠样式表 (Cascading Style Sheets)

加载css的方式：

  • 在head中引用 - 内联
  • 作为标记来引用 - 行内/内嵌 style=""
  • 作为文件来引用 - 外联

2.-webkit-，-moz-，-ms-，-o - 具体指什么了？

  • -moz-：代表FireFox浏览器私有属性

  • -ms-：代表IE浏览器私有属性

  • -webkit-：代表safari、chrome浏览器私有属性

  • -o-：代表opera浏览器私有属性

3.CSS 选择器的优先级是如何计算的？

内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器

当出现优先级相等的情况是时，最晚出现的样式规则会被采纳。

4.盒子模型？IE 盒子和标准盒子的区别？

1、W3C标准盒子模型

w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分

2、IE盒子模型

IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border

在css3的box-sizing属性中：W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

5.请阐述块格式化上下文（Block Formatting Context）及其工作原理，哪些设置可以生成 BFC，BFC 的应用？

块级格式上下文 ， 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直margin会产生合并。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。对于从右到左的格式来说，则触 碰到右边缘。

常见的触发BFC的情况：
  • html根元素
  • 浮动元素，float不是none就行
  • 绝对定位元素，absolute和fixed
  • display不是block的块(inline-block、table-cell、table-caption)
  • overflow 值不为 visible 的元素(hidden、auto、scroll)
  • display:flex、grid、 flow-root
BFC的应用
  1. 可解决元素浮动造成父元素高度塌陷
  2. 可解决相邻元素之间垂直外边距发生折叠

HTML

1.HTML 全称是什么？在前端中的作用。

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

2.DOCTYPE 有什么用？

DOCTYPE是“document type”的缩写。他是HTML中用来区分标准模式和怪异模式的声明，用来告知浏览器使用标准模式渲染页面，在页面开始处添加。

3.举出 10 个常用的标签， 5 个 H5 新标签。

常用的标签：

div p span a ul li input img form label

H5新标签：

section、article、aside、header、footer

4.meta 标签的作用？

meta 标签提供关于 HTML 文档的元数据。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 标签的属性有四个：name、http-equiv、content、charset 。

5.如何提供包含多种语言内容的页面？在设计开发多语言网站时，需要留心哪些事情？

当客户端向服务器发送 HTTP 请求时，通常会发送有关语言首选项的信息，比如使用Accept-Language请求头。如果替换语言存在，服务器可以利用该信息返回与之相匹配的 HTML 文档。返回的 HTML 文档还应在<html>标签中声明lang属性，比如<html lang="en">...</html> 在后台中，HTML 将包含i18n占位符和待以替换的内容，这些按照不同语言，以 YML 或 JSON 格式存储。然后，服务器将动态生成指定语言内容的 HTML 页面。整个过程通常需要借助后台框架实现。

参考：www.w3.org/Internation…

需要留心的事情：

  • 在 HTML 中使用lang属性。
  • 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
  • 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
  • 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
  • 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
  • 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31,2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
  • 不要使用连接的翻译字符串——不要做类似这样的事情，比如“今天的日期是”+具体日期。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：I will travel on {% date %}和{% date %} 我会出发。可以看到，语言的语法规则不同，变量的位置是不同的。
  • 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
avatar
文章
阅读
粉丝