All notes
Html

Basics

Template

See note: bootstrap.note.

DOM

mozilla.org: 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

W3School.


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

SO: maintain width of span even if nothing in it.

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

W3schools.



<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	text-align:center;
	padding: 5px;
}
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>
</head>

<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>

<!-- <a href="https://support.google.com/webmasters/answer/93710">GoogleSupport</a>. -->
<!-- 要阻止大部分搜索引擎网页抓取工具将您网站中的网页编入索引,请将以下元标记放入网页的 <head> 部分: -->
<meta name="robots" content="noindex">
<!-- 要仅阻止 Google 网页抓取工具将网页编入索引,请放入以下元标记: -->
<meta name="googlebot" content="noindex">
<!-- 重要提示!要使 noindex 元标记生效,相应网页就不得被 robots.txt 文件屏蔽。-->

SEO

robots.txt, sitemap.xml

Google webmasters. Add your site to google search console. Keep the googlenumber.html permanently.

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

developer.mozilla.org.

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

w3schools.com: input types.

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

checkbox

value property

w3schools.com.

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.

radio

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: -->
<input type="radio" name="imgsel" value="" checked>
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

SO: onchange event on input type range is not triggering in FF while dragging.

"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

w3schools.com.

The maxlength attribute specifies the maximum number of characters allowed.

label

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>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <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>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Red</label>

</fieldset>

File upload

w3school.


<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:

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.

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


<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

pacielloGroup.

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

diveInto.html5doctor.com.



//---------- 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

StackOverflow: html closing tags ignored.

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

HTML
HEAD
BODY
P
DT
DD
LI
OPTION
THEAD
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
LINK
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

StackOverflow.

TutorialsPoint.com.


<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 />

Good websites

Remove leading and trailing linebreaks with pre/code

StackOverflow: How can I ignore leading and trailing linebreaks within an pre/code.


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