前端开发基础：HTML、CSS、JavaScript入门

# 1. HTML基础 ## 1.1 什么是HTML HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。它描述了网页的结构，并由一系列的元素（标签）来包裹不同的内容，如文本、图像、表格等。 ## 1.2 HTML基本结构 HTML页面的基本结构包括`<!DOCTYPE html>`声明、`<html>`元素、`<head>`头部和`<body>`主体部分。 ```html <!DOCTYPE html> <html> <head> <title>页面标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> ``` 代码解析： - `<!DOCTYPE html>`声明指定了文档类型和版本。 - `<html>`元素是HTML文档的根元素，包含了页面上的所有内容。 - `<head>`元素包含了页面的元数据，如标题、链接和脚本。 - `<body>`元素包含了可见的页面内容。 ## 1.3 HTML常用标签 HTML中有许多常用的标签，如标题`<h1>-<h6>`、段落`<p>`、链接`<a>`、图像`<img>`等，它们用于定义页面的不同部分和内容。 ```html <h1>主标题</h1> <p>这是一个段落。</p> <a href="http://www.example.com">链接</a> <img src="image.jpg" alt="图片"> ``` 代码总结： - 使用`<h1>-<h6>`标签定义标题的级别。 - 使用`<p>`标签定义段落。 - 使用`<a>`标签创建链接。 - 使用`<img>`标签插入图像。 ## 1.4 HTML表单 HTML表单用于收集用户输入的数据，包括输入框、复选框、下拉框等。 ```html <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> </form> ``` 结果说明： - 表单包含了用户名和密码的输入框，以及提交按钮。 - `<label>`元素指定了每个输入框的标签。 - `<input>`元素用于创建输入框和提交按钮。 ## 1.5 HTML5新特性 HTML5引入了许多新的特性，如语义化标签`<header>`、`<nav>`、`<section>`、`<article>`和`<footer>`，音频视频嵌入`<audio>`和`<video>`，以及本地存储和离线应用。 ```html <header> <h1>网页标题</h1> <nav> <a href="#">首页</a> <a href="#">关于我们</a> </nav> </header> <section> <h2>章节标题</h2> <p>这是一个章节内容。</p> </section> <footer> © 2023 版权所有 </footer> ``` 结果说明： - 语义化标签使页面结构更清晰，便于理解和维护。 - 音频和视频元素支持在网页中直接播放音视频文件。 - 本地存储和离线应用使得网页可以在离线状态下访问和操作。 # 2. CSS基础 CSS（Cascading Style Sheets）是一种定义样式的标记语言，用于描述网页的表现方式。 ### 2.1 什么是CSS CSS用来控制网页的布局、颜色、字体等外观样式，让网页看起来更加美观、结构化。 ### 2.2 CSS选择器 CSS选择器用来选择需要添加样式的HTML元素。常见的选择器包括：标签选择器、类选择器、ID选择器、组合选择器等。示例代码： ```css /* 标签选择器 */ p { color: red; } /* 类选择器 */ .text { font-size: 14px; } /* ID选择器 */ #header { background-color: lightblue; } /* 组合选择器 */ p.text { margin-left: 20px; } ``` 代码总结：CSS选择器通过不同的方式选择需要样式化的HTML元素，从而实现定制化的外观展示。结果说明：以上代码将段落文字变为红色、类名为text的文字大小为14px、ID为header的背景色为浅蓝色、类名为text的段落文字左边距为20px。 ### 2.3 CSS盒模型 CSS盒模型指的是网页中的每个元素都可以看作是一个盒子，包含内容区域、内边距、边框、外边距等四个部分。 ### 2.4 CSS布局 CSS布局是指对网页中元素的位置和尺寸进行控制，包括传统的文档流布局、浮动布局、弹性布局、网格布局等。 ### 2.5 CSS3新特性 CSS3引入了许多新特性，包括圆角边框、阴影效果、渐变色、动画效果等，使网页设计更加丰富多彩。 # 3. JavaScript基础 JavaScript是一种与HTML和CSS一同用于构建网页的脚本语言。它可以通过浏览器执行，也可以在服务器端通过Node.js执行。本章将介绍JavaScript的基础知识和语法。 ## 3.1 什么是JavaScript JavaScript是一种动态类型、基于原型的语言，主要用于在网页上实现交互功能，如表单验证、页面元素操作等。 ## 3.2 JavaScript基本语法 JavaScript的基本语法包括变量声明、条件语句、循环语句、函数定义等。 ```javascript // JavaScript变量声明 var x = 5; let y = 10; const PI = 3.14; // 条件语句 if (x > 0) { console.log("x是一个正数"); } else { console.log("x是一个负数"); } // 循环语句 for (let i = 0; i < 5; i++) { console.log("循环第" + (i+1) + "次"); } // 函数定义 function add(a, b) { return a + b; } ``` ## 3.3 变量和数据类型 JavaScript的变量可以用var、let、const声明，数据类型包括基