Home > Developer > Web Develop
First, the basic concept
1, Tags: HTML used to describe the function of the symbol is called "label", it is used to represent the most basic parts of the HTML document--html elements. The content between the start tag and the terminating tag is called the element content.
2, properties: In the start tag of the element, you can set 1 or more properties to control the display of the label, in the format < label Name Property name = property value >
Ii. Basic structural elements
There are 3 basic structural elements of HTML, which are
1,
2,
3. The BODY element defines the body of the document. The BODY element contains all the contents of the document (such as text (<text>), paragraph (<p>), title (
4. Other Tags:
4.1, <! The doctype> declaration must be the first line of the HTML document, before the
4.2, <meat> Tags: provide meta-information about the page (meta-information), such as the description of the search engine and the frequency of updates and keywords,<meta> tag attributes define the name/value pairs associated with the document. For example <meta charset= "Utf-8"/>, defines the document to Utf-8 encoding.
4.3. <title> Tags: the title of the page, set to be seen in the Browser tab.
5, a simple small demo
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>I like the Tang poetry</title></Head><Body> <H1>I like the Tang poetry</H1> <Div> <H2>Early Hair Baidicheng</H2> <P>Baidi The clouds between the two Koreas,<BR>Trinidad Jiangling Day also. <BR>the two sides of the ape cry,<BR>The canoe has been mountains million. </P> </Div> <HR> <Div> <H2>Quiet Night thinking</H2> <P>before the bed was bright moonlight,<BR>suspicion is ground frost. <BR>Jutou Look at the moon,<BR>think of your hometown. </P> </Div></Body></HTML>
Third, the common label
1, the below list some common HTML4 label
| Label Signature | Meaning | Property value | New properties in the H5 | Remarks (description) |
| Link | - | href (CSS address) | Property: Size Value:heightxwidth,any Description: Specifies the size of the linked resource. For rel= "icon" only |
The 1.link element is an empty element that contains only the attributes 2. This element can only exist in the head section, but it can occur any number of times |
| Script | - | SRC (JS address) | Property: Async Value: Async Description: Specifies the asynchronous execution script (for external scripts only) |
1. False the code inside this element is not in a function, then the code will be executed immediately when the page is loaded 2. This element's code is best written after the DOM node, otherwise it may hinder the node's rendering loading |
| Div | Segmentation | - | - | <div> is a block-level element, which means that browsers usually place a line break before or after a DIV element |
| Table | Form | - | - | - |
| Span | Range | - | - | - |
| A | Anchor | href (jump address) | Property: Download Value:filename Description: Specifies the hyperlink target to be downloaded. Properties: Media Value:media_query Description: Specifies which media/device the linked document is optimized for Property: Type Value:MIME type Description: Specifies the MIME type of the linked document |
1. If you do not use the href attribute, you may not use the following properties: Download, Hreflang, media, rel, target, and type property 2. The linked page is usually displayed in the current browser window unless you specify another target (target property) 3. CSS to set the style of the link |
| P | Paragraph | - | - | - |
| Form | Form | Action (form submission address) | Property: AutoComplete Value: On/Off Description: Specifies whether the auto-complete function of the form is enabled Property: Novalidate Value: Novalidate Description: If you use this property, the form is not validated when it is submitted |
A FORM element is a block-level element that produces a folded line before and after it |
| H1~h6 | Title | - | - | - |
| Ul | Unordered list | - | - | Use CSS to define the type of list |
| Li | List items | - | - | Use CSS to define the types of lists and list items |
| Img | Image | SRC (the address of the displayed picture) | - | 1. Technically, tags do not insert images into a Web page, but instead link images from a Web page. The tag creates a placeholder space for the referenced image 2. There are two required attributes: SRC attribute and alt attribute (alt= "text" If the image cannot be displayed, the browser will display alternate text) |
| Input | Used to collect user information | Type (types) | ||
| Iframe | Inline frame | SRC (the address of the displayed document) | Properties: Sandbox Value: ""/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation Description: Enable a series of additional restrictions on content in <iframe> Property: Seamless Value: Seamless Description: Rules <iframe> looks like part of a document Property: Srcdoc Value:html_code Description: Specifies the HTML content of the page displayed in <iframe> |
You can place the required text between <iframe> and </iframe> so that you can deal with browsers that cannot understand the IFRAME |
Note: "-" indicates no change of interpretation. New attributes in H5, application is not very frequent
2. Common block elements
Block elements, which occupy rows, such as DIV,P,H1~H6, each with a single row of block tags
3. Common inline elements
Inline elements (inline elements), which do not occupy rows, such as Input,span,a, will be displayed together on the same line
4. Common list elements
4.1. Concept
<ul> (unordered): unordered list, so the list items that the element contains are displayed in a bold dot
<ol> (ordered): There are sequence tables, so the list items that the element contains are displayed in sequential numbers
<li> list item: Item,<li> element is included in the <ul> or <ol> element
4.2. Demo
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>List</title></Head><Body> <H2>An unordered list</H2> <ul> <Li>Coffee</Li> <Li>Tea</Li> <Li>Milk</Li> </ul> <HR> <H2>An ordered list</H2> <ol> <Li>Coffee</Li> <Li>Tea</Li> <Li>Milk</Li> </ol></Body></HTML>
5. Common table elements
5.1. Concept
The table is defined by the <table> tag. Each table has several rows (defined by the <tr> tag) and each row is split into several cells (defined by the <td> tag)
5.2. Demo
<TableBorder= "1"> <TR> <th>SpongeBob SquarePants</th> <th>Conan</th> </TR> <TR> <TD>Good boy</TD> <TD>Clever Boy</TD> </TR> </Table>
HTML Common tag elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
