Frequently used tags for HTML documents

Last Update:2017-04-15 Source: Internet

Author: User

Tags border color

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

I. Tags commonly used in HTML documents include text, paragraph, list, hyperlink, image, table, frame, and multimedia tags, which are described in the following sections:

1. Text Tags: text is one of the important parts of the Web page, by using the title tag, text formatting tags and text style tags to change the boring text. Enables visitors to browse the Web more efficiently. The following describes the title tags, text formatting marks, and text style tags:

1.1. Title Tag

(1). When you browse the Web page, you often see some headline text that is used to separate chapters, and in an HTML document, you can use the title tag to indicate the title on the page.

The title tag consists of 6 types of markers, representing 6 levels of headings, respectively. The font size of each level is clearly distinguished, from 1~6 in descending form, the font size of level 1 headings is the largest, and the size of the 6-level headings is minimal. The syntax format is as follows:

(2). Next, attach a sample of the title tag, using the caption tag to display different levels of headings, such as the following code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Implementation effect is not attached to, their practice to see the effect.

(3). By default, all browsers use the left alignment for headings, but can use the Alignment attribute align to align or center the title, changing the Code of the body part above to such code as the following:

<BODY><H1 align= "center" > Learning javascript

Observe the effect. Center alignment set the Align property value to center. Right-aligned sets the Align property value to true.

1.2. Text format Mark <font>...</font>:

(1). Plain text information is indispensable in Web pages. In order to make the page effect become more beautiful. The ability to use text formatting tags to change boring text messages.

Text formatting tags are used to set text size, font effects, and text color, and they often use attributes such as the following:

-size Property: This property is used to set the font size of the text, which can be set to 1~7. can also be set to +1~+7 or -1~-7. The default text size is 3rd number.

-face Property: This property is used to set the font effect of text and to set one or more font names. With multiple fonts, the first font is used by default, assuming the first font does not exist. A different font is used, and so on. Assume that the default font will be used if you set multiple fonts that are not present. Zhong Wenme think the song body, English tacit feel times New Roman.

-color Property: This property is used to set the color of the text whose value can be set to the name of the color, that is, red can be set to red. You can also set the color code to 16 binary. That is #ffffcc, the default value is black.

(2). A sample is attached here. The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Own practice, observe the effect.

1.3. Text Style Tags:

(1). When you browse the page, you can often see some special style text appearing on the page. such as bold characters, italics, strikethrough text, and so on.

These styles can be implemented using HTML documents to provide some text style markup. Frequently used text style tags and descriptions such as the following:

-<b>...</b> style tags, <strong>...</strong> style tags: set the text to a bold font style.

-<i>...</i> style tags, <em>...</em> style tags: set text to italic style.

-<u>...</u> style marker: set to underlined text.

-<sup>...</sup> Style Tags: set text to superscript style.

-<sub>...</sub> style Tag: Sets the text to the subscript style.

-<s>...</s> style tags, <strike>...</strike> style tags: add text to Strikethrough.

(2). The following example is attached, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

After execution. Effects such as the following:

2. Paragraph mark: to make the text in a Web page appear more coherently, you can use paragraph marks and line breaks in the HTML document to make the text paragraphs more clearly regulated.

The following describes the paragraph mark and line break tags:

2.1. Paragraph mark <p>:

(1). In a normal text editor. After each piece of text is entered. The ability to use the ENTER key to generate a new paragraph can be implemented using the paragraph mark <p> in the HTML document. The paragraph mark can have no end tag </p>.

(2). Can also be used in addition to <p> other paragraph marks, to achieve different levels of the effect of the format. Other paragraph marks such as the following:

-<addess> Paragraph marks: used for address and contact information, usually shown in italics.

-<blockquote> Paragraph marks: used to represent reference text, usually indented on both sides, with a smaller line spacing than a normal paragraph.

-<pre> paragraph mark: used for typesetting program code, such as information, often use fixed-width font, between the word and between the lines have enough spacing.

You can also use the align for its properties in the above paragraphs.

(3). The following is a sample of the paragraph mark, the Code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Performance effects such as the following:

2.2. NewLine Mark <br>:

(1). A line of text in the page reaches a certain length the browser will wrap itself, assuming that the text does not reach a certain length to be able to use the line break tag <br> to force a newline. Line break tags can have no end tag </br>.

can also be marked with <br/>. And <br> are the same.

(2). The following example is attached, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<br/> Let the storm come more violently. </body>

3. List Tags: lists are the most frequently used form of data, and use lists against more complex data. To make the data clearer.

The following describes two list tags in a Web page, unordered list tags, and ordered list tags.

3.1. unordered list tag <ul>...</ul>:

(1). The unordered list tag is used to provide a list form that does not require numbering.

Before each item, use the symbol as a representation of each item.

Its syntax format is as follows:

<ul><li> First <li> second <li> third ......</ul>

The <ul></ul> tag indicates the start and end tags of an unordered list. <li> represents the beginning of a project. <ul> tags often use attributes as type. This property represents the bulleted style of the unordered list. Its property values such as the following:

-disc: Solid dot. The default value for the unordered list tag.

-circle: Hollow Dot.

-square: Solid square block.

(2). The following example is attached, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Performance effects such as the following:

3.2. ordered list tag <ol>...</ol>:

(1). Ordered list tags use numbering instead of symbols to represent individual list items. Items in a sequence list are usually sequential, and generally use numbers or letters as sequential numbers. Its syntax format is as follows:

<ol><li> First <li> second <li> third ......</ol>

The <ol></ol> tag represents the start and end tags of an ordered list. <li> represents the beginning of a project.

<ol> tags often use the Start property and the Type property. The Start property is used to set the starting value of the list item. Its property value is an integer. It is also possible to enter a negative integer, but only for numeric entries, starting from 1 by default.

The Type property is used to set the ordinal style of a list item with its property values such as the following:

-1: Numbers 1, 2, 3 ...

-A: Lowercase English letters A, B, c ...

-A: Uppercase English letters A, B, C ...

-I: Lowercase roman numerals I, II, III ...

-I: Uppercase Roman numerals I, II, III ...

(2). The following example is attached, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Performance effects such as the following:

Change the main part of the code above to such as the following:

<body><ol start= "2" type= "1" ><li> Computer class </li><li> textbook </li><li> magazine class </li ><li> Literature Category </li></ol></body>

After execution such as the following:

4. Hyperlink tag:

4.1. <a>...</a> is called a hyperlink tag in an HTML document, which is one of the most important elements in a page's pages. A site is made up of multiple pages that determine the navigation relationship between pages based on hyperlinks.

When you click a linked text or image on a webpage, you can jump to a page.

(1). Hyperlink tags frequently used properties and descriptions are:

-href Property: Specifies the link path, which indicates an empty link when set to #.

-name Property: The name of the link. Often used for bookmark links.

-title property: The hint text for the link.

-target Properties: Specifies how the target form of a link is opened, together with 4 property values, _parent is open in the previous level form, is often used when using a frames page, _blank means open in a new form, _new is open in a new form, _ Self means open in the same form, _top in the entire form of the browser. Ignore whatever frame.

-accesskey Properties: Hyperlink hotkey.

(2). Create a new HTML file directly, the main code such as the following:

<a href= "kind.html" target= "_blank" >hh</a>

Then you try to change the value of the target property and see the difference.

5. Image marker:

5.1. It is necessary to use a picture if you want the Web page to be aesthetically appealing to visitors. You can use the image tag to insert a picture into a Web page in an HTML document, as well as a image marker.

(1). The following is a description of the properties and descriptions that are frequently used by a like tag:

-src Property: This property is used to set the path where the image file resides. This path can be a relative path and can be an absolute path.

-height Property: This property is used to set the height of the image, in pixels (which adjusts the width of the image height), or as a percentage of the browser.

-width Property: This property is used to set the width of the image, in pixels, and as a percentage of the browser.

-border Property: This property is used to set the width of the image border, in pixels, without a border.

-hspace Property: This property is used to set the horizontal spacing between two images. Units are pixels.

-vspace Property: This property is used to set the vertical spacing between two images in pixels.

-align Property: This property is used to set the alignment of the image.

-alt Property: This property is used to set the hint text, which is displayed when the browser is not loading images or loading an image, and the mouse hovers over the picture.

(2). Next attach a sample, insert a picture logo1.jpg on the webpage. This image is placed in the images directory on the website. and set the width height property to 100%, and set the hint text to "starlight." The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Try it yourself!

6. Table Markers:

6.1. In an HTML document, you typically use three tags to form a table, with table markers, row markers, and cell markers, respectively.

The syntax format for creating a table is as follows:

<table>    <caption> table header content </caption>      <tr>     <th> Header content </th>     < Th> table header content </th> ...      </tr>          <tr>     <td> cell content </td>     <td> cell content </td>     ...    </tr><table>

(1). form Mark <table>...</table>:

The-<table> tag represents the start position of a table,</table> represents the end position of a table. The frequently used attributes and descriptions of the table markers are:

Width property: Sets the widths of the table, the width of the default table is related to the width of the text in the table, its property value can be pixels, or it can be a percentage of the browser.

Height property: Sets the altitude of the table. The setting method is the same as the width of the table.

Align property: Sets the position of the table in the Web page.

Border Property: Sets the width of the table border. Units are pixels. It is important to note that there is only one setting whose properties are greater than 0 o'clock ability to display the width of the table.

BorderColor property: Sets the color of the table border, provided that the table border value is greater than 0.

Cellspace Property: Sets the width of the inside table box, which refers to the width between the cell and the cell.

cellpadding Property: Sets the distance between the text and the border within the table.

BgColor property: Sets the background color of the table.

Background: Sets the background image of the table.

(2). table header tag <caption>...</caption>:

The-<caption>...</caption> tag is used to set a special cell "header cell".

The header cell is positioned at the first row of the entire table and plays the role of displaying the caption for the table.

(3). table header Mark <th>...</th>:

-Another special cell in the table, this cell is the header. The table header is typically positioned at the first column of the first row. The category used to describe this line of content. The contents of the table header are displayed in bold.

(4) line Mark <tr>...</tr>:

-The row marker is used to set the rows in the table, including several sets of row markers in the table, indicating that the table is a few rows. The properties and descriptions frequently used by row markers are as follows:

Width property: Sets the widths of the rows, which are only valid for the current row set.

Height property: Sets the heights of the rows.

BorderColor property: Sets the border color of the line.

BgColor property: Sets the background color of the row.

Background property: Sets the background image for the row.

Align property: Sets the horizontal alignment of the line text.

valign property: Sets the vertical alignment of the line.

(5). Cell tag <td>...</td>:

-the cell tag is used to indicate that there are several cells in each row.

Some of this markup's properties are similar to row tags, and the colspan and rowspan properties are described here.

Colspan property: In a table, it is sometimes necessary to merge several rows of cells in a row into a single cell, which can be achieved using the colspan property. The value of this property is a positive integer that indicates the number of cells that need to be merged.

RowSpan Property: This property is used to merge the rows of a table. The value of this property is a positive integer representing the number of rows that need to be merged.

(6). The following example is attached:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(1). From the syntax of creating a framework, it can be seen that the framework consists of two tags. One is the frame container tag. There is also a frame page tag.

These two tags are described in the following separate sections:

-<frameset>: Frame container tag, used as a declaration of the framework. <frameset> marks the beginning of the frame. The corresponding </frameset> is the frame end tag. In the frames page, place the <frameset> tag after the head tag to replace the <body> position. The framework container flags frequently used properties and descriptions such as the following:

Rows property: A horizontal cut form whose property values can take multiple values, each representing the horizontal width of a frame form, in pixels or as a percentage of the browser, and note that several row property values are set. There will be several frame page markers.

COLS Properties: Vertical Cut form. It is used in a similar way as rows.

Frameborder property: Whether frame border is displayed, its property value can only be 0 or 1, assuming 0. The border will be hidden. 1 for display.

Framespacing property: Sets the border width. Like Somer felt 1.

BorderColor property: Sets the border color.

-<frame>: Frame page markup, defining the frame content. There are several frames in the frames page that set up several <frame> tags, which are included between <frame> and </frame>. The frames page marks frequently used properties and descriptions such as the following:

SRC attribute: Sets the path of the frame paging file. Displays only blank pages if not set.

Name property: Sets the page name for easy lookup and linking. The page name does not agree to include special characters.

Noresize property: Disables resizing of frames.

Marginwidth Property: Sets the distance between the left and right edge of the page and the frame border.

Scrolling property: Whether to display the frame scroll bar, the value is Yes/no/auto, default feel auto. The scroll bar is determined based on the content of the form.

(2). Next, attach a sample, defining a top and nested left-side frame through the <frameset> tags and <frame> tags. The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
</body></noframes>

Performance effects such as the following:

7.2. Floating frame: A floating frame is a special frame structure that is nested in another Web page file in a browsed form.

<iframe src= "File" height= "value" width= "numeric" name= "frame name" scrolling= "value" frameborder= "value" ></iframe>

(1) .<iframe> tags frequently used attributes and descriptions such as the following:

SRC attribute: Specifies the file path of the floating frame.

Name property: Sets the names of the floating frames.

Align property: Sets the alignment of the floating frame.

Width Property: Sets the width of the floating frame.

Height property: Sets the altitude of the floating frame.

Scrolling property: Sets how the floating frame scroll bar is displayed, value has three values: Yes to display the scroll bar. No the scroll bar is not displayed, and auto determines whether there is a scroll bar depending on the content of the form.

Frameborder Property: Specifies whether to display the bounding rectangle of the floating frame. , the value of Yes indicates the frame border is displayed, and a value of no represents a hidden frame border.

Marginwidth Property: Sets the distance between the left and right edges of the floating frame and the border.

Marginheight Property: Sets the distance between the top and bottom edges of the floating frame and the border.
(2). The following example is attached. The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Performance effects such as the following:

8. Multimedia Tags:

8.1. Multimedia refers to the use of computer technology. A method of integrating multiple media together to establish a logical connection and to deal with it in a variety of ways.

A variety of media mainly include text, sound, image and animation and other forms. Use <embed></embed> multimedia tags in HTML files to embed multimedia files in a Web page.

(1) Multimedia tags often use attributes and descriptions such as the following:

-src Property: Sets the multimedia file path.

-width property: The width of the media file area to play.

-height property: The height of the media file area to play.

-hidden Properties: Controls the display and hiding of the playback panel. A value of true represents the hidden panel, and a value of false represents the display panel.

-autostart Properties: Control whether the multimedia content to play their own initiative, the value of true for their own active play, the value of false means that they do not actively play.

-loop Property: Controls whether the multimedia content loop plays, the value is true to represent an infinite loop playback, the value of false is to play only once.

(2). The following example is attached, in which index.swf is placed under the Falsh directory under the website. The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Performance effects such as the following:

(3). This tag can play MP4, MKV and other video files, but also can play mp3 music files, as well as some animation effects files.

Two. I packed all the contents of the HTM document: http://download.csdn.net/detail/u012561176/8916217, a Word document that contains this article's source code. For everyone to learn, the basics of HTML documents can be seen in my last Post: http://blog.csdn.net/u012561176/article/details/46947575

The above content is only for everyone to study, write bad, please forgive me, if there are errors, please point out, thank you!

????????

Frequently used tags for HTML documents

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