Basic HTML syntax

Source: Internet
Author: User
Tags table definition
Basic HTML syntax

Although there are already many ready-made HTML editors that can be used, you do not have to write your own HTML files.
The reasons for writing HTML files are:

1. Currently, the HTML standard is being improved, while the ready-made HTML editor does not necessarily keep up with the trend of HTML.
2. We can see that the structure of the HTML file compiled in the HTML editor is quite messy, because during the editing process,
The editor does not really care about the user's editing requirements. After the results are modified repeatedly, a lot of garbage is left.
3. compile your own HTML file to add new HTML development at any time without being limited by the editor.

4. html is a very interesting language that can reflect your thoughts on the Internet.

HTML statement features:

1. Most HTML statements are in the <tag> </Tag> structure. <tag> indicates opening a tag, </Tag> indicates
Close the tag. However, some statements only start with the description, but do not end with the description, as shown in <p>

2. The text is case-insensitive in HTML.

3. All statements can be nested cyclically, but note the nesting symmetry.


<H3> <center> ....... </H3> </center> This writing method causes compilation errors.

I. Basic Structure of HTML documents

L HTML: Each HTML document must start with opening the HTML Tag and end with closing the HTML Tag.


L header: This part contains the document title, script used by the document, style table definition, and other information.
To include the search tool and other information required by the index. The header must be included in the

1. The text contained in <title> </title> is the HTML topic, which is displayed in the title bar of the window.

2. <meta> mark, which can set the webpage encoding, automatically refresh the webpage, and set the webpage expiration Value

U <meta name = "author" content = "……">

U <meta name = "keyword" content = "...">

U <meta http-equiv = "expires" content = "mon, 15 Sep 2003">

U <meta http-equiv = "refresh" content = "10", url = http: // yourlink ">

U <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"

L text

<Body> </body> describes the subject content of the HTML file.

Background = "graphic name" background Graphic File
TEXT = # rrggbb text color (generally black #000000)
Link = # rrggbb link flag text color
Vlink = # rrggbb has the color of the hyper-connection part, which is the alink color after the dot
Alink = # rrggbb already linked logo text color
Onload = "extended function call String" used together with <SCRIPT>
<-Text-> text is a descriptive text and annotation.
<SCRIPT> </SCRIPT> describes an extension language. Where: Language = "JavaScript" describes the following as ja
Va Language

Ii. Word body

<HY> </HY> (y = 1-6) indicates the title text of each level. If y = 1, the maximum font size is displayed. If y = 6, the minimum font size is displayed. Where:

Align = default to left)
= Center Center
= Right to right
<Caption> </caption> display title text (usually used for table display)
<Font> </font> font size setting (Netscape only), where:
Size =-4 ~ + 4 set the font size to basefont.
Color = # rrggbb font color (R, G, B)
<Basefont> </basefont> set the basic font (nescape only), where: size = 1-6

Iii. font changes

Italic (oblique) Font:
<I> </I> italic <em> </em> highlight <cite> </CITE> references to paragraphs and titles
<Var> </var> indicates variable content (such as file name)
Bold (black) Font: <B> </B> bold <stront> </strong> enhanced font,
Fixed width font (COMPACT) Font:
<Tt> </tt> compact words (Printer Font)
<Code> </code> compact words
<SAMP> </SAMP> sample word
<KBD> </KBD> displays the key name on the keyboard.
Other font modifiers: <u> </u> underline <blink> </blink> flashing
Special characters: (list in CERN) <>> &&&""
"Ön ± è @ (C) (Netscape only)
; (Netscape only) Non-interrupted Spaces

Iv. CIDR Block

<P> the end of the paragraph. <P> </P> indicates that the text in the paragraph is the same paragraph, and the paragraph is displayed in several rows.
The branch location is determined by the browser's window width, which can adapt to any width of the window. Where: align = default to left (
Left) = center = right to right
<Br> Add a carriage return on the page.
<HR> displays a horizontal dividing line. Among them: (The following Netscape only)
Size = n height points
Width = n width points = n % width? ** Is it easy to chat?
Align = default = left to left = right to right
<Center> </center> indicates that the content is displayed in the center aligned. (Netscape only)
<PRE> </PRE> pre-defined text format (preformatted text) in which the text interval, line jumping, and blank are original
The data is displayed in the input format.Program. Other annotations can also exist in <PRE>.
<BLOCKQUOTE> </BLOCKQUOTE> block reference settings. The text content is more indented than other words.

<Address> </address> address area. It is usually placed at the end, containing an email address to inform the author of this page.
It is displayed in italics.
Section examples

