Home > Developer > Web Develop
Html
----------------------------------------
HTML BASIC structure
<body></body>
Body a variety of label components in:
1 , title tags in the body: H1~h6
It is important to note that:
1)
2) must be an exclusive line
3) Use
4) search engine will be the article in the
2 , paragraph, and line wrapping:
Line break tag: <br/>
Paragraph mark: <p></p>
The text in the P tag is treated as a paragraph of text, and after a document is finished, it will be wrapped naturally.
3 , Split line:
Properties:
Width: 300px; 50% percent of the parent tag width
Align: alignment: Left; Center Center; Right.
4 , picture tags: ( single Mark ) : You can display a picture in the page
Property:
SRC: Specify the path to the target picture
Width: Wide px
Height: High
When the width and height are set at the same time, the phenomenon of distortion, if you need to scale, you only need to set one of them.
Path:
① Absolute Path:
Operating system absolute Path: Windows: The path beginning with the drive letter is the absolute path; C:\Program files\xxxx.jpg
Linux/unix/mac: Path beginning with/(root directory) is absolute path
/home/soft01/xxx.jpg: Network-side absolute path:
URL path starting with/http: http://tts6.tarena.com.cn/xxx.jpg
② relative path:
Refers to the path generated through the current HTML document and the target file.
A relative path can also point to a target file.
Paths that do not start with the disk and/(root directory):
Supported image formats for Web pages:
Jpg/jpeg: Small volume image with small distortion
PNG: Display color variety more volume large image preservation intact
GIF: Support dynamic Graph volume small display of very few colors
Png/gif: Supports Transparent color
JPG: not supported
5 , a Links:
<a> Link Text </a>
properties:href: Target address to jump to after clicking the link
Click on the image to jump:
<a href= "" >
</a>
Photo Hotspot Link: The essence of this effect is to divide a picture into different hotspots, and then make the hyperlinks in different areas. Three label:<map><area> are used to complete the map area hyperlink.
<map name= "Name of the chart" >
<area shape= Shape coords= area coordinates list href= URL resource address >
<!--How many hotspot areas can be defined as needed--
<area shape= Shape coords= area coordinates list href= URL resource address >
</map>
"1" shape--Define the hot spot shape
Shape=rect: Rectangle
Shape=circle: Round
Shape=poly: Polygon
"2" coords--defines the coordinates of the area point
A. Rectangle: must use four digits, the first two digits are the upper left corner coordinates, the last two digits is the lower right corner coordinates
Example: <area shape=rect coords=100,50,200,75 href= "URL" >
B. Circle: Must use three digits, the first two digits are the coordinates of the center, the last digit is the radius length
Example: <area shape=circle coords=85,155,30 href= "URL" >
C. Arbitrary graphics (polygons): Fill in the shape each inflection point coordinate
Syntax: <area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href= "URL" >
Cases:
<map name= "map" id= "map" >
<area shape= "rect" coords= "12,37,181,88" href= "http://www.qq.com" onfocus= "This.blur ()"/>
<area shape= "rect" coords= "12,97,182,143" href= "http://www.yahoo.com"/>
<area shape= "rect" coords= "18,155,179,200" href= "http://www.sina.com"/>
<area shape= "rect" coords= "18,211,182,260" href= "http://www.baidu.com"/>
<!--<area shape= "rect" coords= "12,444,182,490" href= "sm-textfile.html" target= "PCs"/>--
<!--onfocus= "This.blur ()" Remove the dashed box--
</map>
6 , Forms:
The first specification of a table:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Table : Table Markers
Property:
Width: Wide
Height: High
Border: Border width
Align: Alignment left|center|right
CellPadding: The inner margin of a cell
CellSpacing: The distance between cells and cells
TR : table row
TD : Cell cell
Property:
RowSpan: Merging rows
colspan: Merging columns
The second specification of the table:
<table>
<caption></caption> table title
<thead> Table Head
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody></tbody> Watch Body
<tbody></tbody>
<tfoot></tfoot> table Feet
</table>
You can use the first or second type.
The first is simpler, the second more canonical
7 , form Labels:
Forms are used to collect user information, and a form can contain multiple form components.
input Tags:
text box
<input type= "text" name= "" value= ""/>
Type: Defines the style of the input component (text box)
Name: Definition of the input component names, only written on the Name property
Component can pass data to the server at the time of submission.
Value: Defines the default value in the text box after page load.
Submit button:
<input type= "Submit" value= ""/>
Value: Defines the text on the button
Password box:
<input type= "password" name= ""/>
radio button:
<input type= "Radio" name= "value=" "/>
Name: Multiple radio buttons are a group of radio buttons, if name is the same. A group of radio buttons can only select one.
Value: The parameter value that is submitted to the server.
Checked= "Checked" If you want a radio button to be selected by default, you need to add this property.
Multi Box:
<input type= "checkbox" Name= "" value= ""/>
&pwd=&sex=m&hobby=swimming&hobby=coding
Checked= "Checked" is selected by default
Normal button:
<input type= "button" value= ""/>
Value: Represents the text on the button
Reset button:
Function: Restores the value of all components in the current form to the default.
<input type= "reset" value= ""/>
Non-input Tags:
Drop- down list box:
<select>
<option value= "" >text</option> drop-down items
<option></option> drop-down items
</select>
Option
Text: Indicates the type displayed in the drop-down item
Value: Represents the current drop-down
Multiline text fields:
<textarea name= "" ></textarea>
List Tags:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
--------------------------------------------
8 , CSS Style properties:
Layout Properties: (Box model )
1> margin (margin):
margin:10px; The upper and lower left and right margins are all 10px
margin:10px 20px; The upper and lower margins are around 10px 20px
margin:0px Auto; Div Horizontal Center
Margin:a b c D; Upper right lower left direction margin
margin-left:10px
Margin-right:
Margin-top:
Margin-bottom:
2> inner margin (padding):
padding:a;
Padding:a b;
Padding:a b c D;
Padding-top:
Padding-right:
Padding-bottom:
Padding-left:
Common Simple style properties:
1> Background Properties: background
Background: ">red | Blue | Black, #ffffff, #fff
Background-image:url ("Target picture path");
Background-repeat: Background Image tiling method
Repeat:repeat-x:;repeat-y:;no-repeat:
Background-position: Background image positioning
2> Font Properties: font-
Color: Font Color
Font-size: Font size px
font-family: Font Arial ...
Font-weight: Pound value (thickness): normal;bold;bolder;lighter;100~900
Font-style:normal Ordinary; Italic italic body
3> Text properties: text-
Text-align: Text alignment: Left;center;right
Line-height: Row height is primarily used to control vertical centering of text
Text-decoration:none;underline;overline;line-through
4> Border Properties: border-
BORDER:1PX solid black;
Border-width:
Border-style:
Border-color:
Border-left-width:
...
5> List-related properties:
List-style:none;
6> Complex Properties:
Display: Can control the hiding and display of components
None: Hide Component
Block: Display Components
Block can also display row-level markers as block-level markers.
Because only block-level markers can set width and height
row-level markers: multiple tags occupy one line
<a></a><input/> <span></span> <s></s> <b></b><strong>
block-level tagging: One mark takes up a line H1~h6 P DIV Li ul ol
float : Floating Properties
Left
Right
Clear : Clear Floating
Left: Floating objects are not allowed
Right: Floating objects are not allowed
Both: Floating objects are not allowed on both sides
9 , HTML Entity:
Tip: The advantage of using entity names instead of numbers is that names are easy to remember. The downside is that the browser may not support all entity names (the support for entity numbers is good).
When you want to show special characters in the page:
: > Great than
<: < Less than or & #60;
Space:
The browser will always truncate the space in the HTML page. If you write 10 spaces in the text, the browser removes 9 of them before the page is displayed. To increase the number of spaces in the page, you need to use Character entity
Ten , HTML a useful character entity in
Note: The entity name is case sensitive!
Show results |
Describe |
Entity Name |
Entity number |
Space |
|
& #160; |
|
< |
Less than sign |
< |
& #60; |
> |
Greater than sign |
> |
& #62; |
& |
and number |
& |
& #38; |
" |
Quotes |
" |
& #34; |
‘ |
Apostrophe |
' (ie not supported) |
& #39; |
￠ |
Score of |
¢ |
& #162; |
￡ |
Pounds |
£ |
& #163; |
￥ |
Yen |
¥ |
& #165; |
€ |
Euro |
€ |
& #8364; |
§ |
Section |
§ |
& #167; |
? |
Copyright |
© |
& #169; |
? |
Registered trademarks |
® |
& #174; |
? |
Trademark |
™ |
& #8482; |
X |
Multiplication sign |
× |
& #215; |
÷ |
Division Sign |
÷ |
& #247; |
Common label components in HTML
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
