HTML、CSS、JavaScript 基础知识详解

 前端   打工人   2024-09-12 12:05   184
  HTML5 前端 JavaScript

一、HTML、CSS、JavaScript 基础知识详解

1. HTML 基础知识

HTML（Hypertext Markup Language）是用于描述网页结构的标记语言。它通过各种元素来组织网页内容，如文本、图像、链接、表格等。

1.1 HTML 元素及使用

HTML 元素通常由标签构成，标签分为开始标签和结束标签，中间包含内容。

常见的 HTML 元素：

  • <html>: 根元素，所有 HTML 页面都必须包含。
  • <head>: 包含页面的元数据，如标题、链接样式、脚本等。
  • <title>: 页面标题，显示在浏览器标签栏中。
  • <body>: 页面内容的容器，所有可见的元素都放在 <body> 内。
  • <h1> - <h6>: 标题元素，<h1> 最大，<h6> 最小。
  • <p>: 段落元素，用于容纳文本内容。
  • <a>: 链接元素，href 属性指定目标链接。
    • 示例：<a href="https://www.example.com">点击这里</a>
  • <img>: 图像元素，src 属性指定图片的 URL，alt 用于图片替代文本。
    • 示例：<img src="image.jpg" alt="图片描述">
  • <ul>、<ol>、<li>: 无序列表、有序列表和列表项。
    • 示例：<ul><li>项目1</li><li>项目2</li></ul>
  • <table>: 表格元素，使用 <tr>、<td>、<th> 构建表格行、单元格和表头。
  • <div> 和 <span>: div 用于块级元素布局，span 用于行内文本样式。
1.2 HTML 元素的属性

每个 HTML 元素都可以通过属性来控制其行为或外观。常见的属性包括：

  • id: 用于唯一标识元素。
    • 示例：<div id="header"></div>
  • class: 用于将元素分组，可以应用相同的样式或脚本。
    • 示例：<p class="text"></p>
  • style: 内联样式，用于直接定义元素的样式。
    • 示例：<p style="color: red;">红色文本</p>
  • title: 鼠标悬停时显示的提示信息。
    • 示例：<a href="#" title="链接到主页">主页</a>
  • src: 指定图像、脚本等资源的 URL。
    • 示例：<img src="image.jpg" alt="图片">
  • href: 指定超链接的目标地址。
    • 示例：<a href="https://example.com">链接</a>

2. CSS 基础知识

CSS（Cascading Style Sheets）用于描述 HTML 元素的显示样式。通过 CSS，您可以控制网页的布局、字体、颜色等。

2.1 CSS 选择器

CSS 选择器用于选择和应用样式的 HTML 元素：

  • 元素选择器：直接选择 HTML 元素。
    • 示例：p { color: blue; }（选择所有 <p> 元素并设置文字颜色为蓝色）
  • 类选择器：选择具有特定类名的元素。
    • 示例：.box { border: 1px solid black; }
  • ID 选择器：选择具有特定 ID 的元素。
    • 示例：#header { background-color: grey; }
  • 伪类选择器：选择元素的特定状态。
    • 示例：a:hover { color: red; }（当鼠标悬停在 <a> 标签上时，改变文字颜色为红色）
2.2 CSS 属性解释

常见的 CSS 属性：

  • color: 设置文本颜色。
    • 示例：color: red;
  • font-size: 设置字体大小。
    • 示例：font-size: 16px;
  • background-color: 设置元素的背景颜色。
    • 示例：background-color: lightblue;
  • margin: 设置元素外部间距。
    • 示例：margin: 10px;
  • padding: 设置元素内部间距。
    • 示例：padding: 20px;
  • border: 设置元素的边框。
    • 示例：border: 1px solid black;
  • width 和 height: 设置元素的宽度和高度。
    • 示例：width: 100px; height: 50px;
2.3 CSS 布局

常见的布局方式：

  • 盒模型：每个元素都有 margin（外边距）、border（边框）、padding（内边距）和 content（内容），组成一个矩形盒子。
    • 示例：box-sizing: border-box;（让 width 和 height 包括边框和内边距）
  • Flexbox：一种强大的布局模型，用于构建复杂的页面布局。
    • 示例：display: flex; justify-content: center; align-items: center;
  • Grid：网格布局，适合构建多列、多行的网页布局。
    • 示例：display: grid; grid-template-columns: repeat(3, 1fr);

3. JavaScript 基础知识

JavaScript 是一种基于对象的、解释型的脚本语言，用于增强网页的交互性和动态功能。

3.1 变量声明

JavaScript 中的变量通过 var、let 和 const 声明：

  • var: 函数作用域，可能导致变量提升，不推荐使用。
  • let: 块级作用域，推荐使用。
    • 示例：let age = 25;
  • const: 常量声明，值不能被修改。
    • 示例：const PI = 3.14159;
3.2 函数定义与使用

函数定义：

  • 函数声明：
    • 示例： 
      function greet(name) {
  return "Hello, " + name;
}
  • 函数表达式：
    • 示例： 
      const greet = function(name) {
  return "Hello, " + name;
};

函数使用：

  • 示例： 
    let message = greet("Alice");
console.log(message);  // 输出：Hello, Alice
3.3 内置函数

JavaScript 提供了许多内置函数，如：

  • alert(): 弹出一个警告框。
  • console.log(): 输出调试信息到浏览器控制台。
  • Math.random(): 生成 0 到 1 之间的随机数。
  • parseInt() 和 parseFloat(): 将字符串转换为整数或浮点数。
3.4 异常处理

JavaScript 通过 try...catch 结构进行异常处理：

  • 示例： 
    try {
  let result = riskyOperation();
} catch (error) {
  console.log("Error occurred: " + error.message);
} finally {
  console.log("Operation complete.");
}
3.5 模块化开发

模块化是 JavaScript 现代开发的重要部分，主要通过 export 和 import 进行模块的导出与导入。

  • 导出模块：

    • 示例： 
      export const name = "Alice";
export function greet() {
  console.log("Hello!");
}

  • 导入模块：

    • 示例： 
      import { name, greet } from './module.js';
console.log(name);  // 输出：Alice
greet();            // 输出：Hello!

总结

通过对 HTML、CSS、JavaScript 基础的学习，你能够理解如何使用 HTML 描述网页的结构，使用 CSS 控制网页的样式，使用 JavaScript 增加网页的动态功能。同时，理解 JavaScript 中的变量声明、函数定义、异常处理以及模块化开发，你将能够进行现代网页开发并为复杂的项目奠定基础。