Technology

HTML

概念与结构

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

例子

<!DOCTYPE html> <!-- 声明文档类型 -->
<html>          <!-- 根元素 -->
<head>          <!-- 页面源信息 -->
<title>Page Title</title>
</head>
<body>          <!-- 正文元素, 其内部元素将被显示 -->

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:

<p>This is a <br> paragraph with a line break.</p>

HTML Attributes

HTML attributes provide additional information about HTML elements.

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

<a href="https://www.w3schools.com">Visit W3Schools</a>

HTML Styles & CSS

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

<tagname style="property:value;">

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Inline - by using the style attribute inside HTML elements
```
<h1 style="color:blue;">A Blue Heading</h1>
```

Internal - by using a <style> element in the <head> section

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External - by using a <link> element to link to an external CSS file

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Block and Inline Elements

There are two display values: block and inline
A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as necessary
The <div> element is a block-level and is often used as a container for other HTML elements
The <span> element is an inline container used to mark up a part of a text, or a part of a document

HTML class Attribute

The HTML class attribute specifies one or more class names for an element
Classes are used by CSS and JavaScript to select and access specific elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with the getElementsByClassName() method

HTML id Attribute

The id attribute is used to specify a unique id for an HTML element
The value of the id attribute must be unique within the HTML document
The id attribute is used by CSS and JavaScript to style/select a specific element
The value of the id attribute is case sensitive
The id attribute is also used to create HTML bookmarks
JavaScript can access an element with a specific id with the getElementById() method

HTML Iframes

The HTML <iframe> tag specifies an inline frame
The src attribute defines the URL of the page to embed
Always include a title attribute (for screen readers)
The height and width attributes specifies the size of the iframe
Use border:none; to remove the border around the iframe

HTML File Paths

<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder

HTML Head Element

The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

The <head> element is a container for metadata (data about data)
The <head> element is placed between the <html> tag and the <body> tag
The <title> element is required and it defines the title of the document
The <style> element is used to define style information for a single document
The <link> tag is most often used to link to external style sheets
The <script> element is used to define client-side JavaScripts
The <base> element specifies the base URL and/or target for all relative URLs in a page
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
- Define the character set used:
  <meta charset="UTF-8">
- Define keywords for search engines:
  <meta name="keywords" content="HTML, CSS, JavaScript">
- Define a description of your web page:
  <meta name="description" content="Free Web tutorials">
- Define the author of a page:
  <meta name="author" content="John Doe">
- Refresh document every 30 seconds:
  <meta http-equiv="refresh" content="30">
- Setting the viewport to make your website look good on all devices:
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Layout Elements and Techniques

HTML has several semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
- CSS float property
- CSS flexbox
- CSS grid
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Learn more about flexbox in our CSS Flexbox chapter.
CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Learn more about CSS grids in our CSS Grid Intro chapter.

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!
A responsive web design will automatically adjust for different screen sizes and viewports.

HTML Style Guide

Use Lower Case File Names

Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".

Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".

If you use a mix of uppercase and lowercase, you have to be aware of this.

If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!

To avoid these problems, always use lowercase file names!

Default Filenames

When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".

If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".

However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.

HTML Entities

@@ Tags: 转义字符
@@ Refer: https://www.w3schools.com/html/html_entities.asp
@@ Refer: https://html.spec.whatwg.org/multipage/named-characters.html
@@ Refer: https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:

&entity_name;
OR
&#entity_number;

To display a less than sign (<) we must write: < or <

Advantage of using an entity name
An entity name is easy to remember.
Disadvantage of using an entity name
Browsers may not support all entity names, but the support for entity numbers is good.

NOTE:

entity_number中的数字实际上是Unicode的字符代码点, 所以也可以通过这种方式显示其他字符.
如 A 或 A 将被显示为: A A

Non-breaking Space(不间断空格)

  A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

§ 10
10 km/h
10 PM

HTML Uniform Resource Locators

Web browsers request pages from web servers by using a URL.

scheme://prefix.domain:port/path/filename

scheme - defines the type of Internet service (most common is http or https)
prefix - defines a domain prefix (default for http is www)
domain - defines the Internet domain name (like w3schools.com)
port - defines the port number at the host (default for http is 80)
path - defines a path at the server (If omitted: the root directory of the site)
filename - defines the name of a document or resource

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.

URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.

URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.

URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

Your browser will encode input, according to the character-set used in your page.

The default character-set in HTML5 is UTF-8.

HTML Versus XHTML

