# HTML DOM Jquery ## HTML ### Basics * file protocol has three forward slashes: `file:///` * Use to mean quotes. It makes the content more structural than double quotes '"' as not in all language that the double quotes is used for quoting. * Use to quote a block of text. The default browser behavior is to indent the text block. * 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。 * `ul` `li` are block items * how to use custom marker for bullet points? `list-style-image: url(image/backpack.gif)` * basic HTML5 structure ```markup ``` URL Query String: * `http://server/path/program?search=ruby&results=10` * some browser has max length limit: URL Encoding * everything not ASCII will be encoded * Eg, `%920` is space Charater entity: * `>, <, &, ©, or use d (use number instead of names)` * * JavaScript provides functions `encodeURIComponent` and `decodeURIComponent` to add these codes to strings and remove them again img * Jpeg:lossy information format * Png: lossless format * Gif: up t 256 colors. Only one color can be set to transparent. * always provide alternative `` is a inline element. So if you have multiple images, they will be put side by side by default. * you can use css to always add a background image to any element: ```css background-image: url(images/background.gif); background-repeat: no-repeat; background-position: top left; ``` table * table cel has no margin property. Use border-spacing from table to specify the entire table. * use rowspan to span cell across rows. The spanned row therefore doesn't need to have the td cells. * DON'T use table to layout stuff! Think about my gift page, do I need to use table to layout? I think it's fine for table as they are tabular data. (p607) * table in html tells your data is in the relationships of tabular data items. In general, table is not used for presentation. * table in css gives you a way to display block-level elements. If you just want to use a table-like presentation, then use css table. * table cannot be loaded faster, the whole thing has to be loaded for browser to determine layout. It cannot be easily cached either. * You can also use `dl` to display key/value pair, like table table html: ``` table caption thead tr th th tbody tr td td tfoot tr td td ``` table css: ```css div.tableRow { display: table-row; } div.tableRow p { display: cell; } ``` css table, when you use it, make sure you add the following to the cell div, otherwise the cell content is aligned to middle or bottom! (p520) vertical-align: top; `` use label and property 'for' with id: `` ### form * radio has same name ```markup
Male
Female
``` * select, name, option, value (select can have a `multiple` boolean attribute) ```markup ``` * use 'required' boolean property to make sure the field is not empty when submitting. * How to style file input? [Wrap it under label and hide it](http://stackoverflow.com/a/25825731/166286) ```markup ``` * how to access elements of a form? ```markup
``` ```javascript document.getElementById('foo'); // preferred document.getElementById("myform").elements["foo"]; document.myForm.foo; // note it might return foo property of the form instead of foo element. // http://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute ``` `` use it instead of ``, abbreviation is not a word (DOM is acronym). ```markup

I do HTML

``` `