本文介绍了前端基础知识,包括HTML、CSS和JavaScript,并提供了多个实战案例,如制作个人简历网站和开发简易博客系统,旨在帮助读者掌握前端开发技能。文中还推荐了常用的前端工具和资源,提供了丰富的前端案例资料。
HTML(HyperText Markup Language)是用于创建网页的标准标记语言。HTML文档由一系列标记组成,这些标记用来描述文档的结构。
<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是我的第一个网页。</p> </body> </html>
HTML元素是构建网页的基本单元,通常由开始标签、内容和结束标签组成。例如:
<p>这是一段文字。</p>
HTML标签可以拥有属性,属性提供了关于元素的额外信息。例如,<a>
标签用于创建链接,可以包含href
属性:
<a href="https://www.example.com" target="_blank">访问示例网站</a>
CSS(Cascading Style Sheets)用于定义HTML文档的样式。CSS可以控制元素的颜色、大小、布局等。
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: navy; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是我的第一个网页。</p> </body> </html>
CSS选择器用于指定目标元素,属性用于定义样式。例如,选择所有的p
元素并设置字体大小:
p { font-size: 20px; }
CSS可以控制网页的布局,实现响应式设计以适应不同设备:
@media (max-width: 600px) { body { font-size: 12px; } }
JavaScript是一种脚本语言,用于在网页上添加交互性。JavaScript代码可以放在<script>
标签中。
<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <button onclick="changeText()">点击我</button> <p id="demo">这是我的第一个网页。</p> <script> function changeText() { document.getElementById("demo").innerHTML = "文本已更改"; } </script> </body> </html>
JavaScript中常用的变量类型有string
、number
、boolean
等。
let message = "Hello, World!"; let number = 42; let isTrue = true;
函数是可以在代码中重复使用的代码块。
function greet(name) { console.log("你好," + name); } greet("张三");
常见的布局方式有float
、position
、flex
、grid
等。
Flex布局是一种一维布局方式,适用于行内元素的排列。
.container { display: flex; justify-content: space-around; align-items: center; } .item { width: 100px; height: 100px; background-color: lightblue; }
Grid布局是一种二维布局方式,适用于复杂的网格布局。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .item { background-color: lightblue; }
<!DOCTYPE html> <html> <head> <title>张三的简历</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>张三</h1> <p>前端开发工程师</p> </header> <section id="about"> <h2>关于我</h2> <p>我是一名前端开发工程师,热爱编程。</p> </section> <section id="skills"> <h2>技能</h2> <ul> <li>HTML/CSS</li> <li>JavaScript</li> <li>React</li> </ul> </section> <section id="education"> <h2>教育背景</h2> <ul> <li>计算机科学学士,北京大学</li> </ul> </section> <section id="experience"> <h2>工作经验</h2> <ul> <li>前端开发工程师,ABC公司,2020-至今</li> </ul> </section> </body> </html>
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 20px; text-align: center; } section { margin: 20px; padding: 20px; background-color: white; border: 1px solid #ddd; border-radius: 5px; } section h2 { font-size: 1.5em; margin-top: 0; } section ul { list-style: none; padding: 0; } section li { margin: 10px 0; }
document.addEventListener('DOMContentLoaded', function() { document.querySelector('#skills').addEventListener('click', function() { alert('查看我的技能'); }); });
<!DOCTYPE html> <html> <head> <title>我的博客</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>我的博客</h1> </header> <main> <article id="post1"> <h2>我的第一篇博客</h2> <p>这是我的第一篇博客。</p> </article> <article id="post2"> <h2>我的第二篇博客</h2> <p>这是我的第二篇博客。</p> </article> </main> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script> </body> </html>
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 20px; text-align: center; } main { margin: 20px; padding: 20px; background-color: white; border: 1px solid #ddd; border-radius: 5px; } article { margin: 20px 0; padding: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; } article h2 { font-size: 1.5em; margin-top: 0; }
document.addEventListener('DOMContentLoaded', function() { document.querySelector('#post1').addEventListener('click', function() { alert('查看我的第一篇博客'); }); document.querySelector('#post2').addEventListener('click', function() { alert('查看我的第二篇博客'); }); });
<!DOCTYPE html> <html> <head> <title>图片展示网站</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>图片展示网站</h1> </header> <main> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image1.jpg" alt="图片1" class="responsive-img"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image2.jpg" alt="图片2" class="responsive-img"> </main> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script> </body> </html>
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 20px; text-align: center; } main { margin: 20px; padding: 20px; background-color: white; border: 1px solid #ddd; border-radius: 5px; } .responsive-img { max-width: 100%; height: auto; } @media (max-width: 600px) { main { margin: 10px; padding: 10px; } }
document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.responsive-img').forEach(function(img) { img.addEventListener('click', function() { alert('查看图片'); }); }); });
浏览器兼容性是前端开发中经常遇到的问题。使用autoprefixer
等工具可以自动添加必要的浏览器前缀。
const autoprefixer = require('autoprefixer'); const postcss = require('postcss'); const css = ` a { transition: color 0.3s; } `; const result = postcss([autoprefixer]).process(css); console.log(result.css);
使用浏览器开发者工具可以轻松调试前端代码。例如,使用console.log
输出变量值,或使用console.error
抛出异常。
function add(a, b) { console.log(a + b); } add(2, 3);
合并CSS和JavaScript文件,减少HTTP请求次数。
使用工具压缩HTML、CSS和JavaScript文件,减小文件大小。
使用CDN加速静态资源的加载。
压缩图片大小,使用WebP等现代格式。
React是一个由Facebook开发的JavaScript库,用于构建用户界面。Vue是一个渐进式JavaScript框架,用于构建用户界面。
import React from 'react'; import ReactDOM from 'react-dom'; function App() { return ( <div> <h1>欢迎来到React应用</h1> <p>这是我的第一个React应用。</p> </div> ); } ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html> <html> <head> <title>Vue应用</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> new Vue({ el: '#app', data: { message: '欢迎来到Vue应用' } }); </script> </body> </html>
jQuery是一个快速、小型的JavaScript库,简化了HTML文档的处理。
<!DOCTYPE html> <html> <head> <title>jQuery示例</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <button id="myButton">点击我</button> <p id="demo">这是我的第一个jQuery示例。</p> <script> $(document).ready(function() { $("#myButton").click(function() { $("#demo").html("文本已更改"); }); }); </script> </body> </html>
import React, { Component } from 'react'; class App extends Component { state = { message: '欢迎来到TypeScript React应用' }; render() { return ( <div> <h1>{this.state.message}</h1> </div> ); } } export default App;