HTML：构建网页的基本框架

HTML（HyperText Markup Language）是构建网页的基础，它使用一系列标签来描述网页的内容。以下是一些基础的HTML标签和概念：

基础标签

  • <html>：定义整个HTML文档。
  • <head>：包含文档的元信息，如标题、字符集等。
  • <title>：定义文档的标题。
  • <body>：包含文档的可视内容。
  • <h1> 至 <h6>：定义标题，<h1> 是最大的标题。
  • <p>：定义段落。

结构化内容

  • <div>：用于布局，没有固定的语义。
  • <span>：用于文本的微调，没有固定的语义。
  • <header>：定义页面的页眉。
  • <footer>：定义页面的页脚。
  • <nav>：定义导航链接。

实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>介绍</h2>
            <p>这是一个简单的HTML页面。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

CSS：美化网页的魔法师

CSS（Cascading Style Sheets）用于控制网页的样式和布局。以下是一些基础的CSS概念：

选择器

  • 类型选择器：如h1、p等。
  • 类选择器：如.my-class。
  • ID选择器：如#my-id。

属性

  • color：定义文本颜色。
  • background-color：定义背景颜色。
  • font-size：定义字体大小。
  • margin、padding：定义元素的内边距和外边距。

实例

body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav ul li {
    display: inline;
    margin-right: 10px;
}

.nav ul li a {
    text-decoration: none;
    color: #333;
}

JavaScript：让网页动起来

JavaScript是一种脚本语言，用于控制网页的行为。以下是一些基础的JavaScript概念：

变量和数据类型

  • var、let、const：定义变量。
  • string、number、boolean、null、undefined：数据类型。

函数

  • function：定义函数。
  • return：返回函数的结果。

事件处理

  • addEventListener：为元素添加事件监听器。

实例

// 定义变量
var name = "张三";
var age = 20;

// 定义函数
function sayHello() {
    alert("你好，" + name + "！");
}

// 添加事件监听器
document.getElementById("my-button").addEventListener("click", sayHello);

总结

通过学习HTML、CSS和JavaScript，你可以轻松地掌握Web前端开发。从基础标签和属性开始，逐步学习布局、样式和交互，最终构建出属于自己的网页。记住，实践是学习的关键，多动手尝试，相信你一定能够成为一名优秀的Web前端开发者！