HTML-Basic Knowledge

See w3school/html

1. HTML element syntax

• The HTML element usesStart tag

  Start

• The HTML element usesEnd tag

  Termination

• Element Content

  Is the content between the start tag and the end tag.

• Some HTML elements haveEmpty content)
• Empty ElementClose in start tag

  (End with the end of the start tag)

• Most HTML elements can haveAttribute

Note: end tags cannot be omitted in future HTML versions. W3school uses lower-case tags because the W3C is in HTML 4.Recommendation

Use lower-case letters, and in future (x) HTML versionsForce

Use lower-case letters.

2. html attributes

HTML tags can haveAttribute

. Attribute provides HTML elementsMore information

.

Attributes always appear in the form of name/value pairs, such:Name = "value"

.

Attribute is always in the HTML ElementStart tag

.

 

Note: attributes and attribute values are case sensitive.Insensitive

. However, the World Wide Web Alliance recommends lower-case attributes/attribute values in its HTML 4 Recommendation Standard. XHTML requires lower-case attributes/attribute values.

 

Attribute values should always be enclosed in quotation marks. Double quotation marks are the most commonly used, but it is no problem to use single quotation marks.

.

 

HTML 4.01/XHTML 1.0 Reference Manual

3. html title

By default, HTML automatically adds an extra blank line before and after block-level elements.

For example, before and after a paragraph or title element.

Make sure that the HTML heading label is used only for the title. Do not use titles only to generate bold or large text.

The search engine uses the title to index the structure and content of your web page.

H1 should be used as the title (the most important, Seo practices)

, Followed by H2, followed by H3, and so on.

4. html Section

Tip: it is a bad habit to insert an empty row with an empty section mark <p> </P>. Replace it with the <br/> label!

When the page is displayed, the browser will removeSource code

Extra spaces and empty rows. All consecutive spaces or empty rows are counted as one space.

.

 

5. html Text Formatting example

<PRE> <br/> This is <br/> pre-formatted text. <Br/> it retains spaces <br/> and line breaks. <Br/> </PRE> <br/> <p> pre labels are suitable for displaying computer code: </P> <br/> <PRE> <br/> for I = 1 to 10 <br/> print I <br/> next I <br/> </PRE>

6. html Style

The role of the style attribute:

Provides a common method to change the style of all HTML elements.

Style is introduced in HTML 4, which is a new preferred way to change the style of HTML elements. HTML styles can be directly added to HTML elements by using the style attribute, or indirectly defined in an independent style table (CSS file.

 

In HTML 4, tags and attributes are discarded.

. Deprecated means that tags and attributes will not be supported in future HTML and XHTML versions.

Tag	Description
<Center>	Defines the center content.
<Font> and <basefont>	Define the HTML font.
<S> and <strike>	Define strikethrough text
<U>	Define underline text
Attribute	Description
Align	Define text alignment
Bgcolor	Define background color
Color	Define text color

For these labels and attributes, use style instead!

 

7. HTML link

You can use the target attribute to define where the linked document is displayed.

The name attribute is used to create bookmarks in HTML. Bookmarks are not displayed in any special way and are invisible to readers. When named anchors is used, you can create a link directly to a section on the page, so that users do not need to scroll the page to find the information they need.

8. HTML list

You can use paragraphs, linefeeds, images, links, and other lists within the list item.

And so on.

A custom list is not only a column of projects, but a combination of projects and comments.

The custom list starts with the <DL> label. Each custom list item starts with <DT>. The definition of each custom list item starts with <DD>.

9. html Image

The ALT attribute is used to define a string of prepared replaceable texts for an image. The value of the Replace text attribute is user-defined.

alt="Big Boat">

When the browser cannot load images, replacing the text property tells readers what information they lose. In this case, the browser displays the alternative text instead of the image. Adding Replace text attributes to images on the page is a good habit, which helps to better display information and is very useful for those who use plain text browsers.

10. html background

If you want to use a background image, remember the following points:

• Does the background image increase the page loading time. Tip: image files should not exceed 10 KB.
• Whether the background image works well with other images on the page.
• Whether the background image works well with the text color on the page.
• After the image is tiled in the page, does it look okay?
• Is the focus on text overwhelmed by background images?

<Body> bgcolor

), Background (Background

) And text (Text

Attributes have been deprecated in the latest HTML standard (html4 and XHTML ).

. W3C has deleted these attributes in their recommendation standards.

Use Cascading Style Sheets (CSS)

To define the layout and display attributes of HTML elements.

 

11. html framework

By using the framework, you can display more than one page in the same browser window. Each HTML document is called a framework, and each framework is independent of other frameworks.

Disadvantages of using the framework:

• Developers must keep track of more HTML documents at the same time.
• Hard to print the entire page

Framework Structure tag (<frameset>)

• Framework Structure tag (<frameset>) defines how to split a window into a framework
• Each frameset defines a series of rows.Or

  Column

• The value of rows/columns specifies the area on the screen occupied by each row or column.

Frame)

The frame tag defines the HTML document placed in each frame.

 

Important:

The <body> </body> label and
<Frameset> </frameset> labels are used at the same time! However, if you add
<Noframes> label, the text must be embedded in the <body> </body> label.

 

Stop using style properties within HTML tags.

Use lowercase letters to write tags. Remember to close the tag. Never end a paragraph without the </P> label.

 

12. Verify the HTML file

The HTML document is verified according to the document type declaration. If you want the HTML file to be correctly verified, add the appropriate DTD to the first line of the file.

HTML 4.01 strict DTD

Contains elements and attributes that are not used in opposition or are not included in the Framework:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 transitional DTD

