HTML5 from entry to entry

Last Update:2014-06-07 Source: Internet

Author: User

Tags set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Set document structure

File Type: <! DOCTYPE html>

Create HTML document structures, headers, and subjects: <Html> Section<P> text content </p> Line Break<Br>
Specify the webpage title and metadata(Placed in the header

<Title> webpage title text </title>

<! -- Specify the character encoding -->

<Meta charset = "UTF-8">

<Meta name = "keywords" content = "keyword 1, keyword 2, keyword 3, keyword N">

<Meta name = "description" content = "webpage content description text">

<! -- Redirect address -->

<Meta http-equiv = "refresh" content = "5; url = http://www.csdn.net">

Introduce style sheets and JavaScript script files in the header
<Link rel = "stylesheet" type = "text/css" href = "style.css">
<Script type = "text/javascript" src = "test. js"> </script>

Use a tag to format text Create a title: The HTML standard defines six titles of different degrees from

Example

HTML5 introduces a new tag<Hgroup>Only the first title is displayed in the structure outline of the webpage.

Example

Apply the bold and italic formats: <B> bold text </B> <I> italic text </I>. Pay attention to the order when nesting.
Application superscript and subscript format: <Sup> superscript </sup> <sub> subscript </sub>
Use fixed width and pre-formatted text:

Fixed-width tag <kdb> specify keyboard input content </kdb> <code> for program code </code> <samp> show sample text </samp>

Pre-formatted labels <pre> not only display text with fixed width, but also retain spaces and linefeeds that are usually ignored by the browser </pre>

Format segmented Citation: <Blockquote cite = "reference source URL"> the citation content is automatically indented </blockquote>

Use List and background Create list: Number list<Ol> </ol> Unordered list<Ul> </ul> Projects in the list<Li> </li> the list can be nested.

Change the project or numeric Symbol: use the list-style-type attribute to set the style

Unordered list: disc default solid circle, circle hollow circle, square solid square

Number list: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, none

Create definition list: <Dl> <dt> define words </dt> <dd> define description text </dd> </dl>
Insert special characters:

& Amp; $ #38; <less than & lt; & #60;> greater than & gt; & #62;

Non-wrap Space & nbsp; & #160; GBP & pound; & #163; copyright symbol & copy; & #169;

Degrees & deg; & #176; addition and subtraction No. & plusmn; & #177; Registered Trademark & reg; & #174;

Currency & yen; & #165; currency score & cent; & #162; trademark & trade; & #8482;

Dagger & dagger; & #8224;

Insert a horizontal line: <Hr> set styles through CSS
Select background color and foreground color: Set the style background-color and color through CSS
Set background image: Set the style background-image: url(index.gif) through CSS );
Image duplication: Background-repeat

Force the background image to be fixed and not scroll with the scroll bar: background-attachment: fixed

Create hypertext links and anchors Link hypertext to a web page:

Visit <a href = "http://www.microsoft.com"> Microsoft.com </a> for the latest information

UseAbsolute pathOrRelative Path, <A href = "../index.htm"> HOME </a> specifies the folder on the previous layer ../

Hypertext link to an email address: <A href = "mailto: support@admin.com? Subject = Comment "> Contact Us </a>

You can add the title attribute to a hyper-text link to set the screen prompt of the hyper-text link.

Create and Hyper Text Link to anchor: Create an anchor <a name = "conclusion"> Conclusion </a>

Point to the location of the anchor in the same file <a href = "# conclusion"> View the Conclusion </a>

Point to the anchor in another file <a href = "report.htm # conclusion"> View the Conclusion </a>

Hypertext link to other content: Hypertext links can point to any file

Image Display Embedded Image:

If you only set the height or width, the image will be scaled in the aspect of length and width. All settings may cause image deformation.

Add hypertext links to images:

<A href = "http://www.abc.com" title = "Home Page"> </a>

Alternative image text:

Add the attribute alt = "text" to the label"

Add a title to a chart:

<Figure> <figcaption> the life cycle of the product </figcaption> </figure>

If the browser does not support HTML5, <figure> is ignored. You can specify only one title for a group of images.

Create Image ing Link Rectangular hotspot Area:

<Area shape = "rect" coords = "284,170,352,314" href = "enter.htm">

Circular hotspot Area:

Center Coordinate and radius determining area <area shape = "circle" coords = "270,364,144" href = "index.htm">

Irregular hotspot areas:

Use multiple coordinates to define all vertices <area shape = "poly" coords = "287,71, 413,286,314,446,188,267" href = "abc.htm">

Create Image ing:

<Map name = "moth" id = "moth">

<Area shape = "poly" coords = "287,71, 413,286,314,446,188,267" href = "abc.htm">

</Map> # Moth"Style =" border: none "> similar to the hyper-Text Link, you can add the title attribute to the <area> label.

Create a partitioned Layout HTML5 new semantic tag:

<Header> define the webpage header area <footer> define the bottom area of the webpage <nav> define the navigation bar area

<Article> define the article area <aside> comment, prompt, or warning outside the topic <section> definition content or application area

Create a region (Compatibility and security): <Div id = "masthead"> </div>

Regional positioning: float-style-rule or position-style-rule

Create a table Create a simple table:

<Table>

<Tr> <td> cell1 </td> <td> cell2 </td> </tr>

<Tr> <td> cell3 </td> <td> cell4 </td> </tr>

</Table>

You can use <th> to replace <td> to indicate the table title.

Define table size: For <table> setting width and height, use the percentage or pixel value to define
Define column width: Set width and height for <td>
MERGE table cells: Set related properties for <td>

Combine with the right cell and use the colspan attribute to specify the number of columns to span

Merge with the cells below and use the rowspan attribute to specify the number of rows to be crossed

Use tables for page layout: Omitted

Create a user form Create a simple form<Form method = "post" action = "xxx. php" enctype = "text/plain"> </form>
Create text box

<Input type = "text" name = "firstname" maxlength = "100" required>

Added the required attribute in HTML5, indicating required fields.

HTML5 supports the new input type: email URL

Create text area

<Textarea name = "comments" rows = "5" cols = "60" maxlength = "1000"> </textarea>

Create and submit button and Clear button

<Input type = "submit" value = "Send">

<Input type = "reset" value = "Clear">

Create check box and select button

<Input type = "checkbox" name = "repair" value = "Yes" checked = "checked">

<Input type = "radio" name = "category" value = "gold" checked = "checked"> Gold <br>

<Input type = "radio" name = "category" value = "silver"> Silver <br>

Create Select menu

Color: <select name = "colors" size = "1">

<Option> Red </option>

<Option> Blue </option>

<Option> Green </option>

</Select>

By default, the form result returns the selected text. You can change the return value by setting the value attribute of <option>.

Set the size attribute of <select>. The value 1 is the drop-down list, and the value 1 is the drop-down list.

Use the <optgroup> label to combine related options.

<Select>

<Optgroup label = "Swedish Cars">

<Option value = "volvo"> Volvo </option>

<Option value = "saab"> Saab </option>

</Optgroup>

<Optgroup label = "German Cars">

<Option value = "mercedes"> Mercedes </option>

<Option value = "audi"> Audi </option>

</Optgroup>

</Select>

Other new HTML5 input types

Rotation box <input type = "number" name = "copies" min = "0" max = "100" step = "1" value = "1">

Slide bar <input type = "range" name = "copies" min = "1" max = "10" step = "1" value = "1">

Date selector <input type = "date">. The type attribute can be month, week, time, date, datetime, datetime-local.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More