前端新手教程：HTML、CSS 和 JavaScript 全面详解及实用案例

置顶

魏大帅。

已于 2024-10-23 09:47:44 修改

阅读量6.9k

点赞数 66

文章标签： html css javascript

于 2024-10-16 11:29:44 首次发布

本文链接：https://blog.csdn.net/weimengen/article/details/142970837

版权

一、引言

在当今数字化的时代，前端开发扮演着至关重要的角色，它决定了用户与网页和应用程序交互的体验。HTML、CSS 和 JavaScript 作为前端开发的核心技术，分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍 HTML、CSS 和 JavaScript 的知识点，并通过实用案例帮助你快速上手。

二、HTML 基础

（一）HTML 概述

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来定义网页的结构和内容，使得浏览器能够正确地显示网页。

（二）HTML 基本结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
</head>
<body>
  <!-- 网页内容在这里 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5，确保浏览器以正确的模式解析页面。
<html>：根元素，包含整个网页的内容。
<head>：包含网页的元数据，如字符编码、标题等。其中，<meta charset="UTF-8">设置字符编码为 UTF-8，以支持多种语言和字符。<title>标签定义了网页的标题，显示在浏览器的标签栏上。
<body>：包含网页的可见内容，如文本、图像、链接等。

（三）常用 HTML 标签

语义化标签：
- <header>：表示网页或章节的头部，通常包含标题、导航链接等。有助于提高网页的可读性和可访问性，方便搜索引擎理解页面结构。
- <nav>：用于定义导航链接的部分，如网站的主导航菜单、侧边栏导航等。
- <main>：代表页面的主要内容区域，一个页面应该只有一个<main>元素。突出页面的核心内容。
- <article>：表示独立的、可复用的内容块，如博客文章、新闻报道等。
- <section>：用于对页面内容进行分组，通常有一个标题来描述该部分的内容。
- <aside>：表示与页面主要内容相关但可以独立存在的部分，如侧边栏、广告、引用等。
- <footer>：包含页面的底部信息，如版权声明、联系信息、相关链接等。
多媒体标签：
- <audio>和<video>：允许在网页中直接嵌入音频和视频文件，无需依赖第三方插件。可设置属性如controls来显示播放控制条。
表单标签：
- <input>：输入字段，有多种类型如text、email、password、number、date、time、datetime-local、range、color等。可设置属性如placeholder提供输入提示，required表示必填。
- <select>：下拉列表，使用<option>标签定义选项，可设置selected指定默认选中项。
- <textarea>：多行文本输入区域，可设置rows和cols控制大小。
- <button>：按钮，可设置type为submit（提交表单）、reset（重置表单）或button（普通按钮）。
其他重要标签：
- <a>：超链接，使用href属性指定链接目标地址，target属性可设置链接在新窗口或当前窗口中打开。
- <img>：图像，使用src属性指定图像路径，alt属性提供图像的替代文本，以便在图像无法显示时显示给用户。
- <div>：通用容器，用于将其他元素组合在一起，进行布局和样式设置。
- <span>：内联容器，用于对文本或其他内联元素进行样式设置。

三、CSS 基础

（一）CSS 概述

CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的外观和布局。它可以定义网页中元素的颜色、字体、大小、位置等样式，使网页更加美观和易于阅读。

（二）CSS 引入方式

1.内联样式：直接在 HTML 标签中使用style属性。这种方式将样式直接应用于特定的元素，但会导致代码重复和难以维护。

例如：

<p style="color: blue;">This is a paragraph.</p>。

2.内部样式表：在 HTML 文件的<head>部分使用<style>标签。将样式集中在一个地方，方便管理和修改，但只适用于单个 HTML 文件。

例如：

   <head>
     <style>
       p {

最低0.47元/天解锁文章