HTML、CSS、JavaScript 基础知识详解

 前端   打工人   2024-09-12 12:05   196

一、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;
  • widthheight: 设置元素的宽度和高度。
    • 示例:width: 100px; height: 50px;
2.3 CSS 布局

常见的布局方式:

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

3. JavaScript 基础知识

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

3.1 变量声明

JavaScript 中的变量通过 varletconst 声明:

  • 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 现代开发的重要部分,主要通过 exportimport 进行模块的导出与导入。

  • 导出模块

    • 示例:
      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 中的变量声明、函数定义、异常处理以及模块化开发,你将能够进行现代网页开发并为复杂的项目奠定基础。