1. 前端开发简介
前端开发是指创建网站或应用程序的用户界面部分,即用户直接与之交互的界面。前端开发者需要使用HTML、CSS和JavaScript等技术来构建网页和应用的结构、样式和行为。
2. HTML基础
HTML(HyperText Markup Language)是构建网页内容的骨架。它定义了网页的结构和内容。
2.1 HTML基本结构
html
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
2.2 HTML元素
HTML元素由开始标签、内容和结束标签组成。
html
<p>This is a paragraph.</p>
2.3 HTML常用标签
<h1>
到<h6>
:标题标签<p>
:段落标签<a>
:链接标签<img>
:图片标签<ul>
、<ol>
、<li>
:无序列表和有序列表<div>
:分区或节的容器<span>
:行内容器
3. CSS基础
CSS(Cascading Style Sheets)用于设置HTML元素的样式,如颜色、布局和字体。
3.1 CSS基本语法
css
selector {
property: value;
}
3.2 CSS选择器
- 类选择器:
.class
- ID选择器:
#id
- 元素选择器:
element
3.3 CSS常用属性
color
:文本颜色background-color
:背景颜色font-size
:字体大小width
和height
:元素宽度和高度margin
和padding
:外边距和内边距border
:边框
4. JavaScript基础
JavaScript是一种脚本语言,用于实现网页的动态功能和交互。
4.1 JavaScript基本语法
javascript
// 声明变量
var greeting = "Hello, World!";
// 函数定义
function sayHello() {
console.log(greeting);
}
// 调用函数
sayHello();
4.2 JavaScript常用概念
- 变量:存储信息的容器
- 函数:执行特定任务的代码块
- 事件:用户与网页交互时触发的动作
- DOM操作:通过JavaScript修改HTML文档结构
5. 响应式设计
响应式设计允许网页在不同设备上(如手机、平板和桌面电脑)都能良好显示。
5.1 媒体查询
css
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
5.2 布局技术
- Flexbox:一种灵活的布局方式
- Grid:一种二维布局系统
6. 版本控制
版本控制系统(如Git)用于跟踪和管理代码变更。
6.1 基本Git命令
git init
:初始化仓库git add
:添加文件到暂存区git commit
:提交更改git push
:将更改推送到远程仓库git pull
:从远程仓库拉取更新
7. 开发工具和资源
- 编辑器:如Visual Studio Code、Sublime Text
- 浏览器开发者工具:用于调试和测试
- 在线资源:如MDN Web Docs、W3Schools