All notes
Html

Basics

Template

See note: bootstrap.note.

DOM

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

Anchors


<!-- Bookmark -->
<h2 id="tips">Useful Tips Section</h2>

<a href="#tips">Visit the Useful Tips Section</a>

<a href="html_tips.html#tips">Visit the Useful Tips Section</a> 

body, html

In JS, html is document.rootElement and body is document.body.

Character Encodings


For HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For HTML5:
<meta charset="UTF-8">

span

How to display empty span

The spans are ignoring the width because they are inline elements. You need to make them inline-block elements.


span.theClassName { width: 100px; display: inline-block }


Also keep in mind that you may need to add a height to it depending on where it's displayed, or you'll end up with a span 100px wide but 0px high.

tables



<!DOCTYPE html>
<html>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align:center;
}
table {
border-spacing: 5px;
}
<!-- Alternating rows -->
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
</style>

<body>
<table id="t01">
<!-- Caption tag must be right after table tag. -->
<caption>Performance</caption>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Score</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>


Entities

SPACE	&nbsp;


Meta

Wikipedia: meta refresh.
Use of meta refresh is discouraged by the World Wide Web Consortium (W3C), since unexpected refresh can disorient users. Meta refresh also impairs the web browser's "back" button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Internet Explorer 7 and higher, Mozilla Firefox, Opera, Chrome).
There are legitimate uses of meta-refresh, such as providing updates to dynamic web pages or implementing site controlled navigation of a website without JavaScript. Many large websites use it to refresh news or status updates, especially when dependencies on JavaScript and redirect headers are unwanted.


<!-- Place inside <head> to refresh page after 5 seconds: -->
<meta http-equiv="refresh" content="5">
<!-- Redirect to http://example.com/ after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=http://example.com/">
<!-- Redirect to http://example.com/ immediately: -->
<meta http-equiv="refresh" content="0; url=http://example.com/">
<!-- if the current URL is news.php, the browser redirects the user to news-nojs.php. -->
<noscript><meta http-equiv="refresh" content="0; url=news-nojs.php"></noscript>

<meta name="robots" content="noindex">
<!-- 重要提示！要使 noindex 元标记生效，相应网页就不得被 robots.txt 文件屏蔽。-->

Highlight.js

First principle, if you find difficulty, always go to the test page to see how the authors do.

Highlight.js could automatically determine which languages defined in GeSHi is present. Sometimes when the code snippet is too short and Highlight.js could fail to determine the correct one. We can add a class attribute to the code to tell it what language it is. Example: <pre><code class="bash"></code></pre>. Or you could disable the highlighting by <pre><code class="no-highlight"></code></pre>. The usage page talks about this.

Use "pre/code" <pre><code></code></pre> or "code/pre" <code><pre></pre></code>? I have tried both and they are both recognized by highlight.js. The only difference is, "pre/code" has a leading empty line while "code/pre" has not. Example:

"code/pre", my favorate:


using namespace std;
int main(int argc, char** argv)
{
cout<<"Hello world!"<<endl;
}

"pre/code" in different lines: (of course, when you see the test page in highlight.js, they put the two tags in the same line, which avoids the empty line.)


using namespace std;
int main(int argc, char** argv)
{
cout<<"Hello world!"<<endl;
}

Forms

input

Attributes



checked
When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default.


autocomplete



<input name="q" type="text" autocomplete="off"/>

// To make your web application iPhone and iPad friendly, you can also control whether or not automatic correction or capitalization is used in your form’s input fields. This can come in handy for username fields.
// To turn off autocorrect:
<input type="text" name="some_name" autocorrect="off"></input>
// To turn off autocapitalize:
<input type="text" name="some_name" autocapitalize="off"></input>


types

button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
range
reset
search
submit
tel
text
time
url
week


checkbox

value property
For checkboxes, the contents of the value property do not appear in the user interface.
The value property only has meaning when submitting a form.
If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property; if the checkbox is not checked, no information is sent.


SO.



<!-- Conformed to XHTML -->
<input type="radio" name="imgsel" value="" checked="checked" />

<!-- If you don't aim for XHTML conformance, you can simplify the code to: -->

