如何学会HTML5
点击展开摘要
阅读它，你将成为前端大神，附带让用户想砸电脑的旋转特效秘籍。
HTML5 从入门到放弃：一个不正经的编程教程
第一章：HTML 基础 - 标签的艺术
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 上面这堆meta标签我也不知道干嘛用的，但每个网站都有，复制就完事了 -->
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这里本来应该有内容，但我还没想好写什么</p>
<!-- 注释是程序员写给未来的自己的情书 -->
<div>
<div>
<div>
<!-- 俄罗斯套div，专业前端必备 -->
</div>
</div>
</div>
</body>
</html>第二章：CSS 基础 - 复制粘贴大法
/* 第一步：找到一个好看的网页 */
/* 第二步：右键 -> 检查 -> 开发者工具 */
/* 第三步：在Elements面板找到对应的元素 */
/* 第四步：在Styles面板复制所有CSS */
/* 第五步：粘贴到你的style.css文件中 */
/* 恭喜！你现在是个CSS专家了 */
body {
font-family: 'Comic Sans MS', cursive, sans-serif; /* 专业设计师最爱 */
background-color: #f0f0f0; /* 高级灰 */
color: #333; /* 另一个高级灰 */
margin: 0;
padding: 0;
/* 下面这行会让页面更有"弹性" */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* 我也不知道这些flex属性具体干嘛的，但看起来很专业 */
}第三章：JavaScript 基础 - 让页面动起来
// 警告：以下代码可能导致你的电脑爆炸
document.querySelectorAll('*').forEach(element => {
element.addEventListener('click', function() {
this.style.transform = 'rotate(360deg)';
this.style.transition = 'transform 1s';
setTimeout(() => {
this.style.transform = 'rotate(0deg)';
}, 1000);
});
});
// 现在你的网站上所有元素点击都会旋转！
// 用户一定会觉得这很酷（或者很烦）第四章：响应式设计 - 让网站在所有设备上都难看
@media screen and (max-width: 600px) {
body {
background-color: hotpink;
font-size: 24px;
}
/* 小屏幕用户应该享受更"特别"的体验 */
.button {
width: 100%;
background: linear-gradient(to right, purple, blue);
font-size: 32px;
}
}
/* 专业提示：测试响应式设计时，只需不断调整浏览器窗口大小并发出绝望的叹息 */第五章：调试技巧
- console.log() 大法：在你觉得代码应该工作的地方加上
console.log('到这里了')，然后祈祷 - 删除大法：一次删除一半代码，看看问题是否消失，重复直到找到问题
- Stack Overflow 复制粘贴：错误信息 + "site:stackoverflow.com"
- 终极解决方案：重启电脑、更新所有东西、重装系统、换台电脑
- 放弃疗法：把项目放一边几天，希望问题能自己解决
毕业项目：创建一个"专业"的个人网站
<!DOCTYPE html>
<html>
<head>
<title>John Doe - 全栈摇滚明星开发者</title>
<style>
body {
font-family: 'Papyrus', fantasy;
background: url('https://example.com/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: lime;
text-align: center;
}
.blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
</style>
</head>
<body>
<h1 class="blink">欢迎来到我的个人网站！</h1>
<marquee>最新消息：我正在寻找工作！请雇用我！</marquee>
</body>
</html>恭喜！你现在已经掌握了现代网页开发的所有高级技巧！
快去申请高级前端工程师职位吧！记住：当面试官问你问题的时候，只需回答"这取决于具体情况"和"我会去Stack Overflow上查找"，你就能得到这份工作！