前端新手学习笔记：HTML、CSS、JavaScript基础知识

最新推荐文章于 2025-09-30 16:34:06 发布

原创最新推荐文章于 2025-09-30 16:34:06 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #笔记 #html

本文介绍了HTML用于构建网页结构的基础标签和元素，CSS用于添加样式和布局的选择器及属性，以及JavaScript如何为网页提供交互和动态效果。

HTML：构建网页结构的标记语言

HTML（Hypertext Markup Language）是一种用于构建网页结构的标记语言。它使用一系列的标签和元素来描述网页的不同部分，如标题、段落、链接、图像等。以下是一些常见的HTML标签和元素：

<html>：定义HTML文档的根元素。
<head>：包含了文档的元数据，如标题、字符编码等。
<title>：定义网页的标题，显示在浏览器的标题栏上。
<body>：包含了网页的可见内容，如文本、图像、链接等。
<h1>至<h6>：定义标题，按重要性递减，其中<h1>为最高级标题。
<p>：定义段落。
<a>：定义链接，通过href属性指定链接的目标。
<img>：插入图像，通过src属性指定图像的URL。

以下是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个示例网页。</p>
  <a href="https://www.example.com">点击这里访问示例网站</a>
  <img src="example.jpg" alt="示例图片">
</body>
</html>

CSS：为网页添加样式和布局

CSS（Cascading Style Sheets）用于为网页添加样式和布局。它通过选择器和属性来选择网页中的元素，并定义它们的样式。以下是一些常见的CSS属性和选择器：

选择器：
- 元素选择器：选择指定标签的元素，如h1、p等。
- 类选择器：选择具有相同类名的元素，以.开头，如.my-class。
- ID选择器：选择具有相同ID的元素，以#开头，如#my-id。
- 属性选择器：选择具有指定属性的元素，如[name="my-name"]。
- 伪类选择器：选择元素的特定状态，如:hover、:focus等。
常见的CSS属性：
- color：定义文本颜色。
- font-size：定义字体大小。
- padding：定义元素内边距。
- margin：定义元素外边距。
- background-color：定义背景颜色。
- border：定义边框样式。

以下是一个简单的CSS示例，将标题设置为红色：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个示例网页。</p>
</body>
</html>

JavaScript：为网页添加交互和动态效果

JavaScript是一种用于为网页添加交互性和动态效果的脚本语言。它可以通过操作网页中的元素和处理用户的交互来实现各种功能。以下是一些JavaScript的应用场景和特性：

DOM操作：JavaScript可以通过Document Object Model（DOM）来访问和操作网页的元素，如修改文本内容、添加/移除元素等。
事件处理：JavaScript可以响应用户的交互事件，如点击、鼠标移动等，并执行相应的操作。
表单验证：JavaScript可以验证用户输入的数据，如检查表单是否为空、验证邮箱格式等。
动画效果：JavaScript可以创建各种动画效前端新手学习笔记：HTML、CSS、JavaScript基础知识

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

HTML：构建网页结构的标记语言

HTML（超文本标记语言）是一种用于构建网页结构的标记语言。它使用一系列的标签和元素来描述网页的不同部分，如标题、段落、链接、图像等。以下是一些常见的HTML标签和元素：

<html>：定义HTML文档的根元素。
<head>：包含了文档的元数据，如标题、字符编码等。
<title>：定义网页的标题，显示在浏览器的标题栏上。
<body>：包含了网页的可见内容，如文本、图像、链接等。
<h1>至<h6>：定义标题，按重要性递减，其中<h1>为最高级标题。
<p>：定义段落。
<a>：定义链接，通过href属性指定链接的目标。
<img>：插入图像，通过src属性指定图像的URL。

以下是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个示例网页。</p>
  <a href="https://www.example.com">点击这里访问示例网站</a>
  <img src="example.jpg" alt="示例图片">
</body>
</html>

CSS：为网页添加样式和布局

CSS（层叠样式表）用于为网页添加样式和布局。它通过选择器和属性来选择网页中的元素，并定义它们的样式。以下是一些常见的CSS属性和选择器：

选择器：
- 元素选择器：选择指定标签的元素，如h1、p等。
- 类选择器：选择具有相同类名的元素，以.开头，如.my-class。
- ID选择器：选择具有相同ID的元素，以#开头，如#my-id。
- 属性选择器：选择具有指定属性的元素，如[name="my-name"]。
- 伪类选择器：选择元素的特定状态，如:hover、:focus等。
常见的CSS属性：
- color：定义文本颜色。
- font-size：定义字体大小。
- padding：定义元素内边距。
- margin：定义元素外边距。
- background-color：定义背景颜色。
- border：定义边框样式。

以下是一个简单的CSS示例，将标题设置为红色：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个示例网页。</p>
</body>
</html>