Home > Developer > Web Develop
<! DOCTYPE HTML >
* Note:<! Doctype> tag does not have an end tag!
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 > (can write not write)
<title> title displayed in the title bar of the browser </title>
<body> (main part)
(Page content)
</body>
The properties in the label <body> are:
bgcolor= color (background color) background= the absolute path or relative path of the picture (background image)
1) <H1> level headings </H1>
2) <H2> two level title </H2>
3) <H3> three level title </H3>
4) <H4> four level title </H4>
5) <H5> five level title </H5>
6) <H6> six level title </H6>
3.<font></font> tags (set text properties)
<font size= "Font size" color= "Font Color" face= "font type" > Text to set </font>
4. Special symbols
Special symbols |
Code |
Space |
|
greater than sign (>) |
> |
less than sign ( < ) |
< |
Quotes |
" |
Copyright Number ( © ) |
© |
5. Control-related labels for rows
Paragraph labels <p></p>
<p align= "left" (aligned)/"right" (justified)/"center" (centered) > (how paragraphs are aligned)
Line Wrap label <br/>
6. Picture Tags
Align= "Top/bottom/middle/left/right" border= "Picture border width" >
(Align is used to adjust the way the picture is relative to the surrounding text)
7. Text layout
1) Horizontal
2) syntax for a sequence list
<ol type= serial Number type > (ordinal type: 1, A, a, Ⅰ, I)
<li> fill in the information </li> (must be included with <li></li> content)
<li> fill in the information </li>
<li> fill in the information </li>
......
</ol>
3) unordered list syntax
<ul type= "ordinal type" > (Ordinal Type: disc (default value, solid dot), Circle (hollow Ring), Square (Hollow Square))
<li> written content <li> (must be included with <li></li> content)
</ul>
4) Pre-formatted text syntax
<pre>
(The specific text format, this format is unchanged at the time Oh!) )
</pre>
8. Page link Syntax
1) Link to other pages
<a href= "link Address" > Connection logo </a>
2) Link to this page
First, create an anchor point for your anchor: <a href= "#锚记点名称" > Theme name </a>
Then set the Name:<a name= "anchor point Name" in the exact place you want to link ></a>
(The anchor point must be preceded by a # number)
3) Email link
<a href= "mailto: Mail address" > Webmaster email </a> (Note not to forget mailto)
9. Scrolling tab syntax
<marquee scrolldelay= Rolling delay time direction=up/down/left/right (scrolling direction) onmouseover= "This.stop ()" (stops scrolling when the mouse pointer is above) Onmouseout= "This.start ()" (Continue scrolling when the mouse leaves) >
Scrolling text and images
</marquee>
Chapter II Summary of Knowledge points1. Basic framework syntax for tables
<table the width of the border of the border= table (typically not more than 5) width= the width of the table height= the height of the table bordercolor= the color of the table border line bgcolor= The background color of the entire table background= Background image of the table address (background image) align= table alignment >
<TR bgcolor= Line Background color > (line)
<TD colspan= spans the number of columns rowspan= the number of rows bgcolor= the background color of this cell background= the background picture address of this cell (background picture) align= The content alignment in the cell (right/left/center /) ></td> (cell)
</tr>
</table>
2. Padding, spacing properties
CellPadding: The distance (padding) between the content and the inner border of the cell cellspacing: the distance between cells (outer space)
Chapter III Summary of Knowledge points1. Basic structure of the form
<form action= "URL" name= form name method= How to submit data (Post/get) >
The specific content
</form>
2. Elements in the form
1) .<input> Element
<input name= "" Type=text size= text box size maxlenght= limit input maximum character > (Single line text box)
<input name= "" Type=password size= text box size maxlenght= limit input maximum character > (Single line text box--set password)
<input name= "name" Type=radio value= "male" checked (default selected) > (radio button-male) (the name must be the same when setting the radio button)
<input name= "name" Type=radio value= "female" > (radio button--female)
<input name= "" Type=submit value= Submit > (Button--submit)
<input name= "" Type=reset value= Reset > (Button-Reset)
<input name= "" Type=checkbox Value=play (must have) Checked> Play game (check box)
2) .<select></select> drop-down list element
Syntax: <select name= "" >
<option value= "" (Must have) > content </option>
<option value= "" (Must have) > content </option>
<option value= "" (Must have) > content </option>
<option value= "" (Must have) > content </option>
......
</select>
3) .<textarea></textarea> Multi-line text box elements
Syntax: <textarea name= "" cols= "width" rows= "height" (not to be confused with RowSpan and colspan of merged cells) >
The specific content
</textarea>
1). Basic structure of the frame (note: No <body></body> at this time)
<framset cols= "25%,*" (separated into the left and right parts) rows= "25%,*" (separated into the upper and lower parts) border= the size of the frame border bordercolor= the color of the frame border >
<frame name= "window name" src= "This window to display the file address" scrolling=yes/no (with or without scroll bar) noresize (Disable resizing of frame window) >
</framset>
2). Links between frames pages
The first step: Define a name for each section in the well-designed frames page;
Eg:<frame name= "window name" src= "" >
The second step: Set the target target window property of the hyperlink in the navigation bar;
Eg:<a href= "lianjie.html" target= "Name of the window to display" > Link flag </a>
Fourth chapter summary of Knowledge points1. Style type, divided into three kinds
1) Tag Selector
Grammar:
Label
Attribute: property value;
}
<style type= "Text/css" >
P {Font-size:20px;color:blue}
</style>
Do not need to call, directly create tags can be used
2) class Selector
Grammar:
。 Class Name {
Attribute: property value;
}
<style type= "Text/css" >
. My {Font-size:20px;color:blue}
</style>
Invocation: Called in the desired place as a property (class= class name)
3) ID Selector
Grammar:
#名称 {
Attribute: property value;
}
<style type= "Text/css" >
#my {Font-size:20px;color:blue}
</style>
Call: Called in the place where it needs to be used (id= name)
2. Common style attributes
1) Text Properties
Font-size: Font Size
Font-family: Font type
Font-style: Font style (italic)
Color: Font Color
Text-algin: How text is aligned (left/right/center)
2) Background Properties
MSO-PARA-MARGIN-LEFT:2.0GD; " >background-image:url ("Picture address") Background picture
Background-repeat: (repeat/no-repeat/repeat-x/repeat-y) How the background image is displayed repeatedly
3) Box Properties
(1) Boundary properties
Margin-left: Sets the left margin of an object
Margin-right: Set the right margin of an object
Margin-top: Setting the top margin of an object
Margin-bottom: Sets the bottom margin of an object
(2) Padding properties
Padding-left: Sets the distance between the content and the left border
Padding-right: Sets the distance between the content and the right border
Padding-top: Sets the distance between the content and the top border
Padding-bottom: Sets the distance between the content and the bottom border
(3) Border properties
Border-style: (soild thin border/dashed/dashed border) border style
Border-width: Border Width
Border-color: Border Color
4) Hyperlink Style
a:link{} non-accessible link style
a:visited{} The link style that was visited
a:hover{} style when mouse hovers over a link
a:active{} The style of the linked text under the mouse when pressed
3. Style Sheet 3-class application method
1) inline style sheet (changes the style of a line of text)
Syntax:<p style= " property : property value ;" > text </P>
2) inline style sheet (used within one page)
Grammar:
<style type= "Test/css" >
// style rules
</style>
3) external style sheet (changes the style of different page elements in multiple pages)
A file that is suffixed with a CSS name.
There are two ways to link an external style sheet:
(1) <link> label Declaration
<link rel= "stylesheet" type= "Text/css" href= " style sheet file ">
(2) How to import
<style type= "Text/css" >
@import style sheet file . css;
</style>
Fifth chapter Summary of knowledge points1. Website development process
1) Demand analysis, confirm demand
2) Website production
3) test Web page
4) Publishing website
2. The website test mainly includes three aspects
1) Whether the page is beautiful, the layout is reasonable
2) Link is intact, there is no invalid link
3) compatibility in different browsers
HTML Knowledge Summary
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
