HTML Base Rollup

Last Update:2017-05-09 Source: Internet

Author: User

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

One: HTML

is the primary language for designing Web pages on the Internet. Web pages include animations, multimedia, shapes, and other complex elements, all of which are HTML-based architectures.

Markup Syntax:

The symbols that HTML uses to describe functionality are called "tokens."

1. All marks are enclosed in angle brackets (<>) so that the browser can know that the markup inside the angle brackets is an HTML command;

2. For paired occurrences, it is best to enter both the starting and closing tags;

3. Use tag nesting method to apply multiple tags to the same information;

4. In the code, case-insensitive;

5. Any space or carriage return in the code is not valid, insert a space or carriage return has a special mark, respectively, is a, ;

6. No spaces in the tag, otherwise the browser is not recognized;

The overall structure of the HTML file:

File Header content:

A complete HTML file consists of a header file and a principal file. Head tag:

Set the base URL <base>: The base URL is used to set the path of the file in the browser,<base> tags are generally used to design file URL addresses. An HTML file can have only one <base> tag, and the tag must be placed in the header file.

Basic syntax:

<body>

</body>

Herf is used to set the address of the Web page file link, and target is used to set the destination window for the page display.

Set datum text <basefont>:

Base text: Refers to the basic definition of Web page text before making a Web page, including fonts, font size, color, and other definitions of the font, when the text in the page does not have a different definition of the style, it will automatically apply the page definition of the base font.

Basic syntax:

<body>

</body>

The Face property is used to set the name of the font, which can be Arial, Sandi, Italic, and so on; The Size property is used to set font sizes;

Color is used to set the colors of the font.

Define meta-information <meta>:

Basic syntax: <meta http-equiv= "" Name= "" content= "" >

　　Note :The Http-equiv property is used to set the header field of an HTTP, but the determined value is determined by the content property, which is used to set the form in which meta information appears, and the content property is used to set the contents of the meta information.

Set page keyword--keywords:

Keywords in the Web page are mainly for the search engine services, and sometimes in order to improve the site by search engines to search for the chance, need to set up a number of Web site subject Related keywords. Basic syntax:

　　　Value is used to describe the keyword defined for the page, which can be multiple keywords.

Set the page expiration Time--espires

Set the page expiration time or jump, it is necessary to set the page meta-information of the Http-equiv property and the content property to set the page expiration time.

Basic syntax: <meta http-equiv= "Expires" content= "value" >

　　Expires is used to design the page expiration time, and the content property sets the specific expiration time.

Main content <body>:

1. Setting the page background--bgcolor

Basic syntax: <body bgcolor= "Value" >

2. Set the page margin--topmargin (to the top), LeftMargin (to the left), RightMargin (to the right), Bottomnargin (to the bottom)

3. Design Body Color--text

Use the Text property to set the color for text that is not linked to the page

Basic syntax: <body text= "" >...</body>

Text and paragraphs:

　　I. Editing content

1. Add text

Basic grammar:<body> written text </body>;

2. Add comments <!....--> or <comment>;

3. Add a space-- 

4. Add Strikethrough <strike>;

To add strikethrough to the text you want to use a pair of <strike></strike> tags, you can be added strikethrough;

Basic syntax:<body><strike> Enter the text you want to add strikethrough to </strilke> </body>

5. Inserting special symbols

　　Two. Text effects

1. Edit Web page Text style

The main is to set the text font, size, color and other properties, using and <basefont> tags can be achieved;

Basic syntax: <body></body>

　　　　Face setting font,

2. Set Text callout <ruby>

In the HTML file, sometimes you need to describe a word, word, or paragraph, you can add the text of the label to complete the text in the page description;

Basic syntax:<ruby> need to be illustrated with text <rt> text callout </rt></ruby>

Three. Text Decoration

1. Simple modifier text

Basic syntax:

<body>

Display of normal text

Bold text

Italic text

Add underlined text

</body>

Paired indicates bold text display; indicates italic text display; to underline the text;

2. Determine text-to-subscript--/

Basic syntax:

<body>

Superscript content

Subscript Content

</body>

3. Set Address text <address>

Add address text to your Web page to make it easier to highlight your contacts and highlight your contact's address information.

Basic syntax:

<body>

<address> Add your address information here </address>

</body>