Contains all content in the strict DTD, and elements and attributes used in opposition:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 frameset DTD

Contains all content in the transitional DTD, and supports the framework:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

13. character entity

The character entity consists of one and number (&), one entity name, or #, and one entity number, and a semicolon (;).

To display the minor sign in the HTML document, we need to write as follows:& Lt;

Or& #60;

The most common character entity

Display result	Description	Entity name	Entity ID
	Space	& Nbsp;	& #160;
<	Yu no.	& Lt;	& #60;
>	Yu no.	& Gt;	& #62;
&	And number	& Amp;	& #38;
"	Quotation marks	& Quot;	& Amp; #34;
'	Marker	& Apos; (not supported by IE)	& Amp; #39;

 

Other common character entities

Display result	Description	Entity name	Entity ID
Bytes	Minute	& Cent;	& #162;
£.	Pound	& Pound;	& #163;
¥	Yen	& Yen;	& #165;
§	Section	& Sect;	& #167;
	Copyright	& Copy;	& #169;
	Registered Trademark	& Reg;	& #174;
×	Multiplication number	& Times;	& #215;
Bytes	Division Number	& Divide;	& #247;

 

14. Head label

The elements in the header element are not displayed by the browser.

According to the HTML standard, only a few tags are valid in the HTML header. They are: <base>, <link>, <meta>, <title>, <style>, and <SCRIPT>.

 

<Base> tag

Specify the default address or default target for all links on the page.

Generally, the browser extracts the corresponding elements from the URL of the current document to fill in the blank space in the relative URL.

You can use the <base> label to change the value. The browser will no longer use the URL of the current document, but use the specified basic URL to parse all
URL. These include the URLs in the <A>, , <link>, and <form> labels.

 

<Meta> tag

<Meta http-equiv = "refresh" content = "5; url = http://www.w3school.com.cn"> redirect to a new address

Developers should not use this technology to force users to switch to different pages, because this will make the page availability worse. Instead, server-side redirection should be used for automatic page orientation.

 

Note: <meta> the tag is always inside the head element.

Note: Metadata is always transmitted in pairs by name/value.

 

DTD indicates the DTD in which this attribute is allowed. S = strict, t = transitional, F = frameset.

 

Required attributes

Attribute	Value	Description	DTD
Content	Some_text	Define metadata related to the HTTP-equiv or name attribute	STF

 

Optional attributes

Attribute	Value	Description	DTD
HTTP-equiv	Content-Type Expires Refresh Set-Cookie	Associate the content attribute with the HTTP header.	STF
Name	Author Description Keywords Generator Revised Others	Associate the content attribute with a name.	STF
Scheme	Some_text	Defines the format used to translate the content property value.	STF

 

15. html URL (Uniform Resource Locator)

Syntax Rules:

Scheme: // host. Domain: Port/path/filename

Scheme

DefineType

. The most popular type isHTTP

.

Domain

(Domain) define InternetDomain Name

For example, w3school.com.cn.

Host

(Host) defines the host in this domain. If omitted, the default host that supports HTTP isWWW

.

: Port

(Port) defines the host'sPort Number

. The port number is usually omitted. The default port number is80

.

Path

(PATH) definesPath

(A secondary path ). If the path is omitted, the resource (document) is located in the root directory of the website.

Filename

(File Name) Name of the definition document. The default file name is usually default. asp or index.html, or based on other file names set by the Web server.

The full name of the URL is uniform resource locator ".

 

16. HTML Script

Use the <SCRIPT> label for definition. Note that you can use the type attribute to specify the script language.

 

Methods To deal with earlier browsers:

Javascript:

<MCE: Script Type = "text/JavaScript"> <! -- <Br/> document. Write ("Hello world! ") <Br/> // --> </MCE: SCRIPT>

17. html 4.0 event attributes

One of the new features of HTML 4 is that HTML events can trigger browser behavior.

 

Valid only in the body and frameset elements.

Window events)

Attribute	Value	Description
Onload	Script	Execute the script when the document is loaded.
OnUnload	Script	Run the script when the document is uninstalled.

 

Valid only in form elements.

Form element event (form Element events)

Attribute	Value	Description
Onchange	Script	Execute the script when the element changes.
Onsubmit	Script	Execute the script when the form is submitted.
Onreset	Script	Execute the script when the form is reset.
Onselect	Script	Execute the script when the element is selected.
Onblur	Script	Execute the script when the element loses focus
Onfocus	Script	Execute the script when the element gets focus

 

This attribute can be used for IMG elements:

Image events)

Attribute	Value	Description
Onabort	Script	Execute scripts when image loading is interrupted

 

The following elements are invalid: Base, BDO, BR, frame, frameset, Head, HTML, IFRAME, Meta, Param, script, style, and title.

Keyboard Events)

Attribute	Value	Description
Onkeydown	Script	Execute the script when the keyboard is pressed
Onkeypress	Script	Execute the script when the keyboard is pressed and loose.
Onkeyup	Script	Execute the script when the keyboard is released

 

The following elements are invalid: Base, BDO, BR, frame, frameset, Head, HTML, IFRAME, Meta, Param, script, style, and title.

Mouse events)

Attribute	Value	Description
Onclick	Script	Execute the script when the mouse is clicked
Ondblclick	Script	Execute the script when the mouse is double-clicked.
Onmousedown	Script	Execute the script when the mouse button is pressed
Onmousemove	Script	Execute the script when the mouse pointer moves
Onmouseout	Script	Execute the script when the mouse pointer removes an element.
Onmouseover	Script	Execute the script when the cursor is hovering over an element.
Onmouseup	Script	Execute the script when the mouse button is released