Web 标准学习笔记
什么是 Web 标准
Web 标准，指的是由 W3C（万维网联盟）制定的一系列规范和约定，用于确保 Web 文档能够被不同的浏览器、操作系统和设备正确地渲染和解释。Web 标准包括 HTML、CSS 和 JavaScript 等技术标准。
HTML 标准
HTML（Hypertext Markup Language）是一种用于创建 Web 页面的标记语言。W3C 制定了 HTML 的多个版本，其中最新的版本是 HTML5。
HTML5 引入了一些新的元素和属性，比如 header、footer 等，使得代码更加语义化，并且提升了 Web 应用的可访问性和可用性。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 实例</title>
</head>
<body>
<header>
<h1>Web 标准学习笔记</h1>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
<section>
<h2>什么是 Web 标准</h2>
<p>Web 标准，指的是由 W3C 制定的一系列规范和约定，用于确保 Web 文档能够被不同的浏览器、操作系统和设备正确地渲染和解释。</p>
</section>
<section>
<h2>HTML 标准</h2>
<p>HTML（Hypertext Markup Language）是一种用于创建 Web 页面的标记语言。W3C 制定了 HTML 的多个版本，其中最新的版本是 HTML5。</p>
</section>
<footer>
© 2023 Web 标准学习笔记
</footer>
</body>
</html>
CSS 标准
CSS（Cascading Style Sheets）是一种用于为 Web 页面添加样式的语言。W3C 制定了 CSS 的多个版本，其中最新的版本是 CSS3。
CSS3 引入了很多新的特性，比如盒模型、文本阴影、变形等，使得页面的呈现效果更加丰富和个性化。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 实例</title>
<style>
body {
background-color: #f8f8f8;
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.2;
margin-bottom: 10px;
text-transform: uppercase;
}
a {
color: #039;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
section {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Web 标准学习笔记</h1>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
<section>
<h2>什么是 Web 标准</h2>
<p>Web 标准，指的是由 W3C 制定的一系列规范和约定，用于确保 Web 文档能够被不同的浏览器、操作系统和设备正确地渲染和解释。</p>
</section>
<section>
<h2>CSS 标准</h2>
<p>CSS（Cascading Style Sheets）是一种用于为 Web 页面添加样式的语言。W3C 制定了 CSS 的多个版本，其中最新的版本是 CSS3。</p>
</section>
<footer>
© 2023 Web 标准学习笔记
</footer>
</body>
</html>
JavaScript 标准
JavaScript 是一种用于为 Web 页面添加交互性和动态效果的脚本语言。W3C 制定了 ECMAScript（JavaScript 的规范）。
JavaScript 可以通过操作 DOM（Document Object Model）和 BOM（Browser Object Model）来实现页面的动态效果。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 实例</title>
<style>
body {
background-color: #f8f8f8;
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.2;
margin-bottom: 10px;
text-transform: uppercase;
}
a {
color: #039;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
section {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
padding: 20px;
}
button {
background-color: #039;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: inherit;
padding: 10px 20px;
}
button:hover {
background-color: #06c;
}
</style>
<script>
function showDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<header>
<h1>Web 标准学习笔记</h1>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
<section>
<h2>什么是 Web 标准</h2>
<p>Web 标准，指的是由 W3C 制定的一系列规范和约定，用于确保 Web 文档能够被不同的浏览器、操作系统和设备正确地渲染和解释。</p>
</section>
<section>
<h2>JavaScript 标准</h2>
<p>JavaScript 是一种用于为 Web 页面添加交互性和动态效果的脚本语言。W3C 制定了 ECMAScript（JavaScript 的规范）。</p>
<button onclick="showDate()">查看时间</button>
<p id="demo"></p>
</section>
<footer>
© 2023 Web 标准学习笔记
</footer>
</body>
</html>
以上是一个简单的 Web 标准学习笔记样例，展示了 HTML、CSS 和 JavaScript 的基础应用。通过深入理解 Web 标准，可以帮助开发者编写更加可靠、高效、易于维护和扩展的 Web 应用。