Radio button checked is not working

When "input" is a child of a "table" or "label", the "checked" property is just not working! E.g.:



<label class="alignment-option">
<div class="alignment-icon alignment-left"></div>
<input id="text-placement-inline" type="radio" name="caption-alignment" value="inline" checked>
</label>


Solution: replace the parent "label" with "div" or "form".

range, slider

Realtime triggering when draggin: onChange, onInput

"onchange" should only be triggered when the user releases the mouse. To get continuous updates, you should use the "oninput" event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:



<span id="valBox"></span>
<input type="range" min="5" max="10" step="1"
oninput="showVal(this.value)" onchange="showVal(this.value)">

<!-- with jQuery -->
\$("#myelement").on("input change", function() { doSomething(); });


maxlength

The maxlength attribute specifies the maximum number of characters allowed.

select



<select>
<option label="v" value="volvo">Volvo</option>
<option label="s" value="saab" selected>Saab</option>
<option label="o" value="opel">Opel</option>
<option label="Audi" value="audi">Audi</option>
</select>

Attribute	Value	Description
------

autofocus	autofocus	Specifies that the drop-down list should automatically get focus when the page loads. HTML5 only.
required	required	Specifies that the user is required to select a value before submitting the form. HTML5 only.
form	form_id	Defines one or more forms the select field belongs to. HTML5 only.

disabled	disabled	Specifies that a drop-down list should be disabled.
multiple	multiple	Specifies that multiple options can be selected at once.
name	name	Defines a name for the drop-down list.
size	number	Defines the number of visible options in a drop-down list.


Option attributes:

"label": text for the label indicating the meaning of the option. If the label attribute isn't defined, its value is that of the element text content.
"selected": If present, this Boolean attribute indicates that the option is initially selected.
"value": the value to be submitted with the form.


for

The "for" attribute specifies which form element a label is bound to (match to "id", see example below). w3schools.com: attribute label for.



<form action="/action_page.php">
<label for="male">Male</label>
<label for="female">Female</label>
<label for="other">Other</label>
<input type="submit" value="Submit">
</form>

Should I put input tags inside a label tag?

SO.

The label itself may be positioned before, after or around the associated control.



<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

<label>
<input type="text" name="lastname" />
Last Name
</label>


Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.

Either one is valid. I like to use either the first or second example, as it gives you more style control.

id

"name" vs "id"

StackOverflow: form id and form name. The name attribute is what is sent when the form is submitted. The id attribute uniquely identifies any element on the page.


<input type="radio" name="color" id="c1" value="r" checked="checked"/><label for="c1">Red</label>
<input type="radio" name="color" id="c2" value="y"/><label for="c2">Yellow</label>
<input type="radio" name="color" id="c3" value="b"/><label for="c3">Blue</label>

When the form is submitted, only the selected option is sent: "?color=y"

fieldset

SO.

Why we need it? It's needed for accessibility. The HTML 4 elements fieldset and legend allow you to layout and organise a large form with many different areas of interest in a logical way without using tables.



<fieldset>
<legend>Colour</legend>

<label for="colour_red">Red</label>

<label for="colour_green">Green</label>

<label for="colour_blue">Red</label>

</fieldset>



<form action="demo_form.asp">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>

<form action="demo_form.asp">
<input type="file" name="xls" accept=".xls, .xlsx">
<input type="submit">
</form>

"accept" could be:

• file_extension: ".gif, .jpg, .png, .doc, .pdf"
• "audio/*"
• "video/*"
• "image/*"
• media_type: "application/pdf". See iana.org for reference.

enctype

The enctype attribute can be used only if method="post".

application/x-www-form-urlencoded
Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values).

multipart/form-data
No characters are encoded. This value is required when you are using forms that have a file upload control.

text/plain
Spaces are converted to "+" symbols, but no special characters are encoded.


References

Paragraphs

ruby

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications. ㄏㄢˋ

s

Mark up text that is no longer correct: strikethrough.

The "s" tag should not be used to define replaced or deleted text, use the "del" tag to define replaced or deleted text.

My car is blue.

My new car is silver.

samp

Sample output from a computer program.

wbr

