Home > Developer > JavaScript
HTML & CSS,
HTML
Xml (Tag Name) Extensible Markup Language
<Stu>
</Stu>
Html hypertext markup language (text, images, links) <> </>
Compiling pages on the Internet (H5 version: supports multiple tag features)
Standard, mark each part of the page to be displayed by marking the symbol
The html page does not require tag integrity. It is parsed according to the tag. It does not indicate its error for the identifier with an error in writing and does not stop its interpretation and execution process.
Page Structure (html) + style page presentation (css) + page action flexible data (js)
Basic syntax
File Suffix:. htm. html
Note <! -- Comment -->
Tag <>
Paired tags, single tags
Element
Attribute id class style title
(The element and attribute names are case-insensitive)
Document Structure
Meta definition document metadata
Color r g B 0-255 #000000
Size font-size
Tag
Block-level labels
The Section p excludes a distance between the context of a row.
H1-h6 title
Div exclusive row
Ul li
Dl dt dd
Intra-row (Inline) Labels
Span
A hyperlink
& Nbsp Space
Table label
Table tbody tr th td
Thead tfoot
Image
Form
Form
Frontend and backend Data Interaction
Collects user information and sends it to the server for processing.
<Form> </form>
Action method (get, post)
Input
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> table test </title>
</Head>
<Body>
<! -- Table test -->
<Table border = "1" bgcolor = "# aaeeee"
Cellspacing = "10" cellpadding = "10"
Frame = "box" rules = "all"
Bordercolor = "# aaaaaa" align = "center"
Width = "70%">
<Caption> menu </caption>
<Tbody align = "center">
<Tr>
<Th> week </th> <! -- Th indicates the header information -->
<Th> lunch </th>
<Th> dinner </th>
</Tr>
<Tr>
<Td> 1 </td>
<Td colspan = "2"> sd </td>
<! -- <Td> gf </td> -->
</Tr>
<Tr>
<Td> 2 </td>
<Td rowspan = "2"> bg </td>
<Td> er </td>
</Tr>
<Tr>
<Td> 3 </td>
<! -- <Td> th </td> -->
<Td> yj </td>
</Tr>
</Tbody>
<Thead align = "center">
<Tr>
<Td colspan = "3"> xssdsd </td>
</Tr>
</Thead>
<Tfoot>
<Tr>
<Td colspan = "3"> fgbhdc </td>
</Tr>
</Tfoot>
</Table>
</Body>
</Html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Form test </title>
</Head>
<Body>
<Table>
<Form action = "#" method = "get">
<Tr>
<Td> User name: </td>
<Td> <input type = "text" name = "username" value = "demon" size = "" disabled = "disabled"> </td> <! -- The disabled value is not submitted along with the Form -->
</Tr>
<Tr>
<Td> password: </td>
<Td> <input type = "password" name = "pwd" maxlength = "6" size = "" readonly = "readonly"> </td> <! -- The value of readonly can be submitted with the Form -->
</Tr>
</Form>
</Table>
<Form method = "get">
Gender: <input type = "radio" name = "gender" value = "male" checked = "checked"> male
<Input type = "radio" name = "gender" value = "female"> female
<Br>
Hobbies: <input type = "checkbox" name = "like" value = "study"> Learning
<Input type = "checkbox" name = "like" value = "game"> games
<Input type = "checkbox" name = "like" value = "Zzzz"> sleep
<Br>
Resume: <input type = "file" name = "file">
<Br>
<Input type = "hidden" name = "level" value = "100">
<Br>
Address: <select name = "address", id = "" size = "2" multiple = "multiple">
<Option value = ""> select </option>
<Option value = "SZ"> Suzhou </option>
<Option value = "TY"> Taiyuan </option>
<Option value = "SH"> Shanghai </option>
<Option value = "XA"> Xi'an </option>
</Select>
<Br>
Introduction: <textarea cols = "3" rows = "4" name = "" warp> </textarea>
<Br>
<Fieldset>
<Legend> logon location </legend>
<Input type = "image" src = "mine.png">
<Input type = "button" value = "button" onclick = "">
<Input type = "submit" value = "login">
<Input type = "reset" value = "clear">
<Button> submit </button>
</Fieldset>
</Form>
</Body>
</Html>
CSS
Description document presentation form
Use colons to separate attributes and values
Use semicolons to separate attributes
Multiple values with spaces
Inline style: style = "css"
Embedded
External Reference
Box Model
Test 1.1<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> CSS </title>
<! -- Reference -->
<Linkd rel = "stylesheet" href = "CsTest.css">
<! -- Embedded -->
<Style type = "text/css">
/* @ Import url ("")*/
/* Tag selector */
Div {
Background-color: # dff0ff;
Width: 300px; height: 30px;
Margin-bottom: 10px;
}
P {
Font-size; 10px;
Color: # ffffff;
}
/* Class selector */
. Two {
Background-color: #356766;
Width: 200px; height: 30px;
Margin-top: 10px;
Font-szie: 50px;
}
/* Id selector */
# T {
Background-color: #634142;
Width: 300px; height: 30px;
Margin-bottom: 10px;
Font-size: 20px, color: #421411;
}
</Style>
</Head>
<Body>
<! -- Embedded -->
<Div> test 1.2
@ CHARSET "UTF-8 ";
/* @ Import url ("Other CSS ")*/
Body {
Margin: 0px;
Padding: 0px;
}
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Float </title>
<Style type = "text/css">
Body {
Margin: 0px;
}
Div {
Font-size: 30px;
Color: # ffffff;
}
# One {
Background-color: #006666;
Width: 100px; height: 100px;
Float: left;
Margin-right: 10px;
}
. Two {
Background-color: # ff6600;
Width: 200px; height: 50px;
Float: left;
Margin-left: 10px;
}
</Style>
</Head>
<Body>
<Div id = "one"> one </div>
<Div class = "two"> two </div>
<Div class = "two"> two </div>
<Div class = "two"> two </div>
</Body>
</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
