Web前端开发技术实验11 HTMLCSS3与JavaScript基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5, CSS3 和 JavaScript 基础示例</title>
<style>
body { font-family: Arial, sans-serif; }
header, nav, section, footer {
border: 1px solid #000;
margin-bottom: 10px;
padding: 5px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li { display: inline; }
section {
width: 500px;
margin: 0 auto;
padding: 10px;
}
time {
color: #888;
font-size: 0.8em;
}
.highlight { background-color: yellow; }
</style>
</head>
<body>
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<section>
<h2>最新文章</h2>
<article>
<h3><a href="#">文章标题</a></h3>
<p>这里是文章的摘要...</p>
<time datetime="2023-04-01">2023年4月1日</time>
</article>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
<script>
// 这里可以编写JavaScript代码来增强网页功能
</script>
</body>
</html>这个代码实例展示了如何使用HTML5、CSS3和JavaScript为一个简单的网站创建基础的结构和样式，同时提供了一个<script>标签用于插入JavaScript代码。这个示例旨在教学如何搭建一个基本的网站架构，并提供了一个学习HTML、CSS和JavaScript的起点。
评论已关闭