Html Learning Note from a beginner

来源：互联网发布：审判者极速踢腿宏编程编辑：程序博客网时间：2024/06/08 04:57

introduction

This is an article for myself as a beginner to learn how to write HTML.
Served as a database to list all the functions of some common tags and its usage.

File form

.html & .htm

Software

Dreamwaver
Sublime Text

Content

Beginnig and Ending

< html> content < /html>

Mark the beginning and the ending of a web page
In a Single web page, these two marks must be the first line and the last line.
It must be a close loop.

content

can define the main body of this page.

<head> content </heard>

This pair of tags defines basic header of this page.

content

Can define variety information, such as author, data, updates, compatibility. etc.

Body

<body> content </body>

Like the tags above, This must be a close one.
Can add decoration in the body.
decoration examples
- bgcolor="blue"
  - defines the background color
- text="pink"
- defines the front text color
Be able to define variety things in the content.

Example**
**Some format will not work on this blog editor but it works fine in the html file and dreamweaver.
Code

<body bgcolor="green" text="blue"> Example</body>

Words

<font> content </font>

The basic tags that defines words on the web page
Decoration examples
- Size=”7”
  - defines the text size
- Color=”blue”
  - defines the text color
- Face=times new roman
  - defines the text fonts
Example
Code

<font size=”10” color=”black”> Example</font>

<b> content </b>

a tag used for words to define bold

<i> content </i>

a tag used for words to define italic

<u> content </u>

a tag used for words to define underline

Example
Code

<font size=”10” color=”black”><i><b><u> Example</u></b></i></font>

<h1> content </h1>

a tag used for words to define different levels of head lines

Example Head 1

Example Head 2

Example Head 3

Example Head 4

Example Head 5

Example Head 6
Code

<h1>Example Head 1</h1>
<h2>Example Head 2</h2>
<h3>Example Head 3</h3>
<h4>Example Head 4</h4>
<h5>Example Head 5</h5>
<h6>Example Head 6</h6>

Image

<img src="image" />

This tag used for displaying the image on web page.
Mark: Only one tag is used. use /> to mark the end if this tag.
Also decorations can be used in this tag.
- src=”link to image” //define the image path that will be displayed. This path can be a local image or a link to a online picture.
- alt=”words” //the words in “” will be displayed when the image failed to load.
- title=”words” //the words will be displayed when the mouse move on the image. More like a introduction message.

Moving Slogans

<marquee> content </marquee>
- This tag defines a box that contains moving words.

Decorations is rather complex in this tag.
- behavior
  - <marquee behavior=”alternate”>
    - The scroll type that can display the words in the way that moving from one edge to another edge, repeatedly.
  - <marquee behavior=”scroll”>
    - The scroll type that moves continuously the words towards one direction.
  - <marquee behavior=”slide”>
    - The scroll moves the words from right side to left side and stops at the left end.
- scrolldelay=”5”
  - Set the scroll delay as the words move.
- width="400"
  - Set the display width of this box.
  - Unit: pixel
- Bgcolor="black"
  - The background color for this moving area.
- Onmouseover="this.stop()"
  - when the mouse moving on the area, run the function after =. Works more like the mouse listener in JAVA.
- onmouseout="this.start()"
  - when the mouse moving out the area, run the function after =. Works more like the mouse listener in JAVA.
Example
Code

<marquee behavior="slide" scrolldelay="10" width="400" bgcolor="#cccccc" onmouseover="this.stop()" onmouseout="this.start()"> Example </marquee>

Music and Video

<embed src="music"></embed>

This tag gives web the main way to embed a music or a online video.
Decorations are complex and optional. Will be introduced in examples.
Music embed example code:

<embed src="Maroon 5 - Animals.mp3" autostart="true" loop="true" width="400"/></embed>
- src="source"
  - This gives the source address of the music.
  - The music on the local computer or on the web can both be used as source.
  - The local music need to be added in the folder and uploaded on to the server.
- autostart="true"
  - This indicates whether the music will start automatically.
