HTML、CSS与JavaScript基础

HTML：网页的骨架

互联网起源与HTML概述

互联网起源于1960年代的美国，HTML（HyperText Markup Language）作为构建网页的标准语言，自1990年代起便成为互联网信息展示的基石。

HTML文档结构

一个标准的HTML文档包含<!DOCTYPE html>文档类型声明、<html>根控制标记、<head>头控制标记和<body>网页显示区域。其中，<title>标签定义了网页的标题。

复制代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

编写HTML文件的注意事项

编写HTML时，需要注意代码的语义化、结构的清晰性以及对搜索引擎的友好性。

段落与文字标签

p标签用于定义段落。
<h1>至<h6>标签用于定义标题，&nbsp用于插入空格。

复制代码

html

<p>这是一个段落。</p>
<h1>最大的标题</h1>
<h6>最小的标题</h6>

图片与超链接标签

<img src="" alt="">用于插入图片，其中src属性指定图片URL，alt属性提供替代文本。
<a href="">内容</a>定义超链接，href属性指定链接地址。

复制代码

html

<img src="image.jpg" alt="示例图片">
<a href="https://www.example.com">访问示例网站</a>

列表与表格标签

无序列表使用<ul>标签，有序列表使用<ol>标签。
表格由<tr>行、<th>表头单元格、<td>正文单元格等组成，<thead>、<tbody>、<tfoot>分别定义表格的页眉、主体和页脚。

复制代码

html

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

<ol>
    <li>项目1</li>
    <li>项目2</li>
</ol>

<table>
    <thead>
        <tr><th>表头1</th><th>表头2</th></tr>
    </thead>
    <tbody>
        <tr><td>单元格1</td><td>单元格2</td></tr>
    </tbody>
</table>

表单标签

表单用于收集用户输入，<form>标签定义表单，action属性指定数据提交地址，method属性定义数据提交方式。

复制代码

html

<form action="/submit-form" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

HTML5新增标签和属性

HTML5引入了新的表单控件、<canvas>标签用于绘图、媒体标签如<audio>和<video>用于嵌入多媒体内容。

复制代码

html

<canvas id="myCanvas" width="200" height="100"></canvas>
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

CSS：网页的装扮

CSS语法与选择器

CSS通过选择器匹配HTML元素，并应用样式规则。样式可以内嵌于HTML标签、内部样式或外部样式表中。

复制代码

html

<!-- 内嵌样式 -->
<p style="color: red;">This is a red paragraph.</p>

<!-- 内部样式 -->
<head>
    <style>
        .red-text {
            color: red;
        }
    </style>
</head>
<body>
    <p class="red-text">This is a red paragraph.</p>
</body>

<!-- 外部样式 -->
<link rel="stylesheet" href="styles.css">

CSS样式

CSS控制网页的视觉表现，包括背景、文本、链接、列表、表格等。

复制代码

css

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

.red-text {
    color: red;
}

盒子模型

CSS的盒子模型包括内容、内边距、边框和外边距，控制元素的大小和布局。

复制代码

css

.box {
    border: 2px solid black;
    padding: 20px;
    margin: 20px;
}

CSS定位

CSS提供相对定位、绝对定位、固定定位和浮动，用于精确控制元素的位置。

复制代码

css

.relative {
    position: relative;
    top: 10px;
}

.absolute {
    position: absolute;
    right: 0;
    bottom: 0;
}

.fixed {
    position: fixed;
    left: 0;
    top: 0;
}

.float-left {
    float: left;
}

CSS新增属性

随着CSS3的推出，新增了动画、渐变、阴影等多种视觉效果的属性。

复制代码

css

.element {
    transition: all 0.5s ease;
}

.element:hover {
    background-color: #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

JavaScript：网页的动态灵魂

JavaScript特点

JavaScript是一种解释型、嵌入在HTML中、跨平台的脚本语言，基于对象和事件驱动。

基本语法与变量

JavaScript使用变量存储数据，支持多种数据类型，包括数值型、布尔型、字符型、对象和数组。

复制代码

javascript

var message = "Hello, World!";
console.log(message);

函数与运算符

JavaScript通过函数封装可复用的代码块，运算符用于执行数学和逻辑运算。

复制代码

javascript

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice"));

流程控制

JavaScript提供条件语句和循环结构，控制程序的执行流程。

复制代码

javascript

if (condition) {
    // Code to execute if the condition is true
} else {
    // Code to execute if the condition is false
}

for (var i = 0; i < 5; i++) {
    console.log(i);
}

JS对象

JavaScript内置了多种对象，如String、Array、Date等，以及Window和Document对象用于操作浏览器窗口和文档。

复制代码

javascript

var stringObj = new String("Hello");
var arrayObj = [1, 2, 3, 4];
var dateObj = new Date();

document.getElementById("demo").innerHTML = "Hello, World!";

结语

Web前端开发是一个不断进化的领域，HTML、CSS和JavaScript三者相辅相成，共同构建了丰富多彩的网络世界。掌握这些基础知识，将为你打开Web开发的大门，让你能够创造出令人惊叹的网页应用。