HTML Cheatsheet

最新推荐文章于 2023-01-24 14:09:52 发布

tanyxcsdn

最新推荐文章于 2023-01-24 14:09:52 发布

阅读量410

点赞数

分类专栏： front-end 文章标签： html

本文链接：https://blog.csdn.net/tanyxcsdn/article/details/48475453

版权

front-end 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>