Home > Developer > Web Develop

Day47:html (Introduction and common label)

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

First, what is HTML introduction HTML?
    • The Hypertext Markup Language (hypertext Markup language,html) marks individual parts of the page to be displayed in a label language . A set of rules that the browser knows about the rules.
    • The browser renders the Web page file sequentially, and then interprets and displays the content based on the marker. However, it is important to note that for different browsers, the same label may have an incomplete interpretation (compatibility).
    • Static Web page File extension:. html or. htm.

HTML is not a programming language, but rather a markup language (markup language).
HTML uses tag tags to describe a Web page.

HTML structure:

    • <! DOCTYPE Html> tells the browser what HTML or XHTML to use to parse the HTML document.
    • The
    • <title></title> defines the page title, which is displayed in the browser title bar.
    • The text between <body></body> is visible on the page body content
HTML tag format

Syntax for Tags:

< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name >
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" .../>

Second, commonly used label 1, <! Doctype> Label

<! The doctype> declaration is positioned at the front of the document, before the

Function: Declares the parsing type (document.compatmode) of the document, avoiding the bizarre mode of the browser.
Document.compatmode:

    1. Backcompat: Weird mode, the browser uses its own weird mode to parse the rendered page.
    2. Css1compat: Standard mode, browser uses the standard resolution rendering page.

This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, the Compatmode default is Backcompat.

2. Commonly used tags in 1. <meta> Tags

The <meta> element provides meta-information about the page (meta-information), a description of the search engine and the frequency of updates, and keywords.
The <meta> tag is located in the header of the document and does not contain any content.
The information provided by <meta> is not visible to the user.

Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.

(1) name attribute: mainly used to describe the Web page, the corresponding property value of content,content content is mainly for the search engine to find information and classification information.

<name= "keywords"  content= "Meta summary, HTML Meta,meta attribute, meta jump" > <  name= "description"  content= "old boy training institution was created by a very old boy">

(2) Http-equiv property: equivalent to the file header of HTTP, it can send back some useful information to the browser to help correctly display the content of the Web page, the corresponding property value is content, Content is actually the variable value of each parameter.

<Metahttp-equiv= "Refresh"content= "2; Url=https://www.oldboy.com ">//(note the following quotation marks, respectively, before the number of seconds and after the URL)<Metahttp-equiv= "Content-type"CharSet=utf8 "> <Metahttp-equiv= "X-ua-compatible"content= "Ie=emulateie7" />
Non-META tags 
    <title>Oldboy</title>    <Linkrel= "icon"href= "Http://www.jd.com/favicon.ico">    <Linkrel= "stylesheet"href= "Css.css">    <Scriptsrc= "Hello.js"></Script> 　
3. Common label in <body> 1. Basic label ( block-level labels and inline labels） 
" "<HN>: The value range of n is 1~6, from large to small. Used to denote a title.<P>: Paragraph label. The contents of the package are wrapped. And there is a blank line between the contents of the content .<b> <Strong>: Bold label.<Strike>: Adds a median line to the text.<em>: Text becomes italic.<sup>And<Sub>: Upper corner and Lower corner table.<BR>: line break.<HR>: Horizontal Line special characters:&lt; &gt；&quot；&copy;&reg;

Special Symbol detailed table " "
2.<div> and <span>

<div></div>: <div> is just a block-level element that has no practical meaning. It is mainly given a different performance by CSS styles.
<span></span>: <span> represents inline rows (inline elements) and has no practical meaning, and is mainly given a different representation by CSS styles.

The difference between a block-level element and an in-line element
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.

3. Graphic Tags: 
' SRC: The path of the picture to be displayed. alt: The picture does not prompt when it is loaded successfully. Title: Tip Information when hovering the mouse. Width: The height of the picture: high (width height two attributes only one will be automatically scaled.)
4. Hyperlink tag (anchor tag): <a> </a>

A hyperlink is a connection to a target from a Web page, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.

The URL is the abbreviation for the Uniform Resource Locator (Uniform Resource Locator), also known as the Web address, which is the address of the standard resource on the Internet. URL example Http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/intro.htmlURL address consists of 4 parts of the 1th part: for the Agreement:/HTTP, ftp://, etc. Part 2nd: For the site address: can be a domain name or IP address part 3rd: The directory for the page in the site: Stu Section 4: For the page name, for example, index.html the "/" symbol between the sections separated.
What is a URL? 
" " <  href= ""  target= "_blank">click</a > The href attribute specifies the destination Web page address. The address can have several types:    absolute URL-point to another site (such as href= "http://www.jd.com)    relative URL-refers to the exact path in the current site (href=" index.htm ")    anchor URL- Point to the anchor in the page (href= "#top")

5. List label 
" "<ul>: Unordered list [type attribute: disc (solid dot) (default), Circle (empty circle), square (solid square)]<ol>: List with sequence<Li>: Each item in the list.<DL>definition List<DT>List title<DD>list item " '
6. Table Tags: <table>

A table is a two-dimensional data space, a table consists of several rows, a row and a number of cells, cells can contain text, lists, patterns, forms, digital symbols, preset text and other tables and other content.
The most important purpose of the table is to display the table class data. Tabular data refers to data that best fits into a tabular format, which is organized by rows and columns.
The basic structure of the table:

<Table>         <TR>                <TD>Title</TD>                <TD>Title</TD>         </TR>                  <TR>                <TD>Content</TD>                <TD>Content</TD>         </TR></Table>
" " < TR > : Table Row < th > : Table Head cell < TD > : Table Data cell property:    border: Table border.    cellpadding: Inner margin    cellspacing: margin.    Width: Percentage of pixels. (preferably with CSS to set the length and width)    rowspan:  How many rows the cell spans vertically    colspan:  how many columns (i.e. merged cells) the cells span

Day47:html (Introduction and common label)

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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