HTML入门教程

1. HTML基础结构

HTML（超文本标记语言）是构建网页的基本语言。以下是HTML的基础结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这里是网页的内容。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html>：根元素，包含整个网页内容。
  • <head>：包含元数据，如字符集、标题等。
  • <title>：网页标题，显示在浏览器标签页上。
  • <body>：包含网页可见内容。

2. 常用标签

  • <h1>至<h6>：标题标签，<h1>为最高级别。
  • <p>：段落标签。
  • <a>：超链接标签，用于创建链接。
  • <img>：图像标签，用于在网页中插入图片。

CSS基础教程

1. CSS基础语法

CSS（层叠样式表）用于控制网页的样式。以下是CSS的基础语法：

/* 选择器 { 属性: 值; } */
body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}
  • 选择器：指定要应用样式的HTML元素。
  • 属性：定义样式，如background-color和font-family。
  • 值：指定属性的值，如#f5f5f5和Arial。

2. 常用样式

  • 背景颜色：background-color: 颜色值;
  • 字体：font-family: 字体名称;
  • 字体大小：font-size: 像素值;
  • 文本颜色：color: 颜色值;
  • 边框：border: 边框样式;

JavaScript实战技巧

1. JavaScript基础语法

JavaScript是一种用于网页交互的脚本语言。以下是JavaScript的基础语法：

// 声明变量
var age = 18;

// 输出信息
console.log("我今年" + age + "岁。");
  • var：声明变量。
  • console.log()：在控制台输出信息。

2. 常用函数

  • alert()：显示一个警告框。
  • confirm()：显示一个确认框。
  • prompt()：显示一个输入框。

3. 事件处理

JavaScript可以处理各种事件，如点击、鼠标移动等。以下是一个点击事件的示例：

<button onclick="changeColor()">点击我</button>

<script>
    function changeColor() {
        document.body.style.backgroundColor = "#ffcc00";
    }
</script>
  • onclick：为按钮元素添加点击事件。
  • changeColor()：定义一个函数，用于更改网页背景颜色。

总结

掌握HTML、CSS和JavaScript是学习Web前端的基础。通过以上教程，你可以轻松入门并掌握这些技能。在实际开发中，还需要不断学习和实践，积累经验。祝你学习愉快！