查漏补缺——综合

小黄学前端

已于 2022-11-01 00:22:07 修改

阅读量382

点赞数

分类专栏：学习记录文章标签：面试 html css 1024程序员节

于 2022-10-24 20:28:01 首次发布

本文链接：https://blog.csdn.net/qq_51284317/article/details/127489929

版权

学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、浏览器

1、三大浏览器内核：Gecko、Trident、Webkit

1）Firefox：Gecko

2）IE：Trident

3）Safari、Chrome、Google、百度：Webkit

4）搜狗：Trident+Webkit

2、window.location

location.host 返回 web 主机的域名和端口号

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 （80 或 443）

location.protocol 返回所使用的 web 协议（http: 或 https:）

二、HTML

1、有关HTML的DOCTYPE和严格模式与混杂模式的描述

1）<!DOCTYPE>声明必须位于HTML文档的最前面，位于<html>标签之前；

2）<!DOCTYPE>声明对大小写不敏感；

3）<!DOCTYPE>声明告知浏览器的解析器，用什么文档类型规范来解析HTML文档；

2）在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示；

3）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现，浏览器会根据DOCTYPE是否存在以及使用的哪种DTD(文档类型定义)来选择要使用的呈现方法。

2、img标签alt和title属性

1）alt：图片的替代文字

2）title：图片的解释文字

3、 HTML5新特性

1）新增了语义化标签，比如：<article>、<nav>、<aside>等

2）新增了重要的媒体标签<audio>和<video>，还引入了<source>标签配合媒体标签使用

3）新增了<canvas>，使用 JavaScript 在就可以网页上绘制图像

4）增加了draggable属性设置元素可拖放

5）新增了两种在客户端存储数据的新方法localStorage和sessionStorage

6）新增了DOM查询操作querySelector和querySelectorAll

7）新增了还增加了大量的表单类型和表单属性

三、CSS

1、border：none和border：0

border: border-width、border-style、border-color

1）border：none 表示边框样式无

浏览器对border进行渲染，占用内存

2）border：0 表示边框宽度为0

浏览器不进行渲染，不占用内存

3）定义边框时，一定要设置border-style，仅设置border-width不可以达到显示效果

2、overfloat

overfloat属性定义内容溢出元素框时会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。

3、 Css Sprites

1）CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了;

2）利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置;

3）利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

4）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和；

5）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

6）更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

4、

1）<audio>：定义声音，比如音乐或其它音频流

2）<canvas>：定义图形，比如图表或其它图像；<canvas>只是图形容器，您必须使用脚本来绘制图形

3）<article>：定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

4）<menu> ：定义命令的列表或菜单。<menu> 用于上下文菜单、工具栏以及用于列出

表单控件和命令。

5）<command>：表示用户能够调用的命令。<command> 可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键

5、 position

1）static：没有定位，元素出现在正常的流中

2）fixed：生成绝对定位的元素，相对于浏览器窗口定位

3）relative：生成相对定位的元素，相对于元素本身正常位置定位

4）absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素定位

6、 overflow

1）值为scroll时，会一直出现滚动条

2）值为auto时，子元素内容大于父元素时出现滚动条

3）值为visible时，溢出的内容在父元素显示

4）值为hidden时，溢出的内容将被隐藏

7、<input> 标签的 disabled 属性

1）disabled 属性规定应该禁用 input 元素

2）被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 <input type="hidden"> 一起使用。
<input type="text" name="lname" disabled="disabled" />

四、JS

1、JS常见触发事件

1）焦点事件

onblur：失去焦点

onfocus：获得焦点

2）点击事件

onclick：鼠标单击事件

ondblclick：鼠标双击事件

3）鼠标事件

onmousedown：按下鼠标按键

onmouseup：松开鼠标按键

onmouseover：鼠标移动某元素上面

oumouseout：鼠标从某元素移开

4）键盘事件

onkeydown：按下键盘按键

onkeyup：松开键盘按键

onkeypress：按下键盘按键后松开

5）onchange：用户改变域的内容

2、parseFloat()、isNaN()、escape()、eval()

1）parseFloat()：该方法将一个字符串转换成对应的小数

2）isNaN()：该方法用于检测参数是否为NaN，若是则返回ture，否则返回false

3）escape()：该方法返回一个字符串编码后的结果字符串

4）eval()：该方法将字符串作为一个JavaScript执行

3、让一个input的背景颜色变红色

inputElement.style.backgroundColor = 'red'

4、target属性

target：定义被链接的文档在哪里显示

例如：<a href="#" target="_blank" >被链接的文档</a>

target值：

1）_blank：在新窗口打开链接

2）_top：在原窗口打开链接

3）_self：在原窗口指定的框中（例如：svg标签形成的图像大小框）打开链接

4）_parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像_self参数一样。