一种第一网站内容的文件格式
它规范了一个网页的：
HTML 本身的格式打字太多了，好麻烦：
<!DOCTYPE html>
<html>
<head></head>
<body class="container"></body>
</html>doctype html
html
head
body.container<!DOCTYPE html>
<html>
<head>
<title>这是网页的标题</title>
<link rel="stylesheet" href="PATH/TO/STYLE.CSS">
<meta name="keywords" contents="keyword1,keyword2, ...">
</head>
<body>
<header>
<p>Header 标题</p>
</header>
<main>
<section>
<article><img src="http://gold.xitu.io/logo.svg"></article>
<article>
<h3>稀土掘金</h3>
<p>
<a href="http://gold.xitu.io">掘金</a>是一个好网站。
<strong>掘金</strong>是一个好网站。
</p>
</article>
</section>
</main>
<script src="..."></script>
<script>
console.log("在浏览器里直接运行代码");
</script>
</body>
</html>用 id, class, pseudo class 来定义 HTML 里元素的具体样式。
CSS 写起来也很讨厌，因此我们有很多工具来帮忙
#footer {
background-color: black;
}
.item {
font-size: 20px;
}
input:focus {
border: 1px solid blue;
}
.post img {
border-radius: 5px;
}// 让一个人的头像编程圆的
.avatar {
border-radius: 100%;
width: 50px;
height: 50px;
}
// 一个碰上去，点击会变颜色的 button
button {
background: rgba(0,0,0,0.5);
transition: background 0.3s linear, color 0.3s ease-in-out;
}
button:hover {
background: rgba(0,0,0,0.7);
}
button:active {
background: #000;
color: blue;
}
// 一个会转 50° 的方格
.rotate {
transform: rotate(50deg);
}
.rotate.rotating {
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}Webpack
Gulp
Grunt
xitu.github.io
Tutorials
Docs
Keep Updated