【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成
HTML、CSS 和 JavaScript 是前端开发的三个主要部分。以下是每个部分的简单速成教程。
HTML
定义： 超文本标记语言（Hypertext Markup Language）。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
</html>CSS
定义： 级联样式表（Cascading Style Sheets）。
示例代码：
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
font-size: 16px;
}JavaScript
定义： 是一种在浏览器中使用的动态编程语言。
示例代码：
// 改变段落颜色
function changeParagraphColor() {
document.querySelector('p').style.color = 'red';
}
// 当文档加载完成时执行
window.onload = function() {
document.getElementById('myButton').onclick = changeParagraphColor;
};在HTML文件中使用这些代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
<button id="myButton">点击我改变颜色</button>
<script src="script.js"></script>
</body>
</html>以上代码演示了如何将HTML、CSS和JavaScript文件应用到一个简单的网页中，实现了一个基本的交互功能。
评论已关闭