5. Link

<A> </a> link tag. In the meantime, text (image) will be displayed and differentiated by link color and underline
. Where:

Name = "position" indicates href = "# position" at position on the page, indicating the link to the current page posi
Name = "FILENAME # position" link to the position of the filename file using the complete filename.html "Chain
Receives the specified filename page.
The specified image format is GIF, tief, JPEG, RGB, and HDF.

Name = "Scheme: // host-domain [: Port]/path/filename" link to the specified page SC of the specified host
Heme is the host-domain such as HTTP and FTP. For the server name port, heme is the port number that provides this service. The default value is 80,
Vi. Image

</img> displays the image. Where:
Align = bottom default text under the image
= Middle in the middle = top in the top
Src = "image name" Image File
Alt = "text" image alias. If the image is not displayed, it is displayed in the dotted box.
Width = n width points = n % percentage of area displayed

Height = n height points = n % percentage of area displayed
Border = N number of Border thickness points
Hspace = "image name" horizontal space (Netscape only)
Vspace = "image name" vertical space (Netscape only)
Ismap indicates that this image is a map.
Usemap = "# name" to get a map name for this image
<Map> </map>. Where: Name = "name" is specified by the Map Name in
<Area> </area> area selection. Used in <map>, where:
Shape = rect rectangular area, just provide the diagonal coordinates (x1, Y1, X2, Y2 ),
= Polygon: coordinates of each vertex of the polygon (x1, Y1,..., xn, yn)
Coords = x1, Y1,..., xn, yn coordinate value (10 hexadecimal)
Href = link object (see <A>)
Image example

VII. column table

The following sorting can be integrated and nested to form a hierarchical arrangement.

unnumbered lists is added before each line of text
  • , the START will show "●", "□"," ■ ", and so on. The specific display is determined by the specific browser.
    the ordered Order (numbered lists or ordered lists) is added before each line of text.
  • , start with a number.
  • Start of each line of text.
    descriptive lists
    shows the topic of the statement.
    shows the description content, which is smaller than the
    content. In
    , You can package
    other link content.
    shows the list. Each line can contain up to 20 characters. Add
  • to each line of text.
    display menu. Add
  • to each line of text.
    8. input box (input table)

  • indicates an input table. This is the important way to send feedback or interactive operations from a browser to the server
    . Where:
    method = get information from the server
    = post sends table information to the server
    action = "CGI-program" CGI-Program is an executable program on the server., the interface standard is CGI (C
    ommon Gateway Interface). It will process the table filling information sent by the browser. Multiple
    elements can be used in the table, such as input boxes, lists, and buttons.
    select the input box or button. In . Where:
    size = N input box or button size
    name = "name" variable name easily recognized by CGI-Program
    type = "type" type (see below)
    = text input box, with only one line
    = password input box. The entered information is not displayed.
    = checkbox confirmation box ([] or [x])
    = radio circle button. Only one
    = submit send button can be pressed for multiple radio circles with the same name. After pressing the button, the filled form is issued.
    = reset button, after pressing, reset all components to the default value
    = image
    = hidden
    value = "value" default value (see below)
    = string for text and password
    = on/off for checkbox and Radio
    = display string for submit and reset
    indicates a text input box that can be input in multiple rows. The text content is the default
    text input box content. Where:
    name = "name" variable name
    rows = N number of lines in the input box
    Cols = N number of columns in the input box
    displays a selection list. Add before each line of text. Where:

    Name = "name" variable name
    Size = 1 displays an * option menu> = 2 displays a scrolled list Si
    Ze indicates the number of rows displayed in the list.
    <Option> </option> Start of each row list. Used in <SELECT>.
    9. display table

    <Table> </table> shows two-dimensional tables. Where:
    Border = N number of points in the three-dimensional Border thickness of a two-dimensional table
    Width = n width points = n % width? ** Is it easy to chat?
    Cellpading = N refers to the distance between the frame and the element boundary in the table.
    Cellspacing = number of space points between each item in N table, including horizontal and vertical.
    <Tr> </tr> Add <tr> (Text row) at the beginning of each row in the table ). Where:
    Align = Center Align
    = Left
    = Right to right
    <TH> </Th> Add <TH> (Text head) to the beginning of each type of item in the table, which is displayed as a black character.
    <TD> </TD> Add <TD> (text data) at the beginning of each project in the table ). Where:
    Width = n width points
    = N % width? ** Is it easy to chat?
    Halign = Center Align
    = Left
    = Right to right
    Valign = top on top
    = Middle is in the middle
    = Bottom:

    Trackback: Postid = 805063

    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: 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.