HTML

五官

CSS

颜值

JavaScript

表情

HTML

一种第一网站内容的文件格式

它规范了一个网页的：

  • 基本信息
  • 内容
  • 布局结构

Template

HTML 本身的格式打字太多了，好麻烦：

  • Jade
  • Haml
  • ejs
  • Handlebars
<!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>

CSS

用 id, class, pseudo class 来定义 HTML 里元素的具体样式。

Pre/Post-processor

CSS 写起来也很讨厌，因此我们有很多工具来帮忙

  • Sass
  • Stylus
  • Less
  • PostCSS
#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);
    }
}

HTML

CSS

Files

JS

Jade/ejs/ ...

BACKEND

FRONTEND

Sass/Less/ ...

JS / CoffeeScript

Webpack

Gulp

Grunt

Express.js

DEMO

xitu.github.io

LEARN MORE

Tutorials

  • http://learn.shayhowe.com/html-css
  • http://learn.shayhowe.com/advanced-html-css

 

Docs

  • https://developer.mozilla.org
  • https://www.w3.org

 

Keep Updated

  • https://css-tricks.com
  • http://tympanus.net/codrops
  • http://www.html5rocks.com

xitu-html-css-tutorial

By Ming YIN

Made with Slides.com

xitu-html-css-tutorial

稀土团队技术普及：CSS/HTML

  • 4,511

More from Ming YIN