Home > Developer > Web Develop
HTML Basics
(1) What is HTML? Hypertext Markup Language
Language for developing Web pages, interpreted by the browser for execution
(2) Basic structure of HTML files
<title></title>
<!--to simulate HTTP message headers--
<!--such as the function of the following message header, is to tell the browser that the return is an HTML, and should be UTF-8 encoded to display the page--
<!--HTML files should be stored in the same encoding as the Meta declaration.
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<!--introduce Scripts--
<script>
<!--define Styles--
<style>
<!--introduce an external style--
<link>
<body>
<!--the data displayed on the page--
</body>
(3) Web development standards
It is recommended to develop a page that should be designed like this: the Structure of the page (including the data), which is responsible for the HTML document;
The appearance of the page, by the CSS document to be responsible;
The behavior of the page is the responsibility of the JavaScript document.
(4) Links
A, basic use: <a href= "URL address" target= "_blank" > Description of the link </a>
Target= "_blank" opens in a new blank page
Target= "_self" opens in the current window (default)
B. Use images as links
C. Using hotspots
<map name= "Map" >
<area shape= "rect" coords= "1,1,1,1", href= "URL address" >
</map>
When shape= "rect" (rectangle), the value of coords is the value of the left and right vertices, and when the "circle" Circle is shape=, a coordinate is a radius length
D, use the anchor point: Then use a page internal jump
<a name= "Top" ></a>
Example:
<a name= "Top" >some data...</a>
<div style= "height:900px;" ></div>
<a href= "#top" >to top</a>
E. Send mail
<a href= "mailto: email address? Subject=hello" ></a>
F, the pseudo-style in the link (re-speaking in CSS)
(5) List
A, unordered list
<ul>
<li><a href= "test.html" >1</a></li>
<li><a href= "#" >2</a></li>
<!--#表示当前页面-
<li>3</li>
</ul>
B, ordered list
<ol>
<li><a href= "test.html" >1</a></li>
<li><a href= "#" >2</a></li>
<li>3</li>
</ol>
C, List nesting
<ul>
<li><a href= "test.html" >item1</a></li>
<ul>
<li><a href= "#" >item2</a></li>
<li>item3</li>
</ul>
<li>item3</li>
</ul>
(6) Form
A, basic use: <TR>: Rows <td>; Columns
<table border= "3px" width= "40%" cellpadding= "3" cellspacing= "ten" >
<tr>
<TD align= "center" >id</td>
<td>name</td>
<td>sal</td>
</tr>
<tr>
<td>001</td>
<td>java</td>
<td>20.00</td>
</tr>
</table>
Border: Width of border
CellPadding: The distance between the data inside the cell and the cell border
CellSpacing: The distance between cells
width:50% or 500, width
Align:left, center, right, horizontal position
Valign:top, middle, bottom, vertical position
b, Irregular forms
Cospan: Cross-column merging
RowSpan: Merging across rows
Example:
<table border= "3px" width= "40%" cellpadding= "3" cellspacing= "0" >
<tr>
<TD colspan= "2" align= "center" > Cell 1</td>
</tr>
<tr>
<TD rowspan= "2" align= "center" valign= "Top" > Cell 2</td>
<td> Cell 3</td>
</tr>
<tr>
<td> Cell 4</td>
</tr>
</table>
C, another form of the table:
<table>
<caption> title </caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
<tbody></tbody>
</table>
Thead: Table Head, 0/1
TFOOT: Table foot, 0/1
Fbody: Table Body, 1/n
D. Tables can be nested
<table border= "3px" width= "40%" cellpadding= "3" cellspacing= "0" >
<tr>
<td>abc</td>
<td>abc2</td>
</tr>
<tr>
<td>abc3</td>
<td>
<table border= "1" width= "80% cellpadding=" 3 "cellspacing=" 0 ">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</td>
</tr>
</table>
(7) Form: Used to collect user information, such as login form, can let the user enter the user name, password, this information will be submitted to the server for verification
<form>
<input type= "Text"/>
</form>
Input tag:
Type= "text": Text input Box
Type= "Submit": Submit button
Type= "reset": Reset button
Type= "password": Password input box
Type= "Radio": Radio
Type= "checkbox": Multiple selection
Type= "file": Upload a file (add a property to the form enctype= "Multipart/form-data")
Type= "hidden": Hidden fields
Non-input Tags:
<TEXTAREA>: Multi-line text input box
<select>: drop-down list/Multi box
(8) Frame
What is a frame: used to divide a window into multiple sub-windows
A, <frameset>,<frame>
Note: Frameset cannot be written in <body> and can be used in a nested set.
B, <iframe>
Can be used in <body>, which means embedding a child window
(9) Other marks
Inline Tags: tags that do not have a single line----<span></span>, <strong></strong>
Block-level tagging: Another line of markup----(10) Entity
In the HTML page, there are spaces, >, <, & should be replaced with entities
Space
> >
< <
" "
& &
(one) html/xhtml:
XHTML: Extended Hypertext Markup Language
HTML Base Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