XHTML stands for EXtensible HyperText Markup Language
XHTML is a stricter, more XML-based version of HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers

The Most Important Differences from HTML

is **mandatory**
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
Elements must always be properly nested
Elements must always be closed
Elements must always be in lowercase
Attribute names must always be in lowercase
Attribute values must always be quoted
Attribute minimization is forbidden

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

HTML Form Attributes

accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is submitted
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form

HTML Form Elements

<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

HTML Input Types

Here are the different input types you can use in HTML:

<input type="button"> defines a button
<input type="checkbox"> defines a checkbox.
<input type="color"> 定义一个颜色输入字段.
<input type="date"> 定义日期输入字段.
<input type="datetime-local"> 定义本地时间日期输入字段.
<input type="email"> 定义邮件地址输入字段.
<input type="file"> defines a file-select field and a "Browse" button for file uploads.
<input type="hidden"> defines a hidden input field (not visible to a user).
- The hidden field is not shown to the user, but the data is sent when the form is submitted.
<input type="image"> defines an image as a submit button.
<input type="month"> allows the user to select a month and year.
<input type="number"> defines a numeric input field.
<input type="password"> defines a password field.
<input type="radio"> defines a radio button, radio buttons let a user select ONLY ONE of a limited number of choices
<input type="range"> defines a control for entering a number whose exact value is not important (like a slider control 滑动控制条). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes.
<input type="reset"> defines a reset button that will reset all form values to their default values.
<input type="search"> defines search fields (a search field behaves like a regular text field 常规文本字段).
<input type="tel"> 定义电话号码输入字段.
<input type="text"> defines a single-line text input field.
<input type="time"> 定义时间输入字段(没有时区).
<input type="url"> 定义URL address输入字段.
<input type="week"> 定义week和year的输入字段.
<input type="submit"> defines a button for submitting form data to a form-handler.
- The form-handler is typically a server page with a script for processing input data.
- The form-handler is specified in the form's action attribute:

Tip: The default value of the type attribute is "text".

HTML Input form* Attributes

The form Attribute

指定 <input> 元素属于哪个表单

An input field located outside of the HTML form (but still a part of the form):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

The formaction Attribute

The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.

The formenctype Attribute

The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").
Note: This attribute overrides the enctype attribute of the <form> element.

The formmethod Attribute

The input formmethod attribute defines the HTTP method for sending form-data to the action URL.
Note: This attribute overrides the method attribute of the <form> element.
The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").
Notes on the "get" method:
- This method appends the form-data to the URL in name/value pairs
- This method is useful for form submissions where a user want to bookmark the result
- There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
- Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
- This method sends the form-data as an HTTP post transaction
- Form submissions with the "post" method cannot be bookmarked
- The "post" method is more robust and secure than "get", and "post" does not have size limitations

The formtarget Attribute

The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
Note: This attribute overrides the target attribute of the <form> element.

略

The formnovalidate Attribute
The novalidate Attribute

HTML Canvas Graphics

TODO

记录

<p> 定义段落
<br> 插入换行
<pre> 预格式化文本, 以固定宽度字体显示文本, 并且不会忽略空格和换行.
<b> 粗体
<strong> 定义强重要性的文本, 其中的内容通常以粗体显示。
<i> 斜体
<em> Emphasized text 定义了强调的文本, 其中的内容通常以斜体显示。
<mark> 标记文本
<small> Smaller text
<del> Deleted text, 其中的内容通常以删除线显示。
<ins> Inserted text, 其中的内容通常以下滑线显示。
<sub> Subscript text, 下标文本
<sup> Superscript text, 上标文本
Color支持RGB, HEX, HSL, RGBA, HSLA
<link> Links allow users to click their way from page to page.
- target - attribute specifies where to open the linked document.
  - _self - Default. Opens the document in the same window/tab as it was clicked
  - _blank - Opens the document in a new window or tab
  - _parent - Opens the document in the parent frame
  - _top - Opens the document in the full body of the window
<table> - Defines a table
- <th> - Defines a header cell in a table
- <tr> - Defines a row in a table
- <td> - Defines a cell in a table
- <caption> - Defines a table caption
- <colgroup> - Specifies a group of one or more columns in a table for formatting
- <col> - Specifies column properties for each column within a <colgroup> element
- <thead>, <tbody>, <tfoot>
  Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
<ul> - Defines an unordered list
<ol> - Defines an ordered list
<li> - Defines a list item
<dl> - Defines a description list
<dt> - Defines a term in a description list
<dd> - Describes the term in a description list