1- HTML Tutorial From W3Schools

happmaoo

浏览: 4333173 次
性别:
来自: 杭州

最近访客更多访客>>

flyjava

icesort

adamkisy

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-06 ( 10)
2012-01 ( 29)
2011-12 ( 23)
更多存档...

HTML ASP JavaScript CSS XHTML

HTML Tutorial from W3Schools

1. HTML Tutorail 1- HTML Basic

2. HTML Tutorail 2- HTML Advanced

3. HTML Examples

4. Quiz

5. References

PART 1

HTML Tutorail 1- HTML Basic

“Always view the page source to study how the page was built!”

http://www.w3schools.com/html/html_intro.asp

1. Introduction to HTML
2. HTML Elements
1) Use Lowercase Tags

2) Tag Attributes

3) Always Quote Attribute Values

3. Basic HTML Tags
<html> Defines an HTML document

<body> Defines the document's body

<h1> to <h6> Defines header 1 to header 6

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment
4. HTML Text Formatting (尽量使用现成的Tag，而不需要重新定义)
1) Text Formatting Tags

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<<state w:st="on"><place w:st="on">del</place></state>> Defines deleted text

<s> Deprecated. Use <<state w:st="on"><place w:st="on">del</place></state>> instead

<strike> Deprecated. Use <<state w:st="on"><place w:st="on">del</place></state>> instead

<u> Deprecated. Use styles instead
2) "Computer Output" Tags

Tag Description

<code> Defines computer code text

<kbd> Defines keyboard text

<samp> Defines sample computer code

<tt> Defines teletype text

<var> Defines a variable

<pre> Defines preformatted text

<listing> Deprecated. Use <pre> instead

<plaintext> Deprecated. Use <pre> instead

<xmp> Deprecated. Use <pre> instead
3) Citations, Quotations, and Definition Tags

Tag Description

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines an address element

<bdo> Defines the text direction

<blockquote> Defines a long quotation

<q> Defines a short quotation

<cite> Defines a citation

<dfn> Defines a definition term

5. HTML Character Entities
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <

Full list of HTML character entities: http://www.w3schools.com/tags/ref_entities.asp
6. HTML Links <a>

1) The Anchor Tag and the Href Attribute;

2) Target Attribute

3) Name Attribute

4) Useful Tips:

Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href=http://www.w3schools.com/html/

5) Break out of a frame use target=”_top”

7. HTML Frames
http://www.w3schools.com/html/html_frames.asp
8. HTML Tables
Table Tags

Tag Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines groups of table columns

<col> Defines the attribute values for one or more columns in a table

9. HTML Lists

List Tags

Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines a definition term

<dd> Defines a definition description

10. HTML Forms and Input
Form Tags

Tag Description

<form> Defines a form for user input

<input> Defines an input field

<textarea> Defines a text-area (a multi-line text input control)

<label> Defines a label to a control

<fieldset> Defines a fieldset

<legend> Defines a caption for a fieldset

<select> Defines a selectable list (a drop-down box)

<optgroup> Defines an option group

<option> Defines an option in the drop-down box

<button> Defines a push button
11. HTML Images
Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

12. HTML Backgrounds

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>) has removed these attributes from its recommendations.

Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

13.

HTML Colors;

HTML Color Values;

HTML Color Names;

14. HTML 4.01 Quick List
HTML Basic Document

<html>

<head>

<title>Document name goes here</title>

</head>

<body>

Visible text goes here

</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>

<br> (line break)

<hr> (horizontal rule)

<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>

<strong>This text is strong</strong>

<code>This is some computer code</code>

Physical Styles

<i>This text is italic</i>

Links, Anchors, and Image Elements

A named anchor:

<a name="tips">Useful Tips Section</a>

<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>

<li>First item</li>

</ul>

Ordered list

<ol>

<li>First item</li>

</ol>

Definition list

<dl>

<dt>First term</dt>

<dd>Definition</dd>

<dd>Definition</dd>

</dl>

Tables

<tr>

<th>someheader</th>

</tr>

<tr>

<td>sometext</td>

</tr>

</table>

Frames

</frameset>

Forms

<option>Apples

<option selected>Bananas

<option>Cherries

</select>

</form>

Entities

< is the same as <

> is the same as >

Other Elements

Text quoted from some source.

</blockquote>

Address 1<br>

Address 2<br>

City<br>

</address>

Source : http://www.w3schools.com/html/html_quick.asp

PART 2

HTML Tutorail 2 – HTML Advanced

http://www.w3schools.com/html/html_layout.asp

1. HTML Layout
HTML Layout - Using Tables

2. HTML Fonts:

The <font> Tag Should NOT be Used.

The <street w:st="on"><address w:st="on">Right Way</address></street> to Do It - With Styles (with CSS)

3. Why use HTML 4.0?
In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet.

Do not use presentation attributes inside your HTML tags if you can avoid it. Start using styles!

4. HTML Style

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
1) External Style Sheet

2) Internal Style Sheet

3) Inline Styles

5. HTML Head

1) The Head Element:

The head element contains general information, also called meta-information, about a document.

You can say that meta-data means information about data, or meta-information means information about information.

2) only a few tags are legal inside the head section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
3) Head Tags

Tag Description

<head> Defines information about the document

<title> Defines the document title

<base> Defines a base URL for all the links on a page

Tag Description

<!DOCTYPE> Defines the document type. This tag goes before the <html> start tag.

4) One target for all links
This example demonstrates how to use the base tag to let all the links on a page open in a new window.
“<head>

</head>”

6. HTML Meta

description

keywords (since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely)

…

Redirect a user
This example demonstrates how to redirect a user if your site address has changed.

Some user agents support the use of <place w:st="on">META</place> to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects

6. HTML Scripts

Add scripts to HTML pages to make them more dynamic and interactive.

1) Insert a Script into HTML Page (using JavaScript)

2) Handle Older Browsers

A browser that does not recognize the <script> tag at all, will display the <script> tag's content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags.

JavaScript:

<!--

document.write("Hello World!")

//-->

</script>

3) <noscript> Tag

7. HTML 4.0 Standard Attributes
http://www.w3schools.com/html/html_standardattributes.asp

8. HTML 4.0 Event Attributes

http://www.w3schools.com/html/html_eventattributes.asp

Learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

10. HTML URL-encoding Reference
ASCII characters in URL-encoding form (hexadecimal format)

http://www.w3schools.com/html/html_urlencode.asp