4. Set equal width text <tt>, <samp>, <code>, <kdb>

Basic syntax:

<body>

<tt> Typewriter Style display </tt>

<code> equal width text setting content </code>

<samp> equal width text setting content </samp>

<kdb> Keyboard Input </kdb>

</body>

Four. Paragraph

Basic syntax:

In the HTML file, the, tag is a paragraph mark symbol, and the tag can be used to define the paragraph in the text of the page, but not in the paragraph format.

1. Enter

Force line break

2. Line Break /

In HTML, a paired tag means no line break, but in the tag. The content between, after inserting paired tags is forced to wrap.

3. Pre-formatted <pre>

In HTML, using paired <pre></pre> tags to pre-format text passages in a Web page, you can create a paragraph by pressing the ENTER key on the keyboard during the input process.

4. Center display text <center>

With the <center></center> tag, the alignment tag will be centered in the page when the content is displayed.

5. Set paragraph indent <blockqute>

When you orchestrate a document, you can increase the hierarchical effect of the paragraph by using the paragraph indent.

Basic syntax:<body><blockqute> what you need to indent </blockqute></body>

Use a pair of <blockqute></blockqute> markers to indent 5 characters.

6. Ignore HTML tags--<xmp>

In HTML, the use of paired <xmp></xmp> tags ignores the role of HTML tags, and all content, including markup, is displayed directly on the page.

Basic Syntax:<body><xmp>...</xmp></body>

7. Insert and set horizontal line

Properties: Width Sets horizontal line widths, either pixels or percentages, size sets horizontal line heights, NoShade sets horizontal lines without shadows, color sets horizontal line colors, align sets horizontal line alignment

Basic syntax: <body>

To create and use a list:

One. List type

List: Displays items in an orderly or unordered manner on a Web page.

List type marker symbol

Definition list DL

Unordered list ul

Directory list dir

Menus List Menu

Sequential table OL

1. Insert Definition list <dl>

Basic syntax:

<dl>

<dd> Description </dd>

...

</dl>

The <dt> tag defines the part that makes up the list name, and this tag uses only the name of the item in the <dl> tag that;<dd> is used to interpret the description <dt> tag definition, which can only be

Used in <dl> tags;

2. Insert unordered list <ul>

Basic syntax:

<ul>

<li> project name </li>

...

</ul>

Use paired <ul></ul> tags to insert unordered lists, but the <ul> tags must be added to the list item value using paired <li></li> tags.

2. Insert Directory list <dir>

Simply insert the paired directory list tag <dir></dir> where you use the directory, and you can simply insert the directory list, but the <dir> tags must use paired <li> </li> tag to add a list item value.

Basic syntax:

<dir>

<li> project name </li>

...

</dir>

4. Insert menu List <menu>

In an HTML file, you can simply insert a list of menus by inserting a paired menu-list tag where you need to use the table of contents, but only a single <li> between the <menu> tags is required <menu></menu> tag to add a list item value.

Basic syntax:

<menu>

<li> Project Name ...</li>

...

</menu>

5. Insert a sequence table <ol>

A paired <ol></ol> tag can be used to insert a sequence table, but a list item value must be added between the <ol> tags using paired <li></li> tags; when we need to change the list symbol, we need to <ol Enter the Type property in > To set the property. Type Property Property Value Description

1 Number 1, 2 ...

A small letter A, b ...

A capital letter A, B ...

I lowercase roman numerals i,ii,iii ...

I Capital Roman Numerals

Basic syntax:

<li> project name </li>

...

</ol>

Two. Nested lists

1. Nested definition Lists

Insert paired <dl></dl> where you need to use a nested definition list, and use multiple <dt> and <dd> tags between a pair of <dl></dl> tags.

Basic syntax:

<dl>

<dd> Description </dd>

````

</dl>

Multiple <dt> and <dd> alternates, which form the nesting of the definition list.

2. Nested ordered and unordered lists

Insert the sequence table <ol> between the unordered list <ul></ul> tags, and you can complete the insertion of nested ordered and out-of-order lists.

Basic syntax:

<ul>

<li> Project Name </li>

<ol>

<li> Project Name </li>

</ol>

<li> Project Name </li>

<ol>

<li> Project Name </li>

</ol>

</ul>

HTML Base Rollup

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

HTML Base Rollup

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support