HTML, html tutorial

HTML, html tutorial

Mark

<Hr width = "80%" size = "10px" noshade> // horizontal line length: 80% lines thick: 10px solid line

Character Control Mark

<B>... </B> rough <I>... </I> oblique <s>... </S> Delete <u>... </U> move down
<Tt>... </Tt> telegraph <sub>... </Sub> subscript <sup>... </Sup> superscript <address>... </Address> address
<Big>... </Big> big words <del>... </Del> Delete <ins>... </ins> modify <samll>... </Small> small text <strong>... </Strong> enhanced tone (BOLD) <em>... </em> enhanced tone (skewed)

Format
<Pre>... </Pre> Format the written text!

Reference text
<Blockquote cite = "url">... </blockquote>

<Table> attributes under tags
Attribute name attribute value description
Border pixel sets the edge of the table
Cellspacing pixel/percentage storage grid box width
Cellpadding pixel/percentage data and frame line distance
Width pixel/percentage table width
Height pixel/percentage table Thickness
Align left table (default)
Center table to center
Right table network right
Bgcolor background color of English/Sixteen tables
Background image of the background URL table
The summary string is used to describe table data.
Bordercolor English/Sixteen border color
Bordercolorlight is highlighted on the same border as above.
The dark color of the border above bordercolordark

<Table> border settings under the tag (this attribute must be in the status where the border attribute value is not 0 !)

Attribute name attribute value description
Frame void does not show the edge of the table
As long as the above line of the table appears
Below only shows the bottom line of the table
Hsides only displays the upper and lower edges of a table
Vsides only displays the left and right edges of the table
Lhs only displays the left line of the table
Rhs only displays the right line of the table
Border/box displays all the edges of the table.
Rules rows only displays the grid lines
Cols only displays the grid lines of the direct row
All show all cells
Groups indicates the horizontal part of the column combination.
None

(Single table border: border = 1; border-collapse:Collapse)

<Tr> <th> <td> common attributes under the tag

Attribute name attribute value description
Width pixel/percentage width
Height pixel/percentage high
Bgcolor color of the English/Sixteen data column
Align (horizontal direction) left data to the left
Center data in progress
Right
Valign (vertical) top data goes up
Middle data in progress
Bottom-up bottom data
Nowrap does not wrap in Cells

Split and merge Cells
Attribute name attribute value description
Colspan number to expand the column on both sides
Rowspan number to expand the column down

Column-based format: <colgroup> .... </Colgroup>
Attribute name attribute value description
Align left to left
Center in the middle
Right to right
Valign top up
Middle in the middle
Bottom
Span numeric direct column count
Width pixel/percentage width

Individual Direct column settings

Format: <col> the function is exactly the same as that of <colgroup>.

Table title:
<Table>
<Caption> .... </Caption>
</Table>
<Caption> attribute values include:
Attribute name attribute value description
The title of align top is at the top of the table.
The bottom title is at the bottom of the table.

Add an icon to a website
<Link rel = "shortcut icon" href = "favicon. ico" type = "image/x-icon">

Basic hyperlink format
Format:
Scheme: // host [: post]/path/filename
Scheme refers to http, ftp, file, mailto, news, gopher, and telnet.
Host indicates the IP address or computer name.
Post indicates the server port.
Path indicates the file path.
Filename indicates the file name.
<A href = scheme: // host [: post]/path/filename>... </A>

Hyperlink type
1. http statement <a href = http://www.163.com/images/logo.htm> Netease logo </a>
2. file declaration <a href = file: // e/images/img.jpg> image </a>
3. ftp declaration <a href = ftp: // 192.168.1.44/> enter </a>
4. mailto statement <a href = mailto: sctnl@163.com> E-MAIL </a>

Bookmarks

Target point <a name = "ind">... </A> or <a id = "ind">... </A>

Link <a href = "# ind">... </A> click <a href?#index.htm # ind ">... </A>

Create keyboard shortcuts for links
Accesskey = "w" (Alt + w) (Ctrl + w)
Set the tab order for links
Tabindex = "n"

Function Structure of a form:
Main tag structure: <from>... </From>
Attribute value description
Name string to name this form
Method get/post form Transmission Mode
Action url transmission target

Text bar, password bar, and hidden bar
Text bar: <input type = "text" name = "column name" value = "column internal value" size = "column display width" maxlength = "column data input maximum length" readonly>
Password column: <input type = "password" name = "column name" value = "column internal value" size = "column display width" maxlength = "column data input maximum length" readonly>
Hidden Column: <input type = "hidden" name = "column name" value = "column value">

Check box and select Column
Multiple check fields: <input type = "checkbox" name = "column name" value = "inner value" checked disabled>
Radio field: <input type = "radio" name = "column name" value = "inner value" checked disabled>

Form field and block field
Format option bar settings:

<Select name = "column name" size = "Number">
<Option value = "option value" selected>...
<Option value = "option value">...
<Option value = "option value">...
</Select>
// Group <optgroup label = "group name"> </optgroup>
// Multiple-choice multiple

Text block settings:

<Textarea cols = "set length" rows = "Set width" placeholder = "Set Value" autofocus disabled form> ......... </Textarea>

// Drag prohibited: resize: none; // autofocus: automatically obtains the focus for page loading. // form: the form to which the text belongs.

Buttons and image buttons
Button settings: <input type = "submit" value = "text displayed in the button">
<Input type = "reset" value = "text displayed in the button">
Button image: <button name = "column name" type = "image form">

</Button>
Image button: <input type = "image" src = "url" alt = "text">

Allow File Upload
Upload field: <input type = "file" name = "file">
Add an external box and a title to the form
Outer border: <fieldset>... </fieldset>
Title: <legend>... </legend>

Automatically display webpage content:
Format: <meta http-equiv = "refresh" content = "time; URL">
1. meta File Header Declaration
2. http-equiv = "refresh" indicates that the webpage needs to be downloaded and displayed again.
3. content = "time; URL" time indicates the number of seconds. The content displayed on the URL webpage
For example, <meta http-equiv = "refresh" content?%3}url=index.html ">

How to let others find your webpage:
<Meta> attributes:
Attribute name attribute value description
Name author description of the author
Description describes the content of the webpage.
Keywords, separated by commas
Generator describes the software used to generate Web pages.
Revised describes the webpage version
Others can set other webpage Information
Content string with name, http-equive settings
Example: <meta name = "author" content = "sctnl">
<Meta name = "description" content = "this is my personal website">
<Meta name = "keywords" content = "music, anime, blog">
<Meta name = "generator" content = "sublime_text">
<Meta name = "revised" content = "html4.01">
<Meta name = "others" content = "this is my first website. The main content of this website includes cartoons, music, articles, blogs, and so on.">

Activity text: <marquee>... </Marquee>
Attribute name attribute value description
Behavior scroll moves from right to left
Slide stops from right to left
Alternate move on both sides
Direction left move to left
Right move to the right
Move up
Move down
Bgcolor English/Sixteen background colors
Height pixel/percentage height
Width pixel/percentage width
Scrollamount digital playback speed
Vspace pixel spacing between left and right sides
Distance between the upper and lower sides of the pixel