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

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

label

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>

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"

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:

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>

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>