HTML5 简介
HTML5 是当前网页制作的主流标准,它提供了许多新的功能,使得网页设计更加丰富和动态。从零开始学习 HTML5,你可以一步步掌握网页制作的技巧,打造出吸引人的网页。
HTML5 基础知识
1. HTML5 基础标签
HTML5 中包含许多基础标签,如 <html>、<head>、<body>、<title> 等。这些标签是构成网页的基本元素。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这里是我的内容。</p>
</body>
</html>
2. HTML5 文本格式化
HTML5 提供了多种文本格式化标签,如 <h1> 至 <h6>(标题)、<p>(段落)、<ul>、<ol>、<li>(列表)等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一段文字。</p>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
3. HTML5 图片和多媒体
HTML5 支持多种多媒体元素,如 <img>(图片)、<audio>、<video>(音频和视频)等。
<img src="image.jpg" alt="图片描述" />
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
您的浏览器不支持音频播放。
</audio>
<video controls>
<source src="video.mp4" type="video/mp4" />
您的浏览器不支持视频播放。
</video>
CSS 基础
CSS(层叠样式表)用于设置网页元素的样式,如颜色、字体、背景等。
1. CSS 选择器
CSS 选择器用于选择 HTML 元素,并应用样式。常用的选择器有元素选择器、类选择器、ID 选择器等。
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.red-text {
color: blue;
}
/* ID 选择器 */
#title {
font-size: 24px;
}
2. CSS 属性
CSS 属性用于设置元素的样式,如 color(颜色)、font-size(字体大小)、background-color(背景颜色)等。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 id="title">这是一个标题</h1>
<p class="red-text">这是一段文字。</p>
</body>
</html>
JavaScript 基础
JavaScript 是一种编程语言,用于为网页添加交互功能。
1. JavaScript 变量和数据类型
JavaScript 变量用于存储数据,数据类型包括数字、字符串、布尔值等。
var name = "张三";
var age = 18;
var isStudent = true;
2. JavaScript 运算符和表达式
JavaScript 运算符用于进行数学和逻辑运算,如加号 +、减号 -、乘号 *、除号 / 等。
var result = 5 + 3; // 结果为 8
3. JavaScript 函数
JavaScript 函数是一段可重复使用的代码,用于执行特定任务。
function sayHello() {
console.log("Hello, world!");
}
sayHello(); // 输出 "Hello, world!"
HTML5 前端开发实战
1. 创建一个简单的网页
首先,使用 HTML5 创建一个基础网页,包含标题、文本、图片和多媒体元素。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这里是我的内容。</p>
<img src="image.jpg" alt="图片描述" />
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
您的浏览器不支持音频播放。
</audio>
<video controls>
<source src="video.mp4" type="video/mp4" />
您的浏览器不支持视频播放。
</video>
</body>
</html>
2. 使用 CSS 设计网页布局
接下来,使用 CSS 设置网页布局,包括字体、颜色、背景等样式。
/* 设置网页字体 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
/* 设置标题样式 */
h1 {
color: #333;
text-align: center;
}
/* 设置段落样式 */
p {
color: #666;
margin: 20px;
}
3. 使用 JavaScript 添加交互功能
最后,使用 JavaScript 为网页添加交互功能,如点击按钮切换文字颜色。
<!DOCTYPE html>
<html>
<head>
<title>交互网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
<script>
function changeColor() {
document.body.style.backgroundColor = "#ccc";
}
</script>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这里是我的内容。</p>
<button onclick="changeColor()">切换背景颜色</button>
</body>
</html>
总结
通过本文的学习,你已初步掌握了 HTML5 前端开发的实战技巧。继续努力,深入学习 CSS 和 JavaScript,你可以打造出更多精美的网页。祝你在前端开发的道路上越走越远!
