HTML Learning Summary

Last Update:2017-06-04 Source: Internet

Author: User

Tags code tag tag name

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

HTML Learning Summary

HTML:hypertext Marked Language

Hypertext Markup Language , which is a simple markup language used to make hypertext documents. The Hypertext Transfer Protocol specifies the rules and actions that the browser follows when it runs an HTML document .

Creating an HTML document requires two tools, an HTML editor, and a Web browser.

The HTML editor is an application for building and saving thml documents.

A Web browser is a client program used to open a Web page file that provides us with a view of the Web resource.

<HTML></HTML> in the outermost part of the document, all text and HTML tags in the document are included, which indicates that the document was written in Hypertext Identification Language (HTML).

<HEAD></HEAD> is the header tag of the HTML document, in the browser window, the header information is not displayed in the body , in this tag can be inserted into other tags , Used to describe the title of the file and some common properties of the entire file.

<title> and </title> are nested in the <HEAD> header tag, and the text between the tabs is the document title, which is displayed in the title bar of the browser window

<BODY> </BODY> tags are generally not omitted, the text between the tags is the body, is the content of the page to be displayed in the browser

HTML tags are divided into single labels and pairs of labels two

Paired Tags:< tag name > </tag name >

Individual Tags:< tag name >

< tag name attribute 1 Property 2 Property 3 ... > Content </tag name >

As a general rule, most attribute values are not enclosed in double quotes. However, attribute values for special characters, including spaces,% numbers, # numbers, must be enclosed in double quotes. For good habits, it is recommended to add double quotes to attribute values. Such as:

<font color= "#ff00ff" face= "Arial" size= ">" Font settings </font>

Editing of text layout

3-1 Line Wrap <br> single label

3-2 Changing paragraph labels <p> individual, paired

Format:

<P>

Where ALIGN is a property of the <p> tag , the attribute has three parameter left,center,right. These three parameters set the alignment of the left , Middle , and right positions of paragraph text .

3-3 display text labels as-is <pre> paired,

3-4 Center Align Labels <center> paired labels

3-5 Citation Labels (indent labels)<blockquote>

</BLOCKQUOTE>

</BLOCKQUOTE></BLOCKQUOTE>

</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>

3-6 Horizontal Divider Labels

3-7 The text displayed between the signature tags <address> <address></address> tags is italicized.

3-8 Special Characters

Note:&copy is the circle before the copyright notice

3-9 Comment Label

<!--the contents of the note--

Content of <! notes >

3-10 Font Properties

3-10-1 Title label format:

Description: Thetext between

align property is used to set the alignment of the caption, whose parameters are left, enter (middle ), and right. The

Text Format control tags <FONT>

3-10-2 <FONT> tags for controlling font, size and color of text

3-10-3 specific Text style labels

A physical type label

Bold label <b >

The text that is placed between the <b> and </b> tags is displayed in bold form.

Italic labels <i>

The text that is placed between the <i> and </i> tags is displayed in italic form.

Underline labels <u>

The text that is placed between the <u> and </u> tags is displayed in the following way.

b There are eight types of logical type tags commonly used, and the text placed between the tags is controlled by it.

EM Tags:<em> text for emphasis, generally shown in italics </em>

Strong tags:<strong> text for special emphasis, shown in bold </strong>

cite tags:<cite> for citations and examples, usually italic </cite>

Code tag:<code> is used to indicate that this is a set of codes </code>

Small Tags:<small> Specify text to display in small characters </small>

Big tag:<big> Specifies that the text is displayed in large characters </big>

Samp Tags:<samp> displays fonts commonly used in a computer, that is, fonts with equal widths </samp>

KBD Tags:<kbd> input text by the user, usually displayed as a thicker wide body word </kbd>

var tags:<var> used to represent variables, usually shown in italics </var>

DFN Tags:<dfn> represents a definition or description, usually shown in italics </dfn>

sup tag:12<sup>2</sup>=144

Sub Tags: ferrous sulfate molecular formula is fe<sub>2</sub>so<sub>4</sub>

Create a list

4-1 Sequence-free table <UL>

Format 1:

<UL>

<LI> the first

<LI> Second Item

<LI> the third

</UL>

Format 2

<ul>

<li type=disc> First Item

<li type=circle> Second Item

<li type=square> Third Item

</ul>

Properties of <LI> type

Disc Solid Garden

Circle Hollow Garden

Square Small Square

