纠正前端开发中容易出错知识点("前端开发常见错误知识点解析与纠正")

原创

ithorizon 6个月前 (10-19) 阅读数 16 #后端开发

前端开发常见不正确知识点解析与纠正

一、HTML和CSS基础不正确

前端开发中，HTML和CSS是基础，但也是容易出错的地方。以下是一些常见的不正确及其纠正方法。

1. doctype声明不正确

不正确示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

纠正方法：使用HTML5的doctype声明，考虑到它是最易懂且兼容性最好的。


<!DOCTYPE html>

2. 标签大小写不正确

不正确示例：


<body>
    <h1>Hello World!</h1>
    </body>

纠正方法：HTML标签区分大小写，应使用小写字母。


<body>
    <h1>Hello World!</h1>
</body>

二、CSS样式不正确

1. 选择器不正确

不正确示例：


#header {
    background-color: #fff;
}
.header {
    background-color: #000;
}

纠正方法：确保选择器正确匹配元素，避免出现冲突。


#header {
    background-color: #fff;
}

2. 盒模型明白不正确

不正确示例：


.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid #000;
}

纠正方法：明白盒模型的宽度和高度计算对策，包括content、padding和border。


.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid #000;
    box-sizing: border-box; /* 或者使用 calc() 函数计算宽度 */
    width: calc(200px + 40px + 20px);
}

三、JavaScript不正确

1. 变量提升

不正确示例：


console.log(a); // undefined
var a = 1;

纠正方法：明白变量提升的概念，避免在变量声明之前使用它。


var a;
console.log(a); // undefined
a = 1;

2. this指向不正确

不正确示例：


function myFunc() {
    console.log(this); // 指向全局对象
}
myFunc();

纠正方法：明确this的指向，可以使用箭头函数或者bind方法。


const myFunc = () => {
    console.log(this); // 指向期望的上下文
};
myFunc();

四、响应式设计不正确

1. 媒体查询不正确

不正确示例：


@media screen and (max-width: 600px) {
    body {
        background-color: #000;
    }
}

纠正方法：确保媒体查询的语法正确，并考虑到不同设备的兼容性。


@media screen and (max-width: 600px) {
    body {
        background-color: #000;
    }
}

2. 图片响应式不正确

不正确示例：


<img src="large-image.jpg" alt="Large Image">

纠正方法：使用响应式图片技术，如srcset和sizes属性。


<img src="small-image.jpg" srcset="small-image.jpg 600w, large-image.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">

五、性能优化不正确

1. 资源加载不正确

不正确示例：


<script src="script.js"></script>

纠正方法：将JavaScript文件放在文档底部，或者使用异步加载。


<script src="script.js" async></script>

2. 重复代码

不正确示例：


function myFunc() {
    // ...代码
}
function myOtherFunc() {
    // ...重复的代码
}

纠正方法：使用函数封装或模块化，避免代码重复。


function sharedCode() {
    // ...共享的代码
}
function myFunc() {
    sharedCode();
    // ...其他代码
}
function myOtherFunc() {
    sharedCode();
    // ...其他代码
}

六、稳固性不正确

1. XSS攻击

不正确示例：


document.getElementById('output').innerHTML = userInput;

纠正方法：对用户输入进行编码或使用DOM方法来避免XSS攻击。


document.getElementById('output').textContent = userInput;

2. CSRF攻击

不正确示例：


<form action="/delete" method="post">
    <input type="submit" value="Delete">
</form>

纠正方法：使用CSRF令牌来保护表单。


<form action="/delete" method="post">
    <input type="hidden" name="csrf_token" value="unique-token">
    <input type="submit" value="Delete">
</form>

总结

前端开发是一个逐步学习和进步的过程。通过明白和纠正这些常见不正确，我们可以尽或许降低损耗代码质量，提升用户体验，并确保网站的稳固性和性能。记住，逐步学习和实践是避免这些不正确的关键。

文章标签：后端开发

上一篇：漫谈Java语言的接口与类型安全(Java语言接口与类型安全详解) 下一篇：浅析大型ASP.NET应用系统的架构选择("大型ASP.NET应用系统架构选择深度解析")

纠正前端开发中容易出错知识点("前端开发常见错误知识点解析与纠正")

一、HTML和CSS基础不正确

1. doctype声明不正确

2. 标签大小写不正确

二、CSS样式不正确

1. 选择器不正确

2. 盒模型明白不正确

三、JavaScript不正确

1. 变量提升

2. this指向不正确

四、响应式设计不正确

1. 媒体查询不正确

2. 图片响应式不正确

五、性能优化不正确

1. 资源加载不正确

2. 重复代码

六、稳固性不正确

1. XSS攻击

2. CSRF攻击

总结

作者文章