Hypertext Markup Language--html

Source: Internet
Author: User

High-end atmosphere on the level of the Web page, low-key luxury has a connotation of the interface, are static Web pages and some dynamic effects, inserted video, and Flash and so on, have to say, static Web page production, is the only way to learn the Web page, static Web page in learning the front end is very important. Static Web pages are mainly made by HTML. In short, HTML is a Hypertext Markup Language, static Web pages are also by, HTML tags and tags in the attributes, to open your favorite Web browser, in the browser address input box to type the relevant URL, into the active Server Pages (your computer should already be connected to the Internet). When this page is displayed on the screen, select the View Source command from the Web browser's menu bar. A new window pops up on the screen and shows some wacky text. The text you see is the HTML file.

The blog small part of the main explanation of the knowledge of HTML, first of all to a mind map, the knowledge of the previous study to do a simple summary and review, and then, the small series will give a few examples, see how the HTML in her stage emotional deduction of her life story, first, look at the picture:


The HTML tag consists of a start tag and an end tag, the start tag is the element name surrounded by parentheses, the end tag is surrounded by parentheses and the element name, some HTML elements do not have an end tag

[HTML]View Plaincopyprint?
  1. <span style="FONT-SIZE:18PX;" ><html>
  2. <head><title> </title></head>
  3. <body>
  4. Jin-Joseph
  5. Li shangyin 's
  6. The 50-chord, one-chord-one-pillar-si-hua year.
  7. Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo.
  8. The Pearl of the Sea Moon has tears, Lantian day warm jade smoke.
  9. Is this a remembrance? It was only then that it was disconsolate.
  10. </Body>
  11. </html></span>

The display results are as follows:


From the above display effect, we can see that the composition of this poem is quite chaotic, and we are writing six lines, why the display of three lines? In the small part here to remind the small partners to notice a problem, in the HTML document, if there are a number of consecutive white space characters (spaces, tabs, carriage return, line wrapping, etc.), the browser will be displayed when the resolution to a space character, in our above-mentioned example, the BODY element of the contents of the carriage return space, Basically are ignored by the browser, so in the browser window, we see the above display effect, if we want this poem to display in a certain format, we need to paragraph control tags, the following small part of the paragraph control tag to design our "brocade" code written as follows:

[HTML]View Plaincopyprint?
  1. <html>
  2. <head><title> </title></head>
  3. <body>
  4. <p align="center">
  5. Jin-Joseph <br>
  6. Li shangyin 's
  7. <hr color = "Blue">
  8. <p align="center">
  9. The 50-chord, one-chord-one-pillar-si-hua year. <br>
  10. Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo. <br>
  11. The Pearl of the Sea Moon has tears, Lantian day warm jade smoke. <br>
  12. Is this a remembrance? It was only then that it was disconsolate.
  13. </Body>
  14. </html>

The display results are as follows:


What you see above is the application of the paragraph control related to the markup of the page display effect, now the small series with a picture to explain in detail how each paragraph is used in this picture:


Next, we use the label associated with the text display in this poem, the code is as follows:

[HTML]View Plaincopyprint?
  1. <html>
  2. <head><title> </title></head>
  3. <body>
  4. <center>
  5. <h2><font color="Red"> </font></H2 >
  6. <b> Li shangyin </b>
  7. <hr color = "Blue">
  8. <p>
  9. <b><i><font color="green" size="3"> 50 strings, One string, one pillar, the year of Si Hua. <br>
  10. Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo. <br>
  11. The Pearl of the Sea Moon has tears, Lantian day warm jade smoke. <br>
  12. Is this a remembrance? It was only then that it was disconsolate. </Font></i></b>
  13. </Center>
  14. </Body>
  15. </html>

The effect appears as follows:


What you see above is the use of the text display related to the markup after the page display effect, specifically described as follows:


In HTML documents, such as non-breaking spaces, carriage returns, and other symbols, HTML reserved characters (for example: ' < ', indicating the beginning of a marker), some special characters that do not exist in the keyboard, such as: copyright symbols, all need to be referenced in order to enter, there are two types of reference in HTML, Character references and entity references, character references and entity references are both a good (&) and end with a semicolon (;), and if you are using a character reference, you need to add a pound sign (#) after the number (&), followed by the decimal or hexadecimal code of the desired character, if you are using an entity reference , after reconciliation (&) to write the character of the mnemonic, next, we use the nonbreaking space, so that the author Li Shangyin at the bottom of the right display, the code is as follows:

[HTML]View Plaincopyprint?
  1. <html>
  2. <head><title> </title></head>
  3. <body>
  4. <center>
  5. <h2><font color="Red"> </font></ H2>
  6. <b> Li shangyin </b>
  7. <hr color = "Blue">
  8. <p>
  9. <b><i><font color="green" size="3"> 50 strings, One string, one pillar, the year of Si Hua. <br>
  10. Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo. <br>
  11. The Pearl of the Sea Moon has tears, Lantian day warm jade smoke. <br>
  12. Is this a remembrance? It was only then that it was disconsolate. </Font></i></b>
  13. </Center>
  14. </Body>
  15. </html>

The effect is as follows:


a non-stop entity contains six characters, then a character to take up a byte, itself HTML is a text document, so an English character accounted for a byte, entered a 10 non-breaking entity space, took up 60 bytes, why achieve our effect, is the author Li Bai in the quiet night think of the bottom of the right display , we added 60 extra bytes and did not use fewer bytes to achieve the same effect. We can do this by using full-width spaces, the code is as follows:

  

[HTML]View Plaincopyprint?
    1. <html>
    2. <head><title> </title></head>
    3. <body>
    4. <center>
    5. <h2><font color="Red"> </font></H2 >
    6. <b> Li shangyin </b>
    7. <hr color = "Blue">
    8. <p>
    9. <b><i><font color="green" size="3"> 50 strings, One string, one pillar, the year of Si Hua. <br>
    10. Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo. <br>
    11. The Pearl of the Sea Moon has tears, Lantian day warm jade smoke. <br>
    12. Is this a remembrance? It was only then that it was disconsolate. </Font></i></b>
    13. </Center>
    14. </Body>
    15. </HTML>

Hypertext Markup Language--html

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.