20141116html Basic Knowledge

The Web page Production section mainly explains three major parts:

1. HTML Hypertext Markup Language (full name: Hyper Text Markup Language) specifically edit static Web pages

2, CSS page beautification: HTML control of the style, a part of the format

3, Javascript scripting language: Mainly to write the dynamic effect of the Web page.

The first part of HTML

Hypertext Markup Language is dedicated to writing static Web pages.

1. Open Adobe Dreamwaver CS6

2. Create a new HTML file:

3. Write Web page file:

The simplest way is to write in Notepad

View:

A < > represents a label, the main learning of the page is the label;

The first line of code represents a reference to international standards

The end of the

<title>.....</title> represents the title.

<boby>.....</boby> Intermediate content for writing web pages

Properties in Boby:

1) Backgroud: Whether backgroud or bgcolor in front, bacgroud cover bgcolor.

To modify the background color:

Modify the background map: File path Backward Search Folder, with .../.../.

2) Text: Set The color of the Chinese Boby

3) topmargin= "200" top margin, text distance from the top of the page," " The number of write spacing

4) bottommargin= "" Bottom margin

5) Left: margin

6) Right: margin equal to the length and width of Word

7) hidden= "True" hides entire Web page

8) </br> line change, equivalent to carriage return

9) <strong> Hello </strong></br>--Bold

<center> you good </center>---center

One) &nbsp;--spaces

<b> Hello </b>-Bold

<i> Hello </i>-Tilt

<u> Hello </u>-Add underline

<font>, ..... </font>--Font modification (color, size, font change)

Color= "#CC6699"

Size= "+5"

Face= "Times New Roman, times, serif"---modified in <font >

Second Class

1, processing the text label

1-6 represents the font size

1

<p>.....</p> paragraph, representing a passage

<ol> list (with Sequence table )

<li> Line 1<li>

<li> Line 2<li>

<li> Line 3<li>

<li> Line 4<li>

</ol> (with sequence list)

<ul> (no sequence list )

</ul>

2. Hyperlink:<a href >

target= "Properties" > title 1

target--Open Mode

new/black--Opening a new page

parent--Replace the previous page

self--on its own page open

top--is different when web pages are embedded

3. Attributes of the Picture:

1) <img src= "Image path address " width= "height="/>

2) name--The name of the picture , do not show it

3) width--width setting

4) height--Height setting

5) title--The title of the picture, when the mouse is placed on the picture displayed on the page, the caption of the picture is displayed. Easy search Engine finder.

6) Meaning of the loop--cycle

7) style and format of style--pictures

4. Form (emphasis)

The three essential parts:

1) Beginning and end of table: <table>.....</table >

2) The row:<tr>.....</tr> of the table represents the row

3) Table cell:<td>.....</td> represents cell, no column

Properties of the <table> table:
1>width: Width. Can be expressed in pixels or percentages. Commonly used 960 pixels.

2>border: Border. The common value is 0.

3>cellpadding: The margin between the content and the cell border. The common value is 0.

4>cellspacing: Spacing between cells, with a common value of 0.

5>align: Horizontal alignment.

6>bgcolor: Background color.

7>background: Background image

<tr> Properties of BOC:

1>align indicates horizontal alignment three (top, middle, and bottom)

2>bgcolor indicates background color selection

3>bordercolor color selection for table borders

4>height indicates the height of the row setting

5>hidden Hidden

6>style: styles, formatting changes

7>title changes to the title of the representative

8>valign three types of vertical alignment (top, middle, bottom)

Properties of the <td> cell:

1>align indicates horizontal alignment three (top, middle, and bottom)

2>valign three types of vertical alignment (top, middle, bottom)

3>bgcolor indicates background color selection

4>bordercolor color selection for table borders

5>height indicates the height setting of the cell

6>width: Indicates cell width setting

7>hidden Hidden

8>style: styles, formatting changes

9>title changes to the title of the representative

<th></th> header, cell contents are automatically centered, bold

Align: How the contents of a cell are aligned

valign: Vertical alignment of the contents of a cell

Width: Height of cell

Height: How high the cell is

bgcolor: Background color

Background: Background image

Note: The contents must be in the cell, the cell must be in the row, and the line must be placed in the table. Set row height, column for cell

At high time, the corresponding row or column is affected.

Merging cells (focus): Try nesting in tables as much as possible

Colspan= ' n ' merges the same row of cells (followed by the code to subtract the corresponding column)

Rowspan= ' n ' merges the same column cell (minus the corresponding column starting from the second row)

Create a table:

Code Writing Table:

---colspan=' 2' represents a cell that spans 2 columns

---rolspan=' 3' represents a cell that spans 3 rows

To see the effect:

20141116html Basic Knowledge