Home > Developer > Web Develop
Three: Classification of HTML tags
1) Title tag: Define the largest title from 2) NewLine label:<br>
3) Horizontal line label:4) NewLine label:<br/>
5) Paragraph label:<p>
6) Paragraph indent:<blockquote>
7) Superscript label:<sup> and <sub>
8) output label as-is:<pre>
9) Font label:<font>
10) Center Label:<center>
11) Image tag: img Empty tag Body
Property:
SRC: Linked to a resource picture
Width: Picture widths Two ways: one specifies px (pixels) The second type: percent
Title: Hover state, text is displayed
ALT: Used to explain the picture when the picture is invalid
Height: altitude of picture
12) escape Character:
Spaces: Precautions (semicolons must be taken)
<: < (Letter than)
:> (greater than)
Registered trademarks:? ®
All rights reserved:? ©
13) with serial label
OL Li list Item
14) No sequence label
UL li list items
15) Hyperlink Tag
1> connecting to a resource file or resource address (URL)
2> to use as an anchor connection
Under the same HTML page:
A> hit anchor point:
<a name= "anchor name" ></a>
b) Create a jump
<a href= "#锚点名称" > Jump </a>
不同页html页面下: c)打锚点: <a name=”锚点名称”></a> d)创建跳转标记 <a href=”资源文件或者资源地址#锚点名称”>跳转</a>
16) Table Label:
1>table Label
Property: Border table's Border width table height table
2>align: The alignment of the label in the browser bgColor: background color
3>TR: Row Label
4>TD: Column (cell)
5>th: Header label (default: Center, bold)
6> Line Merge: Rospan
7> column Merge: colspan
Four: CSS page layout
1) There are three ways to use CSS:
1> in-line style
Label Style property: Specify Style
Cons: Style Property It is mixed with HTML tags and is not conducive to post-maintenance
2> internal Style
Writing format:
Select a label name {
writing style;
}
3> External mode
A) Create a CSS file: Specify the style of the label
Tag Selector {
writing style;
}
b) need to import the CSS file externally
REL attribute: Associative cascading style sheet
<link href= "need to be imported CSS file" ref= "stylesheet" >
2) CSS background
1> settings for background border: First add <style type= "Text/css" to the header file;
2> Select the color in the Body property body {background-color: Yellow}
3) CSS text
1> text color settings <style type= "Text/css";
eg:h1 {color: #00ff00}
</style>
<body>
</body>
4) CSS font
1> First add <style type= "Text/css" to the header file;
2> in P {font-family: ...} Set
<style type= "Text/css";
p {font-family:courier}
</style>
<body>
<p>this is a paragraph</p>
</body>
5) CSS Border settings
1> first add <style type= "Text/css" to the header file;
2> in p.* {border-style: .....:} Setting the border style
eg: <style type= "Text/css";
p.dotted {border-style:dotted}
</style
<body>
<p class= "dotted" >a dotted border</p>
</body>
3 > in P. {border-color: ...} Setting the color
eg: <style type= text/css >
P.one { Border-style:solid; Border-color: #0000ff } </style> 6) CSS margins
1> first create a <div>....</div> block label in the page the position of the
2> block label can be set according to the property value of
A>magin
B> Can be moved with a float (when multiple images overlap)
7) selector category
1) Tag Selector
Tag name {
style;
}
eg; div{
font-size:24px;
Color: #f00;
}
2) ID selector
When used, give the tag to specify the id attribute and specify the id attribute value
#id属性值 {
style;
}
Eg: #dl1 {
font-size:24px;
Color: #0f0;
}
(under the same HTML page, do not specify an id attribute with the same name for multiple tags, the id attribute is unique
javascript: Gets the current label object based on the id attribute value
document.getElementById (" ID is unique ");
3) class selector
When used, give the tag the class attribute and specify the class attribute value
. Class Property value {
style;
}
Eg:. cls1{
Font-size:36px;
Color: #00f;}
(You can assign a class attribute with the same name to multiple tags in the same HTML page) derivation selector: 1) Set selector selector 1, selector 2, selector 3 Style } eg: #dl1,. cls1{ font-size:24px; Color: #ff0;} 2) Intersection selector selector 1 Selector 2 selector 3{style; } eg: #dl1 span{ font-size:36px; Color: #000;} 3) General SelectionSelector *: All meaning, wildcard symbol * 8) CSS pseudo class selector 1> pseudo class selector has 4 states: a) mouse Status not visited link B) mouse over state hover C) Mouse activation state (mouse clicked, but not released state) active D) The status of the mouse has been visited (clicked, and released state) visited 2> format is the label name: Four different states 1> a:link{ Color: * * *; } 2> A:visi ted{color:*****; } 3> a:hover{ text-decoration:none;/ Color: * * *; } 4> a:active{ Text-decoration:underline; Color: * * *; }Note: in CSS definitions, a:hover must be placed after A:link and a:visited to be valid.
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
HTML Learning 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
