HTML5

Posted on | In

HTML Attributes

Attribute Description
alt Specifies an alternative text for an image, when the image cannot be displayed 图片无法显示时候提示是怎么样的图片
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image 也就是图片的source
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip) 鼠标停留时显示的字样
width, height 图片的宽和高

HTML Horizontal Rules 标签水平

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

1
2
3
4
5
6
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

This is heading 1

This is some text.

This is heading 2

This is some other text.

This is heading 2

This is some other text.

Bigger Headings 更大的标题

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

也就是说h1, h2, h3这些的字体大小都是可以调整的

1
<h1 style="font-size:60px;">Heading 1</h1>

The HTML <pre> Element 标签实例预格式化的文本

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

会保留文本原格式

Tag Description
p Defines a paragraph
br Inserts a single line break
pre Defines pre-formatted text

Style Chapter Summary

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

HTML Formatting

  • <b> - Bold text

  • <strong> - Important text

  • <i> - Italic text

  • <em> - Emphasized text

  • <mark> - Marked text

  • <small> - Small text

  • <del> - Deleted text

  • <ins> - Inserted text

  • <sub> - Subscript text

  • <sup> - Superscript text

mark <mark>

​ 1

del <del>

​ 2

insert <ins>

3

small <small>

​ 4

​ subscripted <sub>

5

​ superscripted <sup>

6

HTML Quotation and Citation Elements

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements. （块状引用）

The HTML <abbr> element defines an abbreviation or an acronym.（缩写简称 如：WHO是World Health Organization）

The HTML <address> element defines contact information (author/owner) of a document or an article.

The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Tag Description
abbr Defines an abbreviation or acronym
address Defines contact information for the author/owner of a document
bdo Defines the text direction
blockquote Defines a section that is quoted from another source
cite Defines the title of a work
q Defines a short inline quotation

The HTML <meta> Element

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.

Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.

Define the character set used:

The HTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in a page:

CSS Floats

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 Flexbox

Flexbox is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages:Does not work in IE10 and earlier.

Learn more about flexbox in our CSS Flexbox chapter.

Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

The <select> Element

The <select> element defines a drop-down list:

1
2
3
4
5
6
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

1
2
3
4
5
6
<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

HTML5 <datalist>Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

1
2
3
4
5
6
7
8
9
10
<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>




HTML5 <output>Element

The <output> element represents the result of a calculation (like one performed by a script).

1
2
3
4
5
6
7
8
9
10
11
<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

0

100 +

=





Input Type Password

<input type="password"> defines a password field:

1
2
3
4
5
6
<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

User name:



User password:


Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.


I have a bike

I have a car

Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.


Select your favorite color:

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.


Birthday:

You can also use the min and max attributes to add restrictions to dates:

1
2
3
4
5
6
<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Enter a date before 1980-01-01:


Enter a date after 2000-01-01:


Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds “.com” to the keyboard to match email input.

1
2
3
4
<form>
  E-mail:
  <input type="email" name="email">
</form>

E-mail:

The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):

1
2
3
4
<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form>

First name:


The disabled Attribute

The disabled attribute specifies that the input field is disabled.

A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form:


First name:


The size Attribute

The size attribute specifies the size (in characters) for the input field:

1
2
3
4
<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
</form>

First name:


The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:

The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.

Tip: It is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice versa.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that the form data should not be validated when submitted.

The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

1
First name:<input type="text" name="fname" autofocus>

The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.

Tip: To refer to more than one form, use a space-separated list of form ids.

1
2
3
4
5
6
<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

The formenctype Attribute

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method=”post”).

The formenctype attribute overrides the enctype attribute of the <form> element.

The formenctype attribute is used with type="submit" and type="image".

The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

The formmethod attribute can be used with type="submit" and type="image".

The formnovalidate Attribute

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute can be used with type="submit".

The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type="submit" and type="image".

The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute works with the following input types: email, and file.

The pattern Attribute正则表达式

The pattern attribute specifies a regular expression that the <input> element’s value is checked against.

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

The placeholder Attributes

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

The hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

The placeholder Attribute (HINT )

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

The hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

<!DOCTYPE html>

The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).