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!";