- loop=”true”
  - This defines whether the music will play again after the end.
  - “true” means playing infinitely.
  - “3” and other number indicates how many times the music will play before it stops.
- Width=”100”, height=”100”.
  - This defines the window size of this music player.
  - Also work on video player.
Video embed example code:

<embed src="http://player.youku.com/player.php/sid/XOTQzNTg5NTE2/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
- This piece of code generated from youku.com, automatically.
- Some decoration explains itself. The others will be explained later.

Paragraph and New Line

<p>A single line </p>

This pair of tags defines a single paragraph.
All the content after this tag will start a new line.

The first paragraph
The second paragraph
Code

<p>The first paragraph</p><p>The second paragraph</p>

<br>

This tag uses at the end of one paragraph.

The first line
The second line.
Code

The first line <br> The second line.

Hyperlink

<a href="link" target="_top"> content </a>

A tag that can hold hyperlink, a gate to another page, picture or video.
In content, words and images can be filled in.
Other content also can be added in the content, like table, list, etc.
Decorations list:
- href="link"
  - Link gives the hyperlink to a new web page.
- target:
  - 当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 “view_window”，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 “view_window” 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。
  - target="_blank"
    - 浏览器总在一个新打开、未命名的窗口中载入目标文档
  - target="_self"
    - 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
  - target="_parent"
    - 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
  - target="_top"
    - 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

Anchor

<a href="#001"> Transport Gate</a>
<a name="001"></a>

These two lines defines in the same page to works as a Anchor.
#001 marks a location on the web page that has defined by name=”001”.
After click the tag, browser will jump to this location.

Click THIS to jump to the head of this page.
Code:

Click <a href="#head">***THIS*** </a> to jump to the head of this page.

List

Ordered List

All the item in the list has a ordered number.
Example:
1. List Item One
2. List Item Two
3. List Item Three
Code

<ol> <li>List Item One</li> <li>List Item Two</li> <li>List Item Three</li> </ol>

Unordered List

All the item in the list will entitled with dot. No Numbers are added ahead.
Example
- List Item One
- List Item Two
- List Item Three
Code

<ul> <li>List Item One</li> <li>List Item Two</li> <li>List Item Three</li> </ul>

Description List

This kind of list is more like a self defined list.
Contains two parts: terms and descriptions.
Example

Terms one

Discriptions one

Terms two

Discriptions two
Code

<dl> <dt>Terms one</dt> <dd>Discriptions one</dd> <dt>Terms two</dt> <dd>Discriptions two</dd> </dl>

Table

<table>
<tr>
<td> Content00 </td>``<td> Content01 </td>
</tr>
<tr>
<td> Content10 </td>``<td> Content11 </td>
</tr>
</table>

This tag defines a table with rows and columns.
The number of rows and columns are defined in the code as different table cells.
varieties of decorations can be added inside the table tag.
- border="2"
  - defines the table border in the unit of pixels.
- width="100" or width="90%"
  - defines the table width.
  - number indicates the width in a fixed length.
  - percentage indicates the ratio of the table width against the browser width.
- rules:
  - rules="all"
    - keep both row and column table lines.
    - Example:
      000102 101112 202122
    - Code
      
      <table align="center" rules="all" border="1" width="50%"> <tr> <td>00</td><td>01</td><td>02</td> </tr> <tr> <td>10</td><td>11</td><td>12</td> </tr> <tr> <td>20</td><td>21</td><td>22</td> </tr> </table>
    - rules="rows"
    - keep the row table line and disappear the column table line.
    - Example:
      000102 101112 202122
    - Code
      
      <table align="center" rules="rows" border="1" width="50%"> <tr> <td>00</td><td>01</td><td>02</td> </tr> <tr> <td>10</td><td>11</td><td>12</td> </tr> <tr> <td>20</td><td>21</td><td>22</td> </tr> </table>
  - rules="cols"
    - keep the column table line and disappear the row table line.
    - Example:
      000102 101112 202122
    - Code
      
      <table align="center" rules="cols" border="1" width="50%"> <tr> <td>00</td><td>01</td><td>02</td> </tr> <tr> <td>10</td><td>11</td><td>12</td> </tr> <tr> <td>20</td><td>21</td><td>22</td> </tr> </table>
  - rules="none"
    - disappear all the table line.
    - Example:
    000102 101112 202122
    - Code
    <table align="center" rules="none" border="1" width="50%"> <tr> <td>00</td><td>01</td><td>02</td> </tr> <tr> <td>10</td><td>11</td><td>12</td> </tr> <tr> <td>20</td><td>21</td><td>22</td> </tr> </table>