The "wbr" (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

To learn AJAX, you must be familiar with the XMLHttpRequest Object.

Lists

Content categories: Flow content. Elements belonging to the flow content category typically contain text or embedded content.

• "UL": list-style-type: "disc|circle|square|none"
• "OL": list-style-type: "decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none"
• "OL": list-style-image: "url(../images/hand-blue.gif)|none"
• To give a similar effect as the "compact" attribute, the CSS property "line-height" can be used with a value of 80%.

CSS properties that may be specially useful to style the "ul" element:

• the list-style property, useful to choose the way the ordinal is displayed,
• CSS counters, useful to handle complex nested lists,
• the line-height property, useful to simulate the deprecated compact attribute,
• the margin property, useful to control the indent of the list.
• Other list-related HTML Elements: "ol", "li", "menu".

<ul>
<li>first item</li>
<li>second item      <!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>                <!-- Here is the closing </li> tag -->
<li>third item</li>
</ul>

Attributes

tabindex

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). w3schools.com: att_global_tabindex.

In HTML5, the tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

In HTML 4.01, the tabindex attribute can be used with: "a", "area", "button", "input", "object", "select", and "textarea".


<element tabindex="number">
<!-- 1 is first. -->

tabindex=0

When tabindex is set to 0, the element is inserted into the tab order based on its location in the source code.

0 is also the default tabindex value. If the element is focusable by default there’s no need to use tabindex at all, but if you’re repurposing an element like a "span" or "div", then tabindex=0 is the natural way to include it in the tab order. It’s worth mentioning at this point that it’s easier to use a focusable HTML element wherever possible, such as "button" or "input".

tabindex=-1

When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order.

In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

tabindex=1+

It’s when tabindex is set to a positive integer that things get problematic.

It doesn’t matter how many focusable elements appear in the source order/visual presentation, the tabindex of 1 means it’ll be the first element to receive focus on the page. wcfNote: it means tabindex=1 makes all tabindex=0 invalid and ineffective.

So keep these things in mind: Avoid using tabindex=1+.

HTML5

Compatibility check



//---------- Vanilla

// Creating a dummy <canvas> element. The element is never attached to your page, so no one will ever see it.
// Test for the presence of a getContext() method.
// Double-negative trick to force the result to a Boolean value.
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

//---------- Modernizr

if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}


FAQ

End tags being ignored

Some HTML closing tags are optional, i.e.:

HTML
BODY
P
DT
DD
LI
OPTION
TH
TBODY
TR
TD
TFOOT
COLGROUP


The optional ones are all ones that should be semantically clear where they end, without needing the end tag. E.G. each "li" implies a "/li" if there isn't one right before it.

Examples where ignoring end tags may be perferred:


<!-- Valid: -->
<ul>
<li>item
<ul>
<li>item
</ul>
</ul>

<!-- Invalid: -->
<ul>
<li>item</li>
<ul>
<li>item</li>
</ul>
</ul>

<p>foo <p>bar</p> baz</p>
<!-- will parse as: -->
<p>foo</p><p>bar</p> baz

Some elements in HTML are forbidden from having closing tags. Such as:

IMG
INPUT
BR
HR
FRAME
AREA
BASE
BASEFONT
COL
ISINDEX
META
PARAM


xhtml is different from HTML. xhtml is a form of xml, which requires every element have a closing tag. A closing tag can be forbidden in html, yet mandatory in xhtml.

Phrase tags such as Code, Pre, Samp

• Use "code" for inline code that can wrap.
• "pre code" for block code that must not wrap.
• "samp" is intended to identify sample output from a computer program.

<abbr>pvt. or inc.</abbr><br />
<acronym>HTML</acronym><br />
<cite>Citation</cite><br />
<em>Emphasized text</em><br />
<strong>Strong text</strong><br />
<dfn>Definition term</dfn><br />
<code>Computer code text</code><br />
<samp>Sample computer code text</samp><br />
<kbd>Keyboard text</kbd><br />
<var>Variable</var><br />

Remove leading and trailing linebreaks with pre/code


<pre><code class="cpp"><!--
-->double myNumber = (double)4;<!--
--></code></pre>