Web front end base (2): HTML (II)

1. body of related content

1.1 Title Tag: hn

HTML provides <hn> tag series, for modifying tags, comprising: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. <H1> defines the maximum title. Minimum title <h6> defined.

E.g:

< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" /> 
        < title > </ title > 
    </ head > 
    < body > 
        <-! Title tag -> 
        < h1 of > small gray </ h1 of > 
        < H2 > small gray </ H2 > 
    </ body > 
</ HTML >

 

1.2 horizontal Tags: hr

<Hr />: Create a horizontal rule tag in the HTML page, change the definition for the main content.

size attributes: horizontal line height in pixels.

noshade property: no shadow, values, noshade, represents a solid color.

E.g:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 水平线 -->
        <hr />
        <hr size="5" />
        <hr noshade="noshade" />
    </body>
</html>

 

1.3 font tag: font

<Font>: to set font size, font color.

property size: Set the font size. Possible values: the number from 1 to 7. Browser default is 3.

color attributes: Set the font color.

  Color values: #xxxxxx or colorname

    #xxxxxx using red, green, and blue represents the color settings.

      Red, green and blue values ​​are: 00 - ff, here in hexadecimal. (Ff is decimal 255)

      Black # 000000, # ffffff White

      # Ff0000 red, # 00ff00 green, # 0000ff blue

      2 RGB values ​​may be omitted as the same one. For example: # 112233 to # 123 simplification

    colorname use English words to determine the color. red red, blue blue, green green

E.g:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 字体-->
        <font size="7">我最大</font>
        <font color="#ff0000">我最红</font>
        <font color="blue">我最蓝</font>
    </body>
</html>

1.4 formatting tags: b, i 

<B>: bold.

<I>: in italics.

E.g:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 格式化-->
        <b>粗体</b>
        <i>斜体</i>
    </body>
</html>

 

1.5 paragraph tag: p, br

<P>: defined paragraphs. p tags will automatically create some gaps in its front and rear.

a: Insert a single line feed.

E.g:

< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" /> 
        < title > </ title > 
    </ head > 
    < body > 
        <-! Paragraph -> 
        < P > I paragraph. 1 </ P > 
        < br /> 
        < P > I paragraph 2 </ P > 
    </ body > 
</ HTML >

 

1.6 Image tag: img 

<Img>: reference picture in your html page.

src: Specifies the display image URL (path).

alt: alternate text when images can not be displayed.

width: the width of the image set.

height: Defines the height of the image.

Example:

< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" /> 
        < title > </ title > 
    </ head > 
    < body > 
        <-! Display picture -> 
        < IMG the src = "IMG / 1.jpg " alt =" I'm hiding " width =" 200px " height =" 200px " title =" mouse on display " /> 
        < img src =" img / 0.jpg " alt =" I'm hiding. " width="200px" height="200px" title= "Mouse display" /> 
    </ body > 
</ HTML >

 

1.7 List tab: ul, ol

<Ol>: Defines an ordered list.

  type: list type value: A, a, I, i, 1 and so on.

<Ul>: Defines an unordered list.

  type: type of symbol, value: disc solid round, square box, circle hollow circle.

<Li>: define list items. Is <ul> or <ol> subtag.

E.g:

< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" /> 
        < title > </ title > 
    </ head > 
    < body > 
        <-! Tag list -> 
        < UL type = "Circle" >  <! - the "open circle" unordered list display -> 
            < Li > random </ Li > 
            < Li > random </ Li > 
            < Li >Disorder </ Li >
        </ul>
        
        < OL type = "the I" >  <-! Uppercase Arabic numerals number -> 
            < Li > orderly </ Li > 
            < Li > orderly </ Li > 
            < Li > orderly </ Li > 
        </ OL > 
    </ body > 
</ HTML >

 

1.8 Hyperlink label: a 

<a>: label is a hyperlink, to provide a way to achieve access to other locations in the html page.

href: used to determine the need to display the path to the page (URL).

target: to identify ways to open the page href set. Common values: _blank, _self and so on.

  _blank: Open href certain page in a new window.

  _self: default. Replacing the current page using the page href determined.

E.g:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 超链接 -->
        <a href="http://www.baidu.com" target="_self">
            Access Baidu to open the default
        </a><br />
        <a href="http://www.cnblogs.com" target="_blank">
            Access blog park, opened a new window
        </a><br />
    </body>
</html>

Guess you like

Origin www.cnblogs.com/liuhui0308/p/11876342.html