- Cellpadding="5"
  - defines the distance from the table cell to table edge.
- cellspacing="5"
  - The distance between cells.
- align="center" or align="left" or align="right"
  - define the align of this table.
<tr></tr>
- row tag. Short of table row.
<td></td>
- column tag. short of table description.
- colspan="2"
  - define that how many columns that this table cell will occupy.
- rowspan="3"
  - define that how many rows that this table cell will occupy.

Form

<form method="get" action=""> content </form>

Form is a kind of container that hold varieties of data and submit them to another page or back-end to process.
Method
- method="get"
  - get will shows the data that will be passed by in the address line of your browser.
- method="post"
  - Post will not show anything on the browser. It is an invisible mode for username and password.
Action
- The value will be the target for the data in this form.
- Leave it blank will direct it into this page itself.
- Leave it to some webpage file will give data to that page and make it processed.
Content
- <input type=”text” name=”OptionalName” value=”01” name=""/>
  - This is a single tag. End with />.
  - Use different types to define different forms of data.
  - name is like a mark to distinguish the data.
- type="text"
  - A single line text area that will hold words. Used in username or something like that.
  - Decoration list
    - Maxlength="10"
      - Define the max length of characters of this block.
    - Minlength="4"
      - Define the minimum length of characters of this block.
    - Size="5"
      - Define the display size for this block.
    - Value=""
      - Words or numbers can be filled in to initialize the box.
- type="password"
  - A single line text that will hold password.
  - The words in that area will not be displayed. That will only shows … to cover the content.
  - Decoration list
    - Maxlength
    - Minlength
    - Size
    - Value
- type="radio"
  - Single selection area
  - All the radio with the same name will only be chosen one item.
  - Decoration list
    - Checked="checked"
    - Value=""
      - The value will be carried with this part to be passed to target.
- Type="submit"
  - A button that will submit all the data in this form to that target file that defined in action of form.
  - Value="words"
    - - Words will displayed on the top of this button.
- Type="checkbox"
  - This is a button to manage multiple selections.
  - Value
- Type="textarea"
  - This defines a area to write words.
  - height=""
    - Define height of the text box as how many words it can display in a column.
  - width=""
    - Define width of the text box as how many words it can display in a row.
- Type="file"
  - A button that can be used to upload a file
- Type="button"
  - A functional button that need to be defined.
  - Its function will be defined in back-end.
  - Value
    - The words displayed on this button.
- Type="reset"
  - A button will reset all the content of this form
- Type="image"
  - A image that will work like a submit button.
  - Scr="source"
    - Source is a link or an address that points to some image file or web image file.
    - Defines the image displayed on this button.

<select name=””>content</select>

This works as a drop-down list.
With varieties of decorations.
Content
- <option value="one">option1</option>
  - The value “one” will be passed when choose this option.
- <option>defalutOption</option>
  - The option can be leave without value, like the default option,
    ----please choose---

0 0

Html Learning Note from a beginner

introduction

File form

Software

Content

Beginnig and Ending

content

Header

content

Body

Words

Example Head 1

Example Head 2

Example Head 3

Example Head 4

Example Head 5

Example Head 6

Image

Moving Slogans

Music and Video

Paragraph and New Line

Hyperlink

Anchor

List

Ordered List

Unordered List

Description List

Table

Form