> For the complete documentation index, see [llms.txt](https://notes.davidfeng.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.davidfeng.us/web-developement/css.md). # HTML ## Ref {% embed url="" %} ## HTML Intro * block elements: take a whole line. * inline elements: no new line. Tags are case insensitive. `` is the same as ``. Attributes are case insensitive. `onclick` is the same as `onClick`. Usually values are in double quotes. HTML ignores indentation and newlines. ```markup My Blog is the same as My Blog ``` Browser combines multiple whitespaces, \t, \n, \r. ```markup

hello world

is the same as

hello world

``` ### \ ```markup ``` ## URL Intro 18 characters are reserved: they can only appear at certain places in URL. If those characters are used elsewhere in URL, they need to be escaped (`%` + ASCII code). Encoding other characters are not recommended. * `space`：%20 * `!`：%21 * `#`：%23 * `$`：%24 * `&`：%26 * `'`：%27 * `(`：%28 * `)`：%29 * `*`：%2A * `+`：%2B * `,`：%2C * `/`：%2F * `:`：%3A * `;`：%3B * `=`：%3D * `?`：%3F * `@`：%40 * `[`：%5B * `]`：%5D Other characters (not reserved, not legal) will be encoded to UTF-8 by browser (汉字). {% embed url="" %} ## Attributes ```markup

本站内容使用创意共享许可证，可以自由使用。

title will be shown as a tooltip when hovered. ``` `data-` attributes can be used by CSS or JavaScript. CSS example: ```css /* HTML 代码如下
Mobile only content
*/ div[data-role="mobile"] { display:none; } /* HTML 代码如下
test
​ */ .test { display: inline-block; } .test:after { content: attr(data-content); } ``` event handler: values are JavaScript code. Keys: `onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting` ## HTML character encoding ```markup

hello

hello

hello

``` entity: `&name;` * `<`：`<` * `>`：`>` * `"`：`"` * `'`：`'` * `&`：`&` * `©`：`©` * `#`：`#` * `§`：`§` * `¥`：`¥` * `$`：`$` * `£`：`£` * `¢`：`¢` * `%`：`%` * `*`：`$ast;` * `@`：`@` * `^`：`^` * `±`：`±` * 空格：` ` ## HTML tags * `
` * `