4-2 sequence list <OL>

The use format of the sequence and unordered lists is basically the same, it uses the label <ol></ol> <li> is used before each list item . The result of the <ol> list is the number with the order of the front and back. If you insert and delete a list item, the numbering is automatically adjusted.

4-3 nested lists

4-4 defining a tag for a list <DL>/<DT>/<DD>

<dl>

<dt> Item 1 <dd> Note 1

<dt> Item 2 <dd> Note 2

<dt> Item 3 <dd> Note 3

</dl>

The first layer is the list item label <DT> the second layer is the annotation item label <DD>. <DT> and <DD> tags are usually used in pairs.

4-5 directory list <DIR> and menu list <MENU>

Format 1:

<dir>

<li> the first

<li> Second Item

<li> the third

</dir>

Format 2

<menu>

<li type=disc> First Item

<li type=circle> Second Item

<li type=square> Third Item

</menu>

Processing of images

5-1 setting of background image

5-2 inserting picture tags in web pages

format and general property settings:

5-2 set up and down left and right blank position hspace/vspace

5-2-3 setting calligraphy and painting to its way

Alignment of the Image:

1) in a single row, put in <p> </p>, set with <p> alignment properties.

2) Set the vertical alignment of the image with the text on the same line as the text, with its own align property (top,middle,bottom). Where:bottom is the default value.

3) When the picture is mixed, the left and right wrapping text of the image can be realized, with the align attribute (left image is on the right, the text is on starboard ).

<p>

5-2-4 picture size setting

5-2-5 setting of Image border

Create a hyperlink

Create a hyperlink tag for <A> and </A>

Format:<a href= "resource address " target= "window name " title= "point to Connection display text " > hyperlink name </A>

The attribute "HREF" defines the destination address that the link refers to, and the destination address is the most important, and once the path is wrong, the resource cannot be accessed

Target: This property is used to specify the target window of the open link, which is the default way of the original window.

Setting the properties of the target window

Property value Description

_parent is opened in the previous level window, and frames pages that are typically used by a frame are often used

_blank opens in a new window

_self open in the same frame or window, this general does not need to set

_top Open in the browser's entire window, ignoring any frames

Title: This property specifies the caption text to display when pointing to the link

TABLE

In an HTML document, a table is done with a <table>,<th>,<tr>,<td> tag .

7-2 (2) Set the display status of the divider rules

7-2 (3) table border display status frame

7-3 setting of table rows

<TR> parameter setting (Common):

<tr align= "Right" valign= "middle" bgcolor= "#0000FF" bordercolor= "#FF00FF"

bordercolorlight= "#808080" bordercolordark= "#FF0000" >

7-4 setting of cell

<th> and <td> are the tabs that insert cells that must be nested within the <tr> tag. It's in pairs.

7-7 table title tags <caption>

Dynamic and multimedia effects of web pages

8-1 scrolling subtitles <marquee>...</marquee>

8-2 inserting a multimedia file

Embed background music

Make music a link, just click on it with the mouse, you can listen to music

Multi-view window frame

Syntax format:

......

Can do navigation

Floating window <iframe>

Marginwidth= "1" marginheight= "1" frameborder= "1" scrolling= "Yes" >

Form

Forms are used in Web pages to fill in information for visitors, so they can collect client information and make the Web page interactive. In general, the form is designed in an Html document, when the user completes the information after the submission (submit) operation, so that the contents of the form from the client's browser to the server, after the server on the ASP or CGI processing program processing, The user's required information is then transferred back to the client's browser, so that the Web page is interactive.

Forms <form></form>

Properties action method and target

Form action= "URL to receive form information ", if this property is a null value ("") then the URL of the current document will be used

Method

Get mode is the handler that gets the data from the current Html document

Post the current Html document to send the data to the handler

Target is used to specify the destination window or target frame. Optional Current Window _self, parent window _parent, top-level window _top, blank window _blank.

Write tags <input>

Common Properties:

1 Name Control

2 type control types such as:Botton normal button,texe text box, etc.

3 Align Specify alignment , preferably top, bottom, Middl

4 size Specifies the width of the control

5 value to set input default value

6 MaxLength The maximum number of characters allowed to enter in a single line of text

7 src Insert Address of image

8 event Specifies events to fire

Menu drop-down list box <select></select><option>

Multiple lines of text box .<textarea></textarea>

HTML Learning Summary

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.

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