HTML Cheatsheet

最新推荐文章于 2025-04-06 23:00:24 发布

原创最新推荐文章于 2025-04-06 23:00:24 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

front-end 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个全面的HTML学习指南，从基本的HTML文档结构开始，深入介绍了HTML标签、样式应用、媒体查询及jQuery插件的使用，为开发者提供了从入门到进阶的实用技巧。

HTML Cheatsheet

Author: Yuexi Tan
Created on 2015-09-15
Last modified on 2015-09-15

Basic form

<!DOCTYPE html>
<html>
    <head> Will NOT be shown </head>
    <body> Will be shown </body>
</html>

Tags

Inside `<head> </head>`

- title: <title> webpage title </title>

- link: <link href="link-to-css" rel="stylesheet">

- style: to include CSS directly in HTML file

<style>
    .aClass {
        key: value;
    }

    anElement {
        key: value;
    }

    anElement [type="attribute"] {
        key: value;
    }
</style>


- styles: 

    - background: #000 url("link-to-img")|black|rgba(0,255,255,0.5);
    - background-size: N%|Npx|cover|contain;
    - border-radius: 10px;  # rounded corners
    - display: inline|block;
    - float: left|right; 
    - font-family: "Helvetica Neue", helvetica, sans-serif;
    - margin: TOPpx RIGHTpx BOTTOMpx LEFTpx; # or 0 auto, to center everything except text
    - max-width: 500px;
    - position: absolute;
    - opacity: .6; # change transparency of an element and things inside

- media queries:

@media (max-width: 500px) {
    body {
        background: red;
    }
}

- toggleclass (provided by jQuery):

$('img').on('click', function() {
    (this).toggleClass('caption');
})

Inside `<body> </body>`

- h1-h6: headings

- email input: <input type="email" placeholder="Some text (e.g. Your email)">

- submit input: <input type="submit">

- paragraph: <p> some text </p>

- image: <img src="link-to-img" />

- article: <article></article>

- script: <script> javascript </script>

- class: <anElement class="classA"> to select elements </anElement>

- line break: <br />

- span: <span> inline container </span>