前端的一些细节

最新推荐文章于 2022-07-20 20:33:36 发布
最新推荐文章于 2022-07-20 20:33:36 发布
阅读量239 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44291044/article/details/100062099
版权
  • 行内元素不能设置宽，高，就是文字的宽度
  • 块级元素霸占一行，不能与任何元素并排，能接受宽高，默认为100%
  • HTML标签里span，a，b，i，u，em都是行内元素
  • p，div，h系列，li，dt，dd都是块级元素
  • 通过display将行内和块元素互相转换
display: inline;

display: block;
  • CSS一共有三种手段使元素脱离标准文档流

1.浮动
2.绝对定位
3.固定定位

  • 永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
  • 块级元素设置浮动不设置宽度会自动设置为文字长度
  • 注意盒模型如果小于两者盒之和会掉下来
  • 如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。
  • 溢出隐藏
overflow:hidden;
  • 儿子给父亲撑出高度
overflow:hidden
  • 居中
margin-left: auto;
margin-right: auto;

简写为

margin:0 auto;

只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;

  • 善于使用父亲的padding，而不是儿子的margin
  • 双倍margin的问题，面试经常问哦。
  • CSS各种选择器
  • CSS的继承性
  • CSS的权重

在这里插入图片描述

  • class和id的区别

class用于css的，id用于js的。

1）class页面上可以重复。id页面上唯一，不能重复。
2）一个标签可以有多个class，用空格隔开。但是id只能有id。

  • 定位属性position的属性值可以是absolute、relative。
 <style type="text/css">
        div{
                position: absolute;/*绝对定位*/
                    left: 10px;/*横坐标*/
                    top: 20px;/*纵坐标*/
        }
</style>

position: relative;/*相对定位：相对于自己原来的位置*/
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
  • float：left right none
  • clear属性：禁止浮动（left，right，both，none两边都可以有浮动）
  • overflow属性：超出范围的内容要怎么处理

overflow属性的属性值可以是：
auto：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
hidden：不显示超过对象尺寸的内容。
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
scroll：总是显示滚动条。

        body{
            background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }

background-attachment:fixed;（固定背景图）
  • 移动端适配
        div{
            height: 465px;
            background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
            background-position: center top;
            background-repeat: no-repeat;
        }
  • 伪类选择器

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

  • 超链接

超链接的四种状态
a标签有4种伪类（即对应四种状态），要求背诵。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 960px;
            height: 50px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .nav ul{
            /*去掉小圆点*/
            list-style: none;
        }
        .nav ul li{
            float: left;
            width: 120px;
            height: 50px;
            /*让内容水平居中*/
            text-align: center;
            /*让行高等于nav的高度，就可以保证内容垂直居中*/
            line-height: 50px;
        }
        .nav ul li a{
            display: block;
            width: 120px;
            height: 50px;
        }
        /*两个伪类的属性，可以用逗号隔开*/
        .nav ul li a:link , .nav ul li a:visited{
            text-decoration: none;
            background-color: purple;
            color:white;
        }
        .nav ul li a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</body>
</html>

  • 在HTML当中，一切都是节点

  • JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

HTML5是新一代开发 Web 富客户端应用程序整体解决方案。包括：HTML5，CSS3，Javascript API在内的一套技术组合。

nav 表示导航

header 表示页眉

footer 表示页脚

section 表示区块

article 表示文章。如文章、评论、帖子、博客

aside 表示侧边栏 如文章的侧栏

figure 表示媒介内容分组。
mark 表示标记 (用得少)

progress 表示进度 (用得少)

time 表示日期

单标签不用写关闭符号。

  • IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。

引入时，需要做if判断，具体代码如下：

    <!--  条件注释 只有ie能够识别-->

    <!--[if lte ie 8]>
        <script src="html5shiv.min.js"></script>
    <![endif]-->

上方代码是条件注释：虽然是注释，但是IE浏览器可以识别出来。解释一下：

l：less 更小

t：than 比

e：equal等于

g：great 更大

PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。

在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。

但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement(‘tagName’)创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了。

表单新标签

当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。

传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

H5中新增的表单类型
email 只能输入email格式。自动带有验证功能。

tel 手机号码。

url 只能输入url格式。

number 只能输入数字。

search 搜索框

range 滑动条

color 拾色器

time 时间

date 日期。

–datetime 时间日期

month 月份

week 星期

表单事件

oninput()：用户输入内容时触发，可用于输入字数统计。

oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。

多媒体

  • 音频
    HTML5通过标签来解决音频播放的问题。
  <audio src="music/yinyue.mp3" autoplay controls> </audio>
  • 兼容性写法
<!--推荐的兼容写法：-->
<audio controls loop>
    <source src="music/yinyue.mp3"/>
    <source src="music/yinyue.ogg"/>
    <source src="music/yinyue.wav"/>
    抱歉，你的浏览器暂不支持此音频格式
</audio>
  • 视频
    HTML5通过标签来解决视频播放的问题。
 <video src="video/movie.mp4" controls autoplay></video>

https://www.cnblogs.com/qianguyihao/p/8424230.html

bootstrap

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>我的网站</title>
    <!--建议：第三方引用的css库放在上面，我们自己写的文件，都放在下面-->

    <!-- 引入 Bootstrap 的核心样式文件（必须） -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <!-- 引入我们自己写的 css 样式文件-->
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 头部区域 -->
<header id="header">
</header>
<!-- /头部区域 -->

<!-- 广告轮播 -->
<section id="main_ad"></section>
<!-- /广告轮播 -->

<!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 -->

<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->

<!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 -->

<!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 -->

<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->

<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>

</html>

  • Node.js：是 JavaScript 语言在服务器端的运行环境（平台）。

  • 首先，JavaScript 语言通过 Node 在服务器运行，在这个意义上，Node 有点像 JavaScript 虚拟机。

  • Node.js 是一个 JavaScript 的运行环境（平台），不是一门语言，也不是 JavaScript 的框架。

Node.js的主要应用领域
RESTFul API

实时通信：如消息推送等

高并发

I/O阻塞

Node.js知名开源项目

在这里插入图片描述

express：Node.js中最有名的web服务器框架。

PM2：node 本来是单进程的，PM2可以实现和管理多进程。

jade：非常优秀的模板引擎，不仅限于 js 语言。

CoffeeScript：用简洁的方式展示 JavaScript 优秀的部分。

Atom：文本编辑器。

socket.io：实时通信框架。

mocha：功能强大的 node.js 测试框架。

  • ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。

  • let：局部变量

  • const：声明常量

  • 在程序开发中，有些变量是希望声明后，在业务层就不再发生变化，此时可以用 const 来定义。

  • 同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）

  • 具体解释：

（1）源包括三个部分：协议、域名、端口（http协议的默认端口是80）。如果有任何一个部分不同，则源不同，那就是跨域了。

（2）限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）

Cookie、LocalStorage和IndexDB无法获取。

无法获取和操作DOM。

不能发送Ajax请求。我们要注意，Ajax只适合同源的通信。

前后端如何通信

主要有以下几种方式：

  • Ajax：不支持跨域。

  • WebSocket：不受同源策略的限制，支持跨域。

  • CORS：不受同源策略的限制，支持跨域。一种新的通信协议标准。可以理解成是：同时支持同源和跨域的Ajax。

跨域通信的几种方式

方式如下：

1、JSONP

2、WebSocket

3、CORS

4、Hash

5、postMessage

上面这五种方式，在面试时，都要说出来。

前端页面的优化

  • 资源压缩合并，减少http请求
  • 非核心代码异步加载（异步加载的方式，异步加载的区别）
  • 利用浏览器缓存（缓存的分类，缓存的原理）
  • 使用CDN

浏览器第一次打开页面时，缓存是不起作用的，这个时候CDN就上场了

  • DNS预解析

答案

  • （合并图片，图片较多用lazyload，精灵图等）
  • （动态脚本加载，defer，anync）
  • 缓存本地有副本（强缓存，协商缓存）
  • CDN
  • DNS预解析
 <meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="http://www.smyhvae.com/">

https://www.cnblogs.com/qianguyihao/p/8550195.html

闭包

  • 函数里面套函数

常见的闭包

  • 将一个函数作为另一个函数的返回值
  • 将函数作为实参传递给另一个函数调用。

闭包的作用

  • 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)

  • 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

v-if和v-show的区别：

  • v-if和v-show都能够实现对一个元素的隐藏和显示操作。但是v-if是添加/删除DOM元素，而v-show是在这个元素上添加/移除style="display:none"属性。

Web前端入门的自学路线

一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。

二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。

三、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。

四、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于promise、async等内容要尤其关注。

五、HTML5和CSS3。要熟悉其中的新特性。

六、canvas。面试时，有的公司不一定会问canvas，靠运气。如果时间不够，这部分的内容可以先不学。但如果你会，绝对属于加分项。

七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。

八、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。

九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。

十、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。

十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。

十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：新手一般用 WebStorm，入门之后，用 VS Code 的人更多。

十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。

前端资源汇总（成神之路）https://www.cnblogs.com/qianguyihao/p/10701923.html

CHR_YTU
关注
《初级前端开发人员经常容易忽视几个细节问题汇总》
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-29 4489
《初级前端开发人员经常容易忽视几个细节问题汇总》 1、使用 变量.toString()的时候记得对变量进行判空 2、使用 字符串.indexOf()的时候记得对字符串变量进行判断是否为null或undefined 3、使用 数组.length 或 数组[1]、数组[2] 的时候记得对数组进行判断是否为null或undefined 4、使用 JSON对象的子属性时，务必判断JSON是否为nu...
前端面试细节1-3一次详细讲解
最新发布
07-25
本次的从前端的多个维度进行提问 各个部分的设计面较广 大多为开放性问题，可以从多方面进行切入 大家可以进行下载练习
前端一些细节
大灰狼的小绵羊哥哥的博客
12-06 395
1， reflow和repaint：回流和重绘。 回流：renderTree 重建。 重绘：外观样式风格进行更新。（color更改） 页面在第一次加载时候必须进行了回流操作，有回流一定伴随重绘，但是重绘不一定回流。 减少回流和重绘，也就是减少对renderTree的操作： 合并多次多DOM的修改 2.浏览器对页面的呈现流程基本如下： 1）浏览器把获取到的html代码解析成一个DOM树，每个tag...
前端细节
qq_37290314的博客
10-15 87
过滤重复数组： Aarry.fro*m(new Set(arr)*)
前端小细节
weixin_58896221的博客
07-20 357
直接设置img会有一个底部缝隙问题，解决。
前端的一些文档
12-14
每个主题都包含了大量的细节和实践技巧，对于前端开发者来说都是重要的学习内容。掌握这些知识点，不仅可以提升开发效率，也能保证项目的质量和安全性。在实际工作中，不断学习和实践这些技术，是成为一名优秀前端...
网页前端开发小细节
09-22
以上是前端开发中的一些常见细节问题和处理策略。在进行前端工作时，理解这些小技巧并能灵活应用，可以大大提高代码质量和兼容性，为用户提供更顺畅的浏览体验。在实践中，不断学习和适应新的浏览器特性和标准也是...
前端项目源码 前端项目源码 前端项目源码
01-12
让我们深入了解一下这个项目可能涉及的一些关键知识点。 1. **Vue.js框架**：Vue.js提供了一个声明式的数据绑定和组件系统，使得开发者可以轻松地构建可复用的UI组件，并以声明式的方式处理数据变化。它的核心库...
8前端大厂面试二面 2：如何介绍项目及应对项目细节追问.md
03-31
这类跟项目相关的综合性问题，既能体现候选人的技术水平、业务水平和架构能力，也能够辨别候选人是不是真的做过项目，还能够发现候选人的一些软技能。 下面分享下，遇见这类问题应该怎样回答。 ## 怎样介绍自己做...
前端小细节（总结）
snow's blog
05-03 242
node.js导入第三方模块后，生成的pakage-lock.json文件里面也有这个字段，作为包的唯一标识 script使用integrity属性进行安全验证
前端开发细节总结 未完待续.........
人间草木
01-28 411
1、搜索时，文本输入框的内容一般去掉前后空格 let arr = " 2018-11-11 05 " console.log(arr) // 清除左右空格 console.log(arr.trim()) console.log(arr.replace(/(^\s*)|(\s*$)/g, "")) // 清除全部空格 console.log(arr.replace(/\s+/g,"")) 2、...
web前端一些细节
ParisT_T的博客
05-23 277
1.前端里面的css ~鼠标形状 cursor:pointer（手）w-resize （水平调整）s-resize （竖直调整）move（移动）wait（缓冲）crosshair（精确选择/坐标） ~ul默认点点 <ul>：list-style-type:none（无）circle（圈圈）square（方块）lower-alpha（小写字母）upper-roman（古希腊字母） ~选择...
前端开发的小细节
chuolizha8294的博客
09-21 178
雯雯木今天和大家分享下head标签里的一些小秘密： 1，优先使用 IE 最新版本和 Chrome:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 2，360 使用Google Chrome Frame...
16个前端容易忽视的细节点（css基础为主）。
qq_36344797的博客
05-02 293
1.z-index不起作用时，检查元素是否定位，定位了不起作用给最上层祖先元素加z-index。 2.绝对定位，以已定位的最近的祖先元素为定位基准，一般给父级加相对定位。 3.h5表单新增的input，type类型，url，email再提交表单是会进行验证。 4.表单autocomplete可决定，是否保存之前输入内容。autofocus进入页面时，自动聚焦。
我在工作中总结的一些前端常用小细节 （转载）
星辰大海
10-20 363
1、点击聚焦onfocus="if (value =='请输入您的电话号码'){value =''}" onblur="if (value ==''){value='请输入您的电话号码'}"相信很多人在写form表单的时候能用到。顺带提一下，当我们点击input框时会有出现蓝色边框，我们可以这样来处理input｛outline:none;｝。2、ie的透明度兼容background:#000;fil
前端重点、细节知识点总汇（2022.07.01）
qq_41867188的博客
07-01 211
前端重点知识总汇（2022）
前端开发者的避坑指南：如何不陷入技术细节？
CSDN大数据
09-10 701
2007 年的时候我刚毕业，当时最火的前端框架是 jQuery 和 ExtJS，那时候大家纠结的问题是：我到底是用 jQuery 呢还是用 ExtJS 呢？后来又出现了：...
如何学习
CSDN社区管理员
10-30 1841
这篇文章主要是面向小白用户的，如果你有些基础，当然也建议你看看，尤其是最后一个主题，或许你能得到一些启发。本文的观点，纯属个人自以为是的想法，不是真理，仅供参考。   抛开具体技术细节，先主要谈谈程序员如何更高效的，有选择的学习技术。我能体会到选择的轻松和乐趣，体会到身为技术人员和人类的平衡感。字里行间中，我要表达的是一种放弃与选择的哲学，能品到这一点，我就很高兴。
Vue前端考试答题系统实现细节
"本文档提供了一个基于Vue前端框架实现的考试答题系统完整流程的示例，包括答题、计时、成绩统计和合格与否的提示功能。" 在前端开发中，Vue.js 是一个非常流行的轻量级渐进式框架，它使得构建用户界面变得更加简单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值