Wondershare EdrawMind
MindMap Gallery HTML map
- 9
HTML map
Since creating advanced layouts is time-consuming, using templates is a quick option. There are many free website templates available through search engines (you can use these pre-built website layouts and optimize them).
Edited at 2022-10-27 11:24:53
- cáncer de pulmón
El cáncer de pulmón es un tumor maligno que se origina en la mucosa bronquial o las glándulas de los pulmones. Es uno de los tumores malignos con mayor morbilidad y mortalidad y mayor amenaza para la salud y la vida humana.
- diabetes
La diabetes es una enfermedad crónica con hiperglucemia como signo principal. Es causada principalmente por una disminución en la secreción de insulina causada por una disfunción de las células de los islotes pancreáticos, o porque el cuerpo es insensible a la acción de la insulina (es decir, resistencia a la insulina), o ambas cosas. la glucosa en la sangre es ineficaz para ser utilizada y almacenada.
- sistema digestivo
El sistema digestivo es uno de los nueve sistemas principales del cuerpo humano y es el principal responsable de la ingesta, digestión, absorción y excreción de los alimentos. Consta de dos partes principales: el tracto digestivo y las glándulas digestivas.
HTML map
- cáncer de pulmón
El cáncer de pulmón es un tumor maligno que se origina en la mucosa bronquial o las glándulas de los pulmones. Es uno de los tumores malignos con mayor morbilidad y mortalidad y mayor amenaza para la salud y la vida humana.
- diabetes
La diabetes es una enfermedad crónica con hiperglucemia como signo principal. Es causada principalmente por una disminución en la secreción de insulina causada por una disfunción de las células de los islotes pancreáticos, o porque el cuerpo es insensible a la acción de la insulina (es decir, resistencia a la insulina), o ambas cosas. la glucosa en la sangre es ineficaz para ser utilizada y almacenada.
- sistema digestivo
El sistema digestivo es uno de los nueve sistemas principales del cuerpo humano y es el principal responsable de la ingesta, digestión, absorción y excreción de los alimentos. Consta de dos partes principales: el tracto digestivo y las glándulas digestivas.
- Recommended to you
- Outline
HTML
Uniform Resource Locators
Here are some URL schemes:
http
access
hypertext transfer protocol
Used for...
Ordinary web pages starting with http://. No encryption.
https
access
Secure Hypertext Transfer Protocol
Used for...
Secure web page that encrypts all information exchanged.
ftp
access
file transfer protocol
Used for...
Used to download or upload files to a website.
file
Used for...
files on your computer.
URL - Uniform Resource Locator
A web browser requests a page from a web server via a URL.
When you click a link in an HTML page, the corresponding <a> tag points to an address on the World Wide Web.
A Uniform Resource Locator (URL) is used to locate documents on the World Wide Web.
An example of a web address:
Grammar rules:
scheme://host.domain:port/path/filename
illustrate:
scheme - Defines the type of Internet service. The most common type is http
host - defines the domain host (the default host for http is www)
domain - defines an Internet domain name, such as runoob.com
:port - defines the port number on the host (the default port number for http is 80)
path - defines the path on the server (if omitted, the document must be located in the root of the website).
filename - defines the name of the document/resource
character entity
character entity
Reserved characters in HTML must be replaced with character entities.
Some characters not found on the keyboard can also be replaced using character entities.
entity
frame
script
form
Forms and inputs
HTML forms are used to collect different types of user input
Online example
Create text field
This example demonstrates how to create a text field in an HTML page. The user can write text in the text field.
Create password field
This example demonstrates how to create an HTML password field.
form
Form - input element
Text Fields
password field
Radio Buttons
Checkboxes
Submit Button
More examples
Radio buttons
This example shows how to create radio buttons in HTML.
Checkboxes
This example shows how to create a checkbox in an HTML page. Users can check or uncheck checkboxes.
simple dropdown list
This example demonstrates how to create a simple drop-down list box in an HTML page. The drop-down list box is a selectable list.
Preselect drop-down list
This example shows how to create a simple drop-down list with preselected values.
Textarea
This example demonstrates how to create a text field (multiline text input control). The user can write text in the text field. There is no limit to the number of characters that can be written.
Create button
This example shows how to create a button. You can customize the text on the button.
form instance
Bordered form
This example shows how to draw a titled box around data.
Form with input box and confirm button
This example shows how to add a form to a page. This form contains two input boxes and a confirm button.
form with checkboxes
This form contains two checkboxes and a confirm button.
form with radio buttons
This form contains two radio buttons and a confirm button.
Send email from form
This example shows how to send an email from a form.
form tag
Label
<form>
Define a form for user input
Attributes
accept
HTML5 not supported
Specifies the type of file received by the server. (Documents are submitted via file upload)
MIME_type
One or more MIME types allowed to be submitted/uploaded. To specify multiple MIME types, separate them with commas.
See
, for a complete list of standard MIME types.
accept-charset
Specifies the form data character set that the server can handle.
character_set
action
Specifies where form data is sent when the form is submitted.
URL
autocomplete
Specifies whether to enable the form's autocomplete feature.
on
off
enctype
Specifies how to encode form data before sending it to the server. (Applies to method="post" case)
application/x-www-form-urlencoded
multipart/form-data
text/plain
method
Specifies the HTTP method used to send form data.
get
post
name
Specifies the name of the form.
text
novalidate
If this attribute is used, no validation is performed when the form is submitted.
novalidate
target
Specifies where the action URL should be opened.
_blank
_self
_parent
_top
<input>
Define input fields
<textarea>
Define a text field (a multi-line input control)
<label>
Defines the tag of the <input> element, usually the input title
<fieldset>
Defines a set of related form elements and encloses them using an outer frame
<legend>
Defines the title of the <fieldset> element
<select>
A drop-down option list is defined
<optgroup>
Define option groups
<option>
Define options in drop-down list
<button>
Define a click button
HTML5 new tab
<datalist>
Specify a predefined list of input control options
<keygen>
Defines the key pair generator field of the form
<output>
Define a calculation result
layout
Online example
Web page layout using <div> elements
Web page layout using <table> element
website layout
Layout - using <div> elements
The div element is a block-level element used to group HTML elements.
The following example uses five div elements to create a multi-column layout:
Layout - using tables
Using the HTML <table> tag is an easy way to create layouts.
Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful looks for pages.
Even though you can use HTML tables to create beautiful layouts, tables are designed to present tabulated data - tables are not a layout tool!
The following example uses a table with three rows and two columns - the first and last rows use the colspan attribute to span two columns:
Layout - helpful tips
The biggest benefit of using CSS is that the site will be easier to maintain if the CSS code is stored in an external style sheet. By editing a single file, you can change the layout of all pages.
Since creating advanced layouts is time-consuming, using templates is a quick option. There are many free website templates available through search engines (you can use these pre-built website layouts and optimize them).
layout tag
<div>
Define document blocks, block-level
Attributes
align
left
right
center
justify
<span>
Defines span, used to combine inline elements in the document.
block
<div> and <span>
HTML can combine elements through <div> and <span>.
block element
Most HTML elements are defined as
block-level elements
inline elements
Block-level elements usually start (and end) with a newline when displayed by the browser.
Example:
<h1>, <p>, <ul>, <table>
inline elements
Inline elements usually do not start on a new line when displayed.
Example:
<b>, <td>, <a>, <img>
<div> element
The HTML <div> element is a block-level element that can be used to compose a container for other HTML elements.
The <div> element has no specific meaning. In addition, since it is a block-level element, the browser will display line breaks before and after it.
If used with CSS, the <div> element can be used to set style attributes on large blocks of content.
Another common use of the <div> element is in document layout. It replaces the old-fashioned way of using tables to define layouts. Using the <table> element for document layout is not a correct use of tables. The <table> element is used to display tabular data.
<span> element
The HTML <span> element is an inline element that can be used as a container for text
The <span> element also has no specific meaning.
When used with CSS, the <span> element can be used to set style attributes for portions of text
Group labels
Label
<div>
Defines the area of the document, block-level
Attributes
HTML5 is not supported. HTML 4.01 is deprecated.
align
Specifies the alignment of content within a <div> element.
left
right
center
justify
Label definition and usage instructions
The <div> tag defines a delimited block or region in an HTML document.
The <div> tag is often used to group block-level elements so that they can be formatted using CSS.
Tips and Notes
hint:
The <div> element is often used with CSS to lay out web pages.
Note:
By default, browsers usually place a line break before and after a <div> element. However, you can change this by using CSS.
Differences between HTML 4.01 and HTML5
The align attribute is not supported in HTML5.
In HTML 4.01, the align attribute is deprecated.
<span>
Used to combine inline elements in the document, inline elements (inline)
Label definition and usage instructions
<span> is used to group inline elements in the document.
The <span> tag has no fixed format. It only changes visually when you apply a style to it. If you don't apply styles to <span>, the text within the <span> element will not be visually different from other text.
The <span> tag provides a way to isolate a portion of text or a document.
Tips and Notes
Tip: You can style the text enclosed by a <span> element using CSS or manipulate it using JavaScript.
element
element
Start tag * Element content End tag * <p> This is a paragraph </p> <a href="default.htm"> This is a link </a> <br> Line break
element syntax
HTML elements start with a start tag
HTML elements terminate with a closing tag
The content of the element is the content between the start tag and the end tag
Some HTML elements have empty content
Empty elements are closed in the opening tag (end with the end of the opening tag)
Most HTML elements can have attributes
Nested HTML elements
Most HTML elements can be nested (HTML elements can contain other HTML elements).
HTML documents are composed of HTML elements nested within each other.
HTML document example
HTML example analysis
<html> element
Defines the entire HTML document.
<body> element
Defines the body of the HTML document.
<p> element
Defines a paragraph in an HTML document
Don't forget the closing tag
HTML empty element
<br>and<br />
HTML Tip: Use lowercase tags
HTML tags are not case-sensitive: <P> is equivalent to <p>. Many websites use uppercase HTML tags.
The noob tutorial uses lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and will make it mandatory in future versions of (X)HTML.
Attributes
HTML attributes
HTML elements can set attributes
Attributes can add additional information to an element
Properties are generally described in the opening tag
Properties always appear as name/value pairs, for example: name="value".
Property instance
HTML links are defined by the <a> tag. The link's address is specified in the href attribute
<a href="http://www.runoob.com">This is a link</a>
Commonly used reference attribute values of HTML attributes
Property values should always be enclosed in quotes.
Double quotes are the most commonly used, but there is no problem using single quotes. In some individual cases, such as the attribute value itself contains double quotes, you must use single quotes. For example: name='John "ShotGun" Nelson'
HTML Tip: Use lowercase attributes
HTML Attributes Reference Manual
Property Description class defines one or more class names (classname) for html elements (class names are introduced from style files) id defines the unique id of the element style specifies the inline style of the element (inline style) title describes additional information about the element (used as a toolbar)
Heading
HTML title
Heading is defined through <h1> - <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
h title is only 1~6
Title is very important
HTML horizontal line
HTML comments
HTML Tips - How to View Source Code
HTML tag reference manual
Tag Description <html> defines HTML document <body> defines the body of the document <h1> - <h6> define HTML titles <hr> defines horizontal line <!--...--> Define comments
<head>
<head> defines the document information
<title> defines the title of the document
(In the header, this element is required)
Label definition and usage instructions
The <title> tag defines the title of the document and is required in all HTML documents.
Define the title in the browser toolbar
Provides the title of the page when it is added to favorites
The page title that appears in search engine results
Note:
There cannot be more than one <title> element in an HTML document.
hint:
If you omit the <title> tag, the document is invalid as HTML.
<base> defines the default link address of the page link tag
Defines the URL of all links
href
URL
Specifies the base URL for all relative links in the page.
target
Specifies where all hyperlinks and forms on the page will open. This attribute is overridden by the target attribute in each link.
_blank
Open the linked document in a new window.
_self
default. Open the linked document in the same frame.
_parent
Open the linked document in the parent frameset.
_top
Open the linked document in the entire window.
framename
Opens the linked document in the specified frame.
grammar
<base target="_blank|_self|_parent|_top|framename">
<link> defines the relationship between a document and external resources
Attributes
HTML5 does not support this attribute
charset
Defines the character encoding of the linked document.
rev
Defines the relationship between the linked document and the current document.
reversed relationship
Value Description
alternate An alternative version of a document (such as a printed page, translation, or mirror).
stylesheet The document's external stylesheet.
start The first document in the collection.
next The next document in the collection.
prev The previous document in the collection.
contents The table of contents of the document.
index The index of the document.
glossary A glossary (explanation) of terms used in a document.
copyright A document containing copyright information.
chapter Chapter of the document.
section section of the document.
subsection A subsection of the document.
appendix An appendix to a document.
help help documentation.
bookmark related documents.
target
Defines where to load the linked document.
_blank
_self
_top
_parent
frame_name
HTML5 new attributes.
sizes
Defines the link attribute size, which only works for the attribute rel="icon".
HeightxWidth
Specifies one or more dimensions for the linked icon.
Height and width are separated by an "x" or "X".
Examples:
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png"> (1 size)
<link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png"> (2 sizes)
any
Specifies that the icon is scalable (such as an SVG image).
Example:
<link rel="icon" href="icon.svg" sizes="any" type="image/svg xml"> (any size)
Definition and usage
The sizes attribute specifies the size of the visual media icon.
This attribute can only be used when the linked resource is an icon (rel="icon").
href
Defines the location of the linked document.
URL
Absolute URL - points to another website (e.g. href="http://www.example.com/theme.css")
Relative URL - points to a file within the website (e.g. href="/themes/theme.css")
hreflang
Defines the language of the text in the linked document.
language_code
media
Specifies the device on which the linked document will be displayed.
media_query
rel
Required. Defines the relationship between the current document and the linked document. rel is the English abbreviation of relationship.
alternate
Link to an alternative version of the document (such as a printed page, translation, or mirror).
archives
author
Link to the document's author.
bookmark
external
first
help
Link to help documentation.
icon
Import an icon representing the document.
last
license
Link to the document's copyright information.
next
Indicates that the document is part of a collection and that the next document in the collection is the referenced document.
nofollow
noreferrer
pingback
prefetch
Specifies that the target resource should be cached.
prev
Indicates that the document is part of a collection and the previous document in the collection is the referenced document.
search
Links to search tools for documents.
sidebar
stylesheet
The URL of the style sheet to import.
tag
up
type
Specifies the MIME type of the linked document.
MIME_type
The MIME type of the linked document.
See IANA MIME types for a complete list of standard MIME types.
<meta> defines metadata in HTML documents
Label definition and usage instructions
Metadata is the data information of data.
Tags provide metadata for an HTML document. The metadata will not be displayed on the client, but will be parsed by the browser.
The META element is usually used to specify the description, keywords, last modification time of the file, author and other metadata of the web page.
Metadata can be retrieved using a browser (how to display content or reload a page), a search engine (keywords), or other web services.
Tips and Notes
Notice:
The <meta> tag is usually located within the <head> area.
Metadata usually appears as name/value pairs.
If the name attribute is not provided, the name in the name/value pair takes the value of the http-equiv attribute.
Attributes
HTML5 new attributes.
charset
Defines the character encoding of the document.
character_set
To see all available character encodings, visit IANA Character Sets.
content
Defines meta-information related to the http-equiv or name attribute.
text
Definition and usage
The content attribute gives the value associated with the http-equiv or name attribute.
http-equiv
Associate the content attribute to the HTTP header.
content-type
Specifies the character encoding of the document.
Example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style
Specifies a predefined style sheet to use.
Example:
<meta http-equiv="default-style" content="the document's preferred stylesheet">
Note:
The value of the content attribute above must match the value of the title attribute on a link element in the same document, or it must match the value of the title attribute on a style element in the same document.
refresh
Define the time interval for document automatic refresh.
Example:
<meta http-equiv="refresh" content="300">
Note: The value "refresh" should be used with caution as it makes the page uncontrollable by the user. Using "refresh" will cause failure in W3C's Web Content Accessibility Guidelines.
name
Associate the content attribute to a name.
application-name
Specifies the name of the web application that the page represents.
author
Specifies the name of the document's author.
Example:
<meta name="author" content="Hege Refsnes">
description
Specifies the description of the page. Search engines will display this description in search results.
Example: <meta name="description" content="Free web tutorials">
generator
Specifies a software package to be used for generating documents (not for use with handwritten pages).
Example: <meta name="generator" content="FrontPage 4.0">
keywords
Specifies a comma separated list of keywords - related pages (tells search engines what the page is related to).
hint:
Always specify keywords (necessary for search engines to classify the page).
Example: <meta name="keywords" content="HTML, meta tag, tag reference">
viewport
Attributes
width sets the width of the layout viewport, which is a positive integer or the string "width-device"
initial-scale sets the initial scaling value of the page, which is a number that can contain decimals.
minimum-scale is the minimum scaling value allowed by the user, which is a number and can contain decimals.
maximum-scale is the maximum zoom value allowed by the user, which is a number and can contain decimals.
height sets the height of the layout viewport. This attribute is not important to us and is rarely used.
user-scalable Whether the user is allowed to zoom, the value is "no" or "yes", no means not allowed, yes means allowed
robots
HTML5 is not supported.
scheme
Defines the format used to translate content attribute values.
format/URI
Definition and usage
The scheme attribute specifies the scheme (format or URI) used to translate the value of the content attribute.
<script> defines the client script file
Used to load script files
Attributes
New attributes in HTML5
async
Specifies asynchronous execution of scripts (only applies to external scripts).
async
defer
Specifies that the script is executed when the page has finished parsing (only applies to external scripts).
defer
Definition and usage
The async attribute is a boolean attribute.
async attribute Once the script is available, it will be executed asynchronously.
Notice:
The async attribute only applies to external scripts (only when using the src attribute).
There are several ways to execute external scripts:
if async="async": the script is executed asynchronously relative to the rest of the page (the script will be executed while the page continues to parse)
If async is not used and defer="defer": the script will be executed when the page has finished parsing
If neither async nor defer is used: read and execute the script immediately before the browser continues to parse the page
HTML5 is not supported.
xml:space
Specifies whether whitespace in code should be preserved.
preserve
charset
Specifies the character encoding to be used in scripts (external scripts only).
charset
src
Specifies the URL of the external script.
URL
type
Specifies the MIME type of the script.
MIME-type
<noscript>
<style> defines the style file of the HTML document
Tips and Notes
hint:
To link to an external style sheet, use the tag.
To learn more about style sheets, take this CSS tutorial
Note:
If the "scoped" attribute is not used, each <style> tag must be located in the head area.
Label definition and usage instructions
The <style> tag defines style information for an HTML document.
In the <style> element, you can specify how the HTML document is rendered in the browser.
Each HTML document can contain multiple <style> tags.
Attributes
media
Specify different media types for style sheets.
media_query
Definition and usage
The media attribute specifies what media/device the current resource is optimized for. This property is mostly used in CSS style sheets that specify different styles for different media types.
hint:
This property can accept multiple values.
grammar
<style media="value">
possible operators
and
Specifies the AND operator.
not
Specifies the NOT operator.
,
Specifies the OR operator.
equipment
all
default. Adapts to all devices.
aural
Speech synthesizer.
braille
Braille feedback device for blind people.
handheld
Handheld devices (small screen, limited bandwidth).
projection
projector.
Print preview mode/print page.
screen
Computer screen (default).
tty
Teletypewriters and similar media that use a grid of equal-width characters.
tv
TV type device (low resolution, limited screen scrolling capabilities).
value
width
Specifies the width of the target display area.
The "min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
height
Specifies the height of the target display area.
The "min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
device-width
Specifies the width of the target monitor/paper.
The "min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"
device-height
Specifies the target monitor/paper height.
The "min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"
orientation
Specifies the orientation of the target monitor/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
aspect-ratio
Specifies the width/height ratio of the target display area
Example: media="screen and (aspect-ratio:16/9)"
The "min-" and "max-" prefixes can be used.
device-aspect-ratio
Specifies the device-width/device-height ratio of the target monitor/paper
Example: media="screen and (aspect-ratio:16/9)"
The "min-" and "max-" prefixes can be used.
color
Specifies the bits/color of the target display
Example: media="screen and (color:3)"
The "min-" and "max-" prefixes can be used.
color-index
Specifies the number of colors the target display can handle.
Example: media="screen and (min-color-index:256)"
The "min-" and "max-" prefixes can be used.
monochrome
Specifies bits/pixels in a monochrome framebuffer.
Example: media="screen and (monochrome:2)"
The "min-" and "max-" prefixes can be used.
resolution
Specifies the pixel density (dpi or dpcm) of the target monitor/paper.
Example: media="print and (resolution:300dpi)"
The "min-" and "max-" prefixes can be used.
scan
Specifies how tv monitors are scanned.
Possible values: "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
grid
Specifies whether the output device is a grid or bitmap.
Possible values: "1" for grid, "0" otherwise.
Example: media="handheld and (grid:1)"
scoped
If this attribute is used, the style is applied only to the parent element of the style element and its children.
scoped
type
Specifies the MIME type of the style sheet.
text/css
The MIME type of the style sheet. Currently, the only possible value is "text/css".
Definition and usage
The required type attribute specifies the MIME type of the style sheet.
The type attribute indicates the content between the <style> and </style> tags.
The value "text/css" indicates that the content is standard CSS.
paragraph
Paragraphs are defined through <p> tags.
Don't forget the closing tag
zigzag
The <br /> element is an empty HTML element. Since a closing tag doesn't make any sense, it doesn't have a closing tag.
Output - usage reminder
text formatting
formatting tags
Library
text formatting tag
<b> Define bold text
bold
<em> defines emphasis text
emphasize
<i> Define italics
italic
<small> defines small fonts
<strong> Define emphasis
<sub> defines subscripts
subscript
<sup> defines superscript words
supscript
<ins> defines insertion words
cite URL specifies the URL of a document that explains why the text was inserted.
Absolute URL - points to another website (such as cite="http://www.example.com")
Relative URL - points to a page within the website (such as cite="example.html")
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time when the text is inserted.
<del> defines the delete word
cite URL specifies the URL of a document explaining why the text was removed.
Absolute URL - points to another site (such as href="http://www.example.com/song.ogg")
Relative URL - points to a file within the website (e.g. href="song.ogg")
Anchor URL - points to an anchor within the page (e.g. href="#page")
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time when the text was deleted.
"Computer Output" Tag
Citation, citation, and label definitions
Link
Example
image link
How to use image links.
Link to the specified location on the current page
How to use bookmarks
Think outside the box
This example demonstrates how to break out of the frame if your page is fixed within the frame.
Create email link
This example demonstrates how to link to an email. (This example will only work after installing a mail client program.)
Create email link 2
This example demonstrates a more complex email link.
HTML hyperlink (link)
link syntax
<a href="url">Link text</a>
Example
link - target attribute
Using the target attribute, you can define where the linked document should be displayed.
link - id attribute
Style - CSS
HTML usage styles
This example demonstrates how to use style attributes to make a link without an underline.
How to make a link without underline using style attribute.
Link to an external style sheet
This example demonstrates how to link a tag to an external style sheet.
image
Example
insert image
This example demonstrates how to display an image in a web page.
Insert pictures from different locations
This example demonstrates how to display images from other folders or servers into a web page.
Arrange pictures
This example demonstrates how to arrange images within text.
The align attribute is obsolete in HTML 4 and is no longer supported in HTML5. You can use CSS instead.
floating image
This example demonstrates how to make a picture float to the left or right of a paragraph.
Here we use the CSS float attribute. The float attribute is obsolete in HTML 4. HTML5 no longer supports this attribute. You can use CSS instead.
Set image link
This example demonstrates how to use an image as a link.
Create image map
This example shows how to create an image map with clickable areas. Each of these fields is a hyperlink.
Image - Image tag (<img>) and source attribute (Src)
The syntax for defining an image is:
<img src="url" alt="some_text">
Image - Alt attribute
Image - Set the height and width of the image
Basic Dos and Don’ts – Helpful Tips
HTML image tag
<img> tag
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Example
Insert pictures from different locations
This example demonstrates how to display images from other folders or servers into a web page.
Make image link
This example demonstrates how to use an image as a link.
Create an image map
This example shows how to create an image map with clickable areas. Each of these fields is a hyperlink.
More
onabort
Event handler called when the user aborts loading of the image.
onerror
Event handler called when an error occurs while loading the image.
onload
Event handler called when the image has finished loading.
New attributes in HTML5
Attributes
align
left aligns the image to the left.
right aligns the image to the right.
middle aligns the image to the center.
top aligns the image to the top.
bottom Aligns the image to the bottom.
Specifies how images are arranged relative to surrounding text.
HTML5 is not supported. HTML 4.01 is deprecated.
grammar
<img align="left|right|middle|top|bottom">
loading
eager: load immediately
By default, images load immediately.
lazy: lazy loading
The image is loaded lazily and will only be displayed when the mouse is scrolled to the location of the image.
Specifies whether the browser should load images immediately or lazily.
grammar
<img src="URL" loading="eager|lazy">
alt
text
Specifies the alternative text for the image.
Principles for using alt text:
If the image contains information, use alt to describe the image
If the image is within an <a> element, use alt to describe the target link
If the image is for decoration only, use alt=""
grammar
<img alt="text">
border
pixels
Specifies the border around the image.
HTML5 is not supported. HTML 4.01 is deprecated.
The width of the border, in pixels.
crossorigin
new
anonymous
use-credentials
Set cross-domain attributes of images
height
pixels
Specifies the height of the image.
The height in pixels (e.g. height="100").
grammar
<img height="pixels">
hspace
pixels
Specifies the margins on the left and right sides of the image.
HTML5 is not supported. HTML 4.01 is deprecated.
Measured in pixels.
grammar
<img hspace="pixels">
ismap
ismap
Specifies the image as a server-side image map.
grammar
<img ismap>
longdesc
URL
URL pointing to a document containing a long image description.
HTML5 is not supported. HTML 4.01 is deprecated.
Possible values:
Absolute URL - points to another website (such as longdesc="http://www.example.com/description.txt")
Relative URL - points to a file within the website (e.g. longdesc="description.txt")
grammar
<img longdesc="URL">
src
URL
Specifies the URL to display the image.
Possible values:
Absolute URL - points to another website (such as src="http://www.example.com/image.gif")
Relative URL - points to a file within the website (e.g. src="image.gif")
grammar
<img src="URL">
usemap
#mapname
Define the image as a client-side image map.
A hash character ("#") plus the name or id of the <map> element to use.
<map> tag
name mapname required. The specified name for image-map.
name
grammar
<map name="mapname">
mapname The name of the image map.
grammar
<img usemap="#mapname">
vspace
pixels
Specifies the margin at the top and bottom of the image.
HTML5 is not supported. HTML 4.01 is deprecated.
grammar
<img vspace="pixels">
width
pixels
Specifies the width of the image.
grammar
<img width="pixels">
<area> tag
alt
coords
grammar
<area coords="value">
attribute value
x1,y1,x2,y2
If the shape property is set to "rect", this value specifies the coordinates of the upper left and lower right corners of the rectangle.
x,y,radius
If the shape property is set to "circ", this value specifies the coordinates and radius of the circle's center.
x1,y1,x2,y2,..,xn,yn
If the shape property is set to "poly", this value specifies the value of each vertex of the polygon. If the first and last coordinates do not match, then in order to close the polygon, the browser must add the last pair of coordinates.
href
grammar
<area href="URL">
attribute value
URL
The URL of the link. possible values
Absolute URL - points to another site (such as href="http://www.example.com/sun.htm")
Relative URL - points to a file within the site (href="sun.htm")
Anchor URL - points to an anchor in the page (href="#sun")
hreflang
New
language_code
Specifies the language of the target URL.
A two-character language code that specifies the language of the linked document.
To view all available language codes, visit our Language Code Sets Reference Manual.
Language code set reference manual.
grammar
<area hreflang="language_code">
media
New
media query
Specifies the media/device the target URL is optimized for. Default: all.
possible operators
and specifies the AND operator
not specifies the NOT operator
, specify the OR operator
equipment
all default. Adapts to all devices.
aural speech synthesizer
braille braille feedback device
handheld (small screen, limited bandwidth)
projection projector
print print preview mode/number of printed pages
screen computer screen
tty teletypewriters and similar media that use a fixed-spaced character grid
tv television type device (low resolution, limited scrolling capabilities)
value
width
The width of the specified display area.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (min-width:500px)"
height
The height of the specified display area.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (max-height:700px)"
device-width
Specify the width of the target display/printing paper
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (device-width:500px)"
device-height
Specify the height of the target display/printing paper
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (device-height:500px)"
direction
Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
aspect-ratio
The width/height ratio of the display area of the specified target.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio
The device width/device height ratio of the specified target's display area.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (aspect-ratio:16/9)"
color
Specifies the number of bits of color per pixel the target displays.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (color:3)"
color-index
Specifies the number of colors the target monitor can handle.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (min-color-index:256)"
monochrome
Specifies the number of pixels in a monochrome framebuffer.
Usually the "min-" and "max-" prefixes are used.
Example: media="screen and (monochrome:2)"
resolution
Specify the pixel density of the target display/paper (DPI or DPCM).
Usually the "min-" and "max-" prefixes are used.
Example: media="print and (resolution:300dpi)"
scan
Specifies a scanning method for TV displays.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
grid
Specifies that the output device is a grid or a bitmap
The value of grid is "1", others are "0"
Example: media="handheld and (grid:1)"
nohref
value
HTML5 is not supported. Specifies areas with no relevant links
rel
New
attribute value
alternate
An alternative version of the document (such as a printed page, translation, or mirror).
author
Link to the document's author.
bookmark
Permanent URL for bookmarks
help
Link to help documentation
license
Link to the document's copyright information.
next
Next document in options
nofollow
nofollow is an attribute value of an HTML tag. The meaning of this tag is to tell search engines "Do not follow the link on this page" or "Do not follow this specific link."
noreferrer
Do not send the HTTP referer header if the user clicks on the link to specify the browser.
prefetch
The specified target file should be cached
prev
previous document in options
search
Documentation links to search tools
tag
Tags (keywords) of the current document
Specifies the relationship between the current document and the target URL.
grammar
<area rel="value">
shape
default
Define all areas.
rect
Define a rectangular area.
circle
Define a circle.
poly
Define polygonal area.
Specifies the shape of the region.
The shape attribute works with the coords attribute to specify the size, shape, and location of the area.
grammar
<area shape="default|rect|circle|poly">
target
_blank
Open the linked document in a new window.
_parent
Open the linked document in the parent frameset.
_self
default. Open the linked document in the same frame.
_top
Open the linked document in the entire window.
framename
Opens the linked document in the specified frame.
Specifies where the target URL should be opened.
grammar
<area target="_blank|_self|_parent|_top|framename">
type
New
MIME_type
Specifies the MIME type of the target URL.
Note: MIME = Multipurpose Internet Mail Extensions.
grammar
<area type="MIME_type">
<map> tag
name mapname required. The specified name for image-map.
name
grammar
<map name="mapname">
mapname The name of the image map.
Simple inclusion
sheet
Table and border properties
If you do not define the border attribute, the table will not display borders. Sometimes this is useful, but most of the time, we want the border to show.
Table header
The header of the table is defined using the <th> tag.
Most browsers will display the table header as bold, centered text:
More examples
table without borders
This example demonstrates a table without borders
<table border="1">
Heading in the table
This example demonstrates how to display a table header.
Table with title
This example demonstrates a table with a caption
Table cells spanning rows or columns
This example demonstrates how to define table cells that span rows or columns.
Labels within the table
This example demonstrates how to display elements within different elements.
Cell padding
This example demonstrates how to use cell padding to create space between a cell's content and its border.
Cell spacing
This example demonstrates how to use Cell spacing to increase the distance between cells.
beautiful table
table label
<table>
Define table
Attributes
HTML5 is not supported. HTML 4.01 Deprecated
align
Specifies the alignment of the table relative to surrounding elements.
left
Align table left.
right
Align the table right.
center
Center align the table.
bgcolor
Specifies the background color of the table.
rgb(x,x,x)
Specifies the color value as the background color in rgb code (e.g. "rgb(255,0,0)").
#xxxxxx
Specifies the background color as a hexadecimal value (such as "#ff0000").
colorname
Specifies that the color value is the background color of the color name (such as "red").
background-color
HTML5 is not supported.
cellpadding
Specifies the space between the cell edge and its content.
pixels
cellspacing
Specifies the space between cells.
pixels
frame
Specifies which part of the outer border is visible.
attribute value
void
Do not show outer borders.
above
Shows the upper outer border.
below
Shows the lower outer border.
lhs
left hand side
Shows the left outer border.
rhs
rinht hand side
Shows the right outer border.
hsides
Shows the outer borders of the upper and lower parts.
vsides
Shows the left and right outer borders.
box
Show outside borders on all four sides.
border
Show outside borders on all four sides.
rules
Specifies which part of the inner border is visible.
attribute value
none
There are no lines.
groups
The line between row and column groups.
rows
The lines between rows.
cols
columns
The line between columns.
all
lines between rows and columns
summary
A summary of the prescribed form.
text
width
Specifies the width of the table.
pixels
Set the width in pixels (example: width="50").
%
Sets the width as a percentage of the containing element (example: width="50%").
border
Specifies whether table cells have borders.
1
Add borders around table cells (tables are not used for layout purposes).
""
0
There are no borders around table cells (tables can be used for layout purposes).
Example
title in table
This example demonstrates how to display table titles.
empty cell
This example demonstrates how to use " " to handle cells with no content.
Table with title
This example demonstrates a table with a caption.
Labels within the table
This example demonstrates how to display elements within other elements.
Table cells spanning rows or columns
This example demonstrates how to define table cells that span rows or columns.
Cell spans two columns
<th colspan="2">Telephone</th>
Cells span two rows
<th rowspan="2">Telephone:</th>
<th>
Define the header of the table
Attributes
HTML5 is not supported.
abbr
Specifies an abbreviated version of the contents in the header cell.
text
align
Specifies the horizontal alignment of header cell contents.
left
Align content left.
right
Right align content.
center
Center-aligns content (default for <th>).
justify
Stretch the rows so that each row is equal width (like in newspapers and magazines).
char
Align content to specified characters.
axis
Classify header cells.
category_name
char
Specifies which character should be used to align content.
character
charoff
Specifies the offset of the alignment character.
number
Specifies alignment.
Positive numbers align the character to the right.
Negative numbers specify alignment to the left of the character.
valign
Specifies the vertical arrangement of header cell contents.
top
Align content top.
middle
Center-aligns content (default).
bottom
Align content down.
baseline
Align with baseline. The baseline is an imaginary line. In a line of text, most letters are centered on the baseline. All table data in a baseline value setting row share the same baseline. This value often has the same effect as the bottom value. However, if the text has different font sizes, baseline will work better.
HTML5 is not supported. HTML 4.01 is deprecated.
bgcolor
Specifies the background color of the header cell.
rgb(x,x,x)
Specifies the color value as the background color in rgb code (e.g. "rgb(255,0,0)").
#xxxxxx
Specifies the background color as a hexadecimal value (such as "#ff0000").
colorname
Specifies that the color value is the background color of the color name (such as "red").
height
Specifies the height of the header cell.
pixels
Set the height value in pixels (e.g. height="50").
%
Sets the height value as a percentage of the containing element (e.g. height="50%").
nowrap
Specifies whether the content in the header cell should be wrapped.
width
Specifies the width of the header cell.
pixels
Set the width value in pixels (such as width="50").
%
Sets the width value as a percentage of the containing element (e.g. width="50%").
headers
Specifies one or more header cells that are associated with the header cell.
header_id
colspan
Specifies the number of columns that a header cell can span.
number
Note: colspan="0" tells the browser to span the cell to the last column of the colgroup.
rowspan
Specifies the number of rows that the header cell can span.
number
Note: rowspan="0" tells the browser to make the cell span to the last row (thead, tbody, or tfoot) in the table component.
scope
Specifies whether the header cell is the head of a row, column, row group, or column group.
col
Specifies that the cell is the header of the column.
row
Specifies that the cell is the header of the row.
colgroup
Specifies that the cell is the header of the column group.
rowgroup
Specifies that the cell is the header of the row group.
<tr>
Define table rows
Attributes
align
Defines the content alignment of table rows.
right
Right align content.
left
Left-justify content (default for <td> elements).
center
Center-aligns content (default for <th> elements).
justify
Stretch the rows so that each row is equal width (like in newspapers and magazines).
char
Align content to specified characters.
bgcolor
Specifies the background color of table rows.
rgb(x,x,x)
Specifies the color value as the background color in rgb code (e.g. "rgb(255,0,0)").
#xxxxxx
Specifies the background color as a hexadecimal value (such as "#ff0000").
colorname
Specifies that the color value is the background color of the color name (such as "red").
char
Specifies the character to which content is aligned.
character
charoff
Specifies the offset of the first alignment character.
number
Specifies alignment.
Positive numbers align the character to the right.
Negative numbers specify alignment to the left of the character.
valign
top
Align content top.
middle
Center-aligns content (default).
bottom
Align content down.
baseline
Align with baseline. The baseline is an imaginary line. In a line of text, most letters are centered on the baseline. All table data in a baseline value setting row share the same baseline. This value often has the same effect as the bottom value. However, if the text has different font sizes, baseline will work better.
Example
title in table
This example demonstrates how to display table titles.
empty cell
This example demonstrates how to use " " to handle cells with no content.
Table with title
This example demonstrates a table with a caption.
Labels within the table
This example demonstrates how to display elements within other elements.
Table cells spanning rows or columns
This example demonstrates how to define table cells that span rows or columns.
<td>
Define table cells
Attributes
HTML5 not supported
abbr
Specifies an abbreviated version of the contents of the cell.
text
align
Specifies the horizontal alignment of cell contents.
left
right
center
justify
char
axis
category_name
char
Specifies which character should be used to align content.
character
charoff
Specifies the offset of the alignment character.
number
scope
Defines a method to associate header cells with data cells.
col
Specifies that the cell is the header of the column.
colgroup
Specifies that the cell is the header of the column group
row
Specifies that the cell is the header of the row.
rowgroup
Specifies that the cell is the header of the row group.
valign
Specifies the vertical arrangement of cell contents.
top
middle
bottom
baseline
HTML5 is not supported. HTML 4.01 is deprecated.
bgcolor
Specifies the background color of the cell.
rgb(x,x,x)
#xxxxxx
colorname
height
Set the height of the cell.
pixels
%
nowrap
Specifies whether the content in the cell should be wrapped.
nowrap
width
Specifies the width of the cell.
pixels
%
colspan
Specifies the number of columns a cell can span.
number
headers
Specifies one or more header cells associated with the cell.
header_id
rowspan
Sets the number of rows a cell can span.
number
Example
title in table
empty cell
Table with title
Labels within the table
Table cells spanning rows or columns
<caption>
Define table title
Attributes
HTML5 is not supported. HTML 4.01 Deprecated
align
Define the alignment of the title.
left
right
top
bottom
<colgroup>
Define groups of table columns
Attributes
HTML5 not supported
align
Specifies the horizontal alignment of content within a column group.
left
right
center
justify
Stretch the rows so that each row is equal width (like in newspapers and magazines).
char
char
Specifies the character by which the contents of the column group are aligned.
character
charoff
Specifies the offset of the first alignment character.
number
valign
Defines the vertical alignment of content within a column group.
top
middle
bottom
baseline
width
Specifies the width of the column combination.
pixels
Set the width value in pixels (example: width="50")
%
Sets the width value as a percentage of the surrounding element (example: width="50%").
relative_length
span
Specifies the number of columns the column group should span.
number
<col>
Define properties for table columns
Attributes
HTML5 not supported
align
Specifies the horizontal alignment of content associated with the <col> element.
left
right
center
justify
char
char
Specifies the character by which content associated with the <col> element is aligned.
character
charoff
Specifies the offset of the first alignment character.
number
span
Specifies the number of columns the <col> element should span.
number
valign
Specifies the vertical alignment of content associated with the <col> element.
top
middle
bottom
baseline
width
Specifies the width of a <col> element
%
pixels
relative_length
<thead>
Define table header
Attributes
HTML5 not supported
align
right
left
center
justify
char
char
character
charoff
number
valign
top
middle
bottom
baseline
<tbody>
Define the body of the table
Attributes
HTML5 not supported
align
right
left
center
justify
char
char
character
charoff
number
valign
top
middle
bottom
baseline
<tfoot>
Define the footer of the table
Attributes
HTML5 not supported
align
right
left
center
justify
char
char
character
charoff
number
valign
top
middle
bottom
baseline
list
More examples
custom list
ordered list
unordered list
Different types of ordered lists
This example demonstrates different types of ordered lists.
Different types of unordered lists
This example demonstrates different types of unordered lists.
Nested lists
This example demonstrates how to nest lists.
Nested list 2
This example demonstrates a more complex nested list.
custom list
This example demonstrates a definition list.
Things to note - helpful tips
Tip: Paragraphs, line breaks, pictures, links, other lists, etc. can be used inside list items.
list tag
<ol>
ordered lists
Define ordered list
Attributes
Not supported in HTML5, deprecated
compact
Please replace it with a style. Specifies that the list should be rendered smaller than normal.
compact
HTML5 new attributes.
reversed
Specify the list in reverse order (9,8,7...)
reversed
This attribute was deprecated in HTML4, but reintroduced in HTML5.
start
An integer-valued attribute that specifies the starting value for list numbering.
number
Specifies the type of list. Deprecated. Please use styles instead.
type
a represents a lowercase English letter number
A represents uppercase English letter number
i stands for lowercase Roman numeral number
I stands for capital Roman numeral number
1 represents a numeric number (default)
<ul>
unordered lists
Define unordered list
Attributes
HTML5 is not supported. HTML 4.01 is deprecated.
type
Specifies the type of bullets for the list.
disc
default value. Solid circle.
square
Solid square.
circle
Hollow circle.
compact
Specifies that the list should be rendered smaller than normal.
compact
Example
List tag
Demonstrates different list tags.
Nested lists
This example demonstrates how to nest lists.
Nested list 2
This example demonstrates a more complex nested list.
<dl>
definition lists
definition list
<li>
list item
Define list items
Attributes
HTML5 does not support this attribute. This attribute has been deprecated in HTML 4.01. Deprecated. Please replace it with a style.
type
Ordered list (<ol>)
1
A
a
I
i
Unordered list (<ul>)
disc
square
circle
Deprecated. Please replace it with a style.
value
Specifies the value of a list item.
number
<dt>
definition term
Custom list items
<dd>
definition description
Define a description for a custom list item
color
color name
color value
Cheat list
Label abbreviation and full name
Summarize
XHTML
How to convert HTML to XHTML
1. Add an XHTML <!DOCTYPE> to your web page
2. Add the xmlns attribute to the html element of each page.
3. Change all elements to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Add quotes to all attribute values
Use the W3C validator to test your XHTML
XHTML
XHTML is HTML written in XML format.
What is XHTML?
XHTML stands for Extensible Hypertext Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and purer version of HTML
XHTML is HTML defined as an XML application
XHTML is a W3C recommendation released in January 2001
XHTML is supported by all major browsers
Why use XHTML?
The most important differences compared to HTML:
Document structure
XHTML DOCTYPE is mandatory
XML namespace attribute in <html> is mandatory
<html>, <head>, <title> and <body> are also mandatory
element syntax
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be lowercase
XHTML documents must have a root element
Property syntax
lower case
XHTML attributes must be used
surrounded by quotation marks
XHTML attribute values must be
forbidden
XHTML attribute minimization is also
<!DOCTYPE ....> is mandatory
event properties
Global event properties
Event properties.
Window Event Attributes
This event is triggered by the window (applies to <body> tag):
Attributes
HTML5 new attribute event
onafterprint
Run script after printing document
onbeforeprint
Run script before document prints
onbeforeonload
Run script before document loads
onerror
Run script when error occurs
onhashchange
Run script when document changes
onmessage
Run script when message is triggered
onoffline
Run script when document is offline
ononline
Run the script when the document comes online
onpagehide
Run script when window is hidden
onpageshow
Run script when window is visible
onpopstate
Run script when window history changes
onredo
Run script when document performs redo
onresize
Run script when window is resized
onstorage
Run the script when the Web Storage area is updated (when the data in the storage space changes)
onundo
Run script when document performs undo
onunload
Run script when user leaves document
onblur
Run script when window loses focus
onfocus
Run script when window gets focus
onload
Run script when document loads
Form Events
Form events are triggered in HTML forms (applicable to all HTML elements, but the HTML element needs to be within the form form):
Attributes
HTML5 adds new attribute events.
oncontextmenu
Run script when context menu is triggered
onformchange
Run script when form changes
onforminput
Run script when form gets user input
oninput
Run script when element gets user input
oninvalid
Run script when element is invalid
HTML 5 not supported
onreset
Run the script when the form resets.
onblur
Run script when element loses focus
onchange
Run script when element changes
onfocus
Run script when element gets focus
onselect
Run script when element is selected
onsubmit
Run script when form is submitted
Keyboard Events
onkeydown
Run script when key is pressed
onkeypress
Run script when key is pressed and released
onkeyup
Run script when key is released
Mouse Events
HTML5 adds new attribute events.
ondrag
Run script when dragging element
ondragend
Run script when drag operation ends
ondragenter
Run script when an element is dragged to a valid drop target
ondragleave
Run script when an element leaves a valid drag-and-drop target
ondragover
Run script when an element is dragged over a valid drop target
ondragstart
Run script when drag operation starts
ondrop
Run script when the dragged element is being dragged and dropped
onmousewheel
Run script when mouse wheel is turned
onscroll
Run script when an element's scrollbar is scrolled
onclick
Run script when mouse clicked
ondblclick
Run script when mouse is double clicked
onmousedown
Run script when mouse button is pressed
onmousemove
Run script when mouse pointer moves
onmouseout
Run script when mouse pointer moves out of element
onmouseover
Run script when mouse pointer moves over element
onmouseup
Run script when mouse button is released
Media Events
This event is triggered by videos, images or audio, and is mostly used in HTML media elements such as <audio>, <embed>, <img>, <object>, and <video>:
Attributes
HTML5 new attribute event
oncanplay
Run script when media is able to start playing but may need to be stopped due to buffering
oncanplaythrough
Run script when the media is able to play to the end without stopping due to buffering
ondurationchange
Run script when media length changes
onemptied
Run script when media asset element is suddenly empty (network error, loading error, etc.)
onended
Run script when media has reached end
onerror
Run script when an error occurs during element loading
onloadeddata
Run script when media data is loaded
onloadedmetadata
Run script when the media element's duration and other media data have been loaded
onloadstart
Run script when browser starts loading media data
onpause
Run script when media data is paused
onplay
Run script when media data is about to start playing
onplaying
Run script when media data has started playing
onprogress
Run script while browser is fetching media data
onratechange
Run script when playback rate of media data changes
onreadystatechange
Run script when ready-state changes
onseeked
Run script when the media element's positioning attribute [1] is no longer true and positioning has ended
onseeking
Run script when the media element's positioning attribute is true and positioning has begun
onstalled
Run script when there is an error (delay) in retrieving media data
onsuspend
Run script when the browser is already retrieving media data but stops before retrieving the entire media file
ontimeupdate
Run script when media changes its playback position
onvolumechange
Run script when media changes volume or when volume is set to mute
onwaiting
Run script when media has stopped playing but is intended to continue playing
onabort
Run script when abort event occurs
Other events
Attributes
onshow
Fires when a <menu> element is displayed in context
ontoggle
Fires when the user opens or closes the <details> element
Note: If the name attribute is not provided, the name in the name/value pair takes the value of the http-equiv attribute.
Note: Metadata usually appears as name/value pairs.
NOTE: Labels are usually located
https://www.runoob.com/tags/att-iframe-align.html
Reference book
ASCII
ASCII character set
ASCII device control characters
ASCII control characters (00-31, plus 127) were originally designed to control hardware devices such as printers and tape drives.
Control characters (except horizontal tabs, line feeds, and carriage returns) have no effect in HTML documents.
ISO country code
ISO 639-1 country code
ISO language code
ISO 639-1 language code
ISO 639-1 defines abbreviations for various languages. You can use them in the lang and xml:lang attributes in HTML and XHTML.
color
Color Picker/Color Picker
Hue
Hue
HSL Saturation
HSL light/dark
HSV Saturation
HSV light/dark
RGB (Red, Green, Blue)
Value
Hex
hexadecimal
Hsl
Hue, Saturation, Lightness
Hue, saturation, brightness
Introduction
Hue (H) is the basic attribute of color, which is what is commonly known as color name, such as red, yellow, etc.
Saturation (S) refers to the purity of a color. The higher it is, the purer the color is, and the lower it is, the color gradually turns gray. It takes a value of 0-100%.
Value (V), brightness (L), take 0-100%.
Color defined by triplet
(h,s,l)
hsv
Hue, Saturation, Value
Hue, saturation, lightness
Color defined by triplet
(h,s,v)
Also known as HSB, where B stands for English: Brightness.
Color mix
color name
Emoji
Reference book
smiley face
color
URL encoding
URL encoding converts characters into a format that can be transmitted over the Internet.
Uniform Resource Locator
A web browser requests a page from a web server via a URL.
URL is the address of the web page, for example: https://www.runoob.com
URL encoding
URLs can only be used to send over the Internet.
Because URLs often contain characters outside the ASCII set, the URL must be converted to valid ASCII format.
URL encoding uses "%" followed by two hexadecimal digits to replace non-ASCII characters.
URL cannot contain spaces. URL encoding usually uses to replace spaces.
try it
URL encoding function
JavaScript, PHP, and ASP all provide functions for URL encoding strings.
The encodeURI() function is used in JavaScript, the rawurlencode() function is used in PHP, and the Server.URLEncode() function is used in ASP.
px,pt,em conversion table
Introduction to the differences between px, em, and rem
HTTP method
What is HTTP?
Hypertext Transfer Protocol (HTTP) is designed to facilitate communication between clients and servers.
HTTP works as a request-reply protocol between a client and a server.
A web browser might be the client, and a web application on your computer might be the server.
Example: The client (browser) submits an HTTP request to the server; the server returns a response to the client. The response contains status information about the request and the content that may have been requested.
Two HTTP request methods: GET and POST
The two most commonly used methods for request-response between clients and servers are: GET and POST.
GET
Request data from the specified resource.
GET method
Note that the query string (name/value pair) is sent in the URL of the GET request:
/test/demo_form.php?name1=value1&name2=value2
Some additional notes about GET requests:
GET requests can be cached
GET requests remain in browser history
GET requests can be bookmarked
GET requests should not be used when handling sensitive data
GET requests have length limits
GET requests should only be used to retrieve data
POST
Submits data to the specified resource to be processed.
POST method
Note that the query string (name/value pair) is sent in the HTTP message body of the POST request:
Some additional notes about POST requests:
POST requests are not cached
POST requests are not retained in browser history
POST cannot be bookmarked
POST requests have no requirements on data length
Compare GET vs. POST
Other HTTP request methods
HEAD
Same as GET, but only HTTP headers are returned, not the document body.
PUT
Upload the specified URI representation.
DELETE
Delete the specified resource.
OPTIONS
Returns the HTTP methods supported by the server.
CONNECT
Converts the requested connection to a transparent TCP/IP channel.
The get and post methods in Form correspond to the GET and POST methods in the HTTP protocol respectively during the data transmission process. The main differences between the two are as follows:
IANA MIME type.
To see all available character encodings, visit IANA Character Sets.
Boolean properties