Basic html tags, html tags

Last Update:2018-01-30 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 ＞

Basic html tags, html tags
Common HTML tags

1.<H>Title

<H1> define the maximum title
<H6> define the minimum title

2.<Hr/> horizontal line
3.Note
<!-- this is a comment-->
4.<P> paragraph
<p>this is a paragraph</p>
5.<Br/> line feed
6.Modify the html style in the style attribute
Background-color change background color
Font-family defines the text font family
Color defines text color
Font-size defines the font size of Text
Text-align specifies the horizontal alignment of text
<body style="background-color:yellow"><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
7. Text Formatting related labels
Bold text <B>
Aggravated tone <strong>
Define the font size <big>
Defined as focusing on text (less than strong) <em>
Italics <I>
Define a small character <small>
Define subscript <sub>
Define superscript <sup>

8. pre-formatted text <pre>
The text in the pre element usually retains spaces and line breaks, and the text will also display an equal-width font, so it is often used to display computer source code. Note that you must use a symbolic entity to represent special characters.

9. Computer output tag
Define programming code <code>No extra spaces or line breaks are retained.
Define variable <var>
Define keyboard input <kdb>
Define a computer output instance <samp>
10. address <address>
<Address> define the contact information of the document or article author
In the <body> element, indicating the contact information of the document
It is located in the <article> element to indicate the contact information of the article.

11. Abbreviations and acronyms
Define the abbreviation <abbr>
Define the abbreviation <acronym>
<abbr title="etcetera">etc.</abbr><acronym title="World Wide Web">WWW</acronym>
When you move the cursor over the acronyms, the title can be used to display the complete expression version.

12. Define the text direction <bdo>
<Bdo dir = "rtl"> Here is some Hebrew text </bdo> output from right to left
 
13. Block reference
Define long references <blockquote>
Define short references <q>
Define a project <dfn>
Define the title of a book <cite>

14. Delete word effects and insert word effects
Define the delete word <del>
Define insert words <ins>

15. Use Style
External style sheetFor multiple pages
Internal style sheetFor a single file
Inline StyleFor individual elements
<p style="color: red; margin-left: 20px">This is a paragraph</p>
16. Link <a>
<A> a tag can be used to create a link to another document through the href attribute, or the bookmarks in the document can be created through the name attribute.
Example: <a href = "http://www.w3school.com.cn/"> Visit W3School </a> Example 2: <p> <a href = "# C4"> View Chapter 4. </A> </p> 
To open a link in a new window, set the target attribute to "_ blank"

17. image tags 
Example: 
The src attribute is the image position, and the alt attribute is the text display when the image cannot be loaded.

18. table <table>
The rows are defined by <tr> and the columns are defined by <td>.
The border is set through the border attribute, and the header is set with the <th> attribute
Table title <caption>

19. unordered list <ul>
<ul><li>Coffee</li><li>Milk</li></ul>
 
20. ordered list <ol>
<ol><li>Coffee</li><li>Milk</li></ol>
 
21. Custom list items <dl>
Each custom list item starts with <dt>, and each custom list item starts with <dd>.

22. The div element is for document layout, and the span element is mainly used to set style attributes for some texts.

23. Framework <frameset>
Vertical frame:
Example:
<frameset cols="25%,50%,25%"><frame src="/example/html/frame_a.html"><frame src="/example/html/frame_b.html"><frame src="/example/html/frame_c.html"></frameset>
Horizontal framework:
<frameset rows="25%,50%,25%">
 
24. inline framework <iframe>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

25. Insert a script <script>
<script type="text/javascript">document.write("Hello World!")</script>

26. 
<Title> <base> <link> <meta> <script> <style>
<Title> define the document title
<Base> set the default address for all links on the page.
<Link> used to connect a style sheet
<Style> define style information for html documents
<Meta> specifies the page description, keywords, author of the document, last modification time, and other metadata.

 TIPS:
Set background image
<body background="/i/eg_background.jpg">
 
Set the image alignment mode:
<P> image  in text </p>
The default value is bottom.

Float a paragraph to the left or right of the paragraph:

 
Use the height and width attributes to zoom in or out the image

 
Create an image map with an area available for clicking. Each area is a hyperlink.
<map name="planetmap" id="planetmap"><areashape="circle"coords="180,139,14"href ="/example/html/venus.html"target ="_blank"alt="Venus" /><areashape="circle"coords="129,161,10"href ="/example/html/mercur.html"target ="_blank"alt="Mercury" /><areashape="rect"coords="0,0,110,260"href ="/example/html/sun.html"target ="_blank"alt="Sun" /></map>
 
Process empty cells:
Replace the content with & nbsp;
Set table cells for cross-row or cross-Column

Cells that span two columns:
<Th colspan = "2"> phone number </th>
 
Cells that span two rows
<Th rowspan = "2"> phone number </th>
 
Set cell margins (blank between cell content and Border)
<table border="1" cellpadding="10">
 
Set the cell spacing (distance between cells)
<table border="1" cellspacing="10">
 
Add background color or background image to the table
<table border="1" bgcolor="red"><table border="1" background="/i/eg_bg_07.gif">
 
Arrange content in table cells
<Th align = "right"> January </th>

Set different types of ordered lists
Change the display mode of sorting by changing the value of the type attribute.
<Ol type = "A"> sort by uppercase/lowercase letters
<Ol type = "a"> sort by lowercase letters
<Ol type = "I"> sort by Roman letters
<Ol type = "I"> sort by lowercase Roman letters
It is sorted by numbers by default.

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