| |
1.HTML5 explain the basis
1.1HTML5 base tag:
head: the head tag, the general basic configuration files and some pages will be provided in reference to the head;
body: Content tab, which is to show the entire page content portion;
1.2HTML5 Title:
h1 ... h6, etc., followed by a number, the smaller the font size of the corresponding title;
1.3HTML5 paragraph
p tag represents a paragraph in p tags can write paragraphs of text;
1.4HTML5 connection
a label indicates the connection, then you can jump to other url inside set the click;
1.5HTML5 image
img tag an image tag, image can show through its setting;
1.6HTML5 Break tag
br wrap label indicates, when it is used to bring the final "/" because it is more standardized.
2.HTML5 element Introduction
Element: all the code from the beginning of the tag to the end tag, the element can be nested, it is this attribute may be a web page can be formed amazing combination effects.
3.HTML property
You can set the property to provide more property elements, attributes in the form of key-value pairs
eg: href = "xxxxx"
Used tags attributes:
h1 title tag: align: alignment settings
body Tags: bgcolor: background color settings for the entire body
a tag: target: Specifies where to open connection
Common attributes:
Class name specified elements: -class
-id: unique id specified element
-style: style element specified
-title: Additional information elements specified
4.HTML format
Common formatting tags:
-b Tags: Definition boldface
-big Tags: tuba word definitions
-em Tags: focus on the definition of the text
-i tag: Defines the italic text
-small Tags: trumpet word definitions
-strong Tags: Definition with emphasis
-sub Tags: definition of the word mark
-sup label: Define the word mark
-ins Tags: insert word definitions
-del Tags: delete the definition of the word
5.HTML style
Three styles of table insertion:
- An external style sheet:
< Link rel = "stylesheet" type = "text / css" href = "mystyle.css">
- Internal style sheet:
< Style type = "text / css">
body {background-color; red}
p {margin-left: 20px}
< / Style>
- Inline stylesheet:
< P sytle = "color: red">
6.HTML link
href attribute: link points to another document, outside the page jump
name attribute: create links within a document, jump within the page
eg:
< a name="tips"> to be in a jump < /a>
< a href="#tips"> jump start position < /a>
7.HTML table
Label
< Table>: Defines a table
< Caption>: Defines a table caption
< Th>: Defines a table header
< Tr>: Defines a table row
< Td>: Defines a table cell
< Thread>: Defines a table header
< Tbody>: Defines a table body
< Tfoot>: Defines a table footer
< Col>: Defines a table column properties
Several tables
The most simple form:
< Table border = "1">
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< Td> Table 3 < / td>
< / Tr>
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< Td> Table 3 < / td>
< / Tr>
< / Table>
Take the meter table:
< Table border = "1">
< Tr>
< Th> unit < / th>
< Th> unit < / th>
< Th> unit < / th>
< / Tr>
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< Td> Table 3 < / td>
< / Tr>
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< Td> Table 3 < / td>
< / Tr>
< / Table>
The table with the title:
< Table border = "1">
< Caption> Important Form < / caption>
< Tr>
< Th> unit < / th>
< Th> unit < / th>
< Th> unit < / th>
< / Tr>
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< Td> Table 3 < / td>
< / Tr>
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< Td> Table 3 < / td>
< / Tr>
< / Table>
Within the table tag:
< Table border = "1">
< Caption> Important Form < / caption>
< Tr>
< Th> unit < / th>
< Th> unit < / th>
< / Tr>
< Tr>
< Td> Table 1 < / td>
< Td> Table 2 < / td>
< / Tr>
< Tr>
< Td>
< Ul>
< Li> Pineapple < / li>
< Li> Pineapple < / li>
< Li> Pineapple < / li>
< / Ul>
< / Td>
< Td> I want to eat < / td>
< / Tr>
< / Table>
Cell spacing set the table: < table border = "1" cellspacing = "10">
Cell padding set the table: < table border = "1" cellpadding = "10">
Table background color, background image settings table:
Background image: < table border = "1" background = "images / Desert.jpg">
Background color: < table border = "1" bgcolor = "aqua">
Use 8.HTML list
List Tags:
- < Ol>: Ordered List
- < Ul>: unordered list
- < Li>: list item
- < Dl>: list
- < Dt>: list item
- < Dd>: Description
List of common examples:
Unordered list:
< Ul type = "square">
< Li> 1st < / li>
< Li> Article 2 < / li>
< Li> 3rd < / li>
< Li> Article 4 < / li>
< / Ul>
Use tags: < ul>, < li>
Properties: disc, circle, square symbols representing the list of styles before
Ordered list:
< Ol start = "10">
< Li> 1 < / li>
< Li> 2 < / li>
< Li> 3 < / li>
< Li> 4 < / li>
< / Ol>
Use labels: < ol>, < li>
Properties: A, a, l, i, start showing an ordered list style in front of the digital
Nested list:
< Ul>
< Li> animal < / li>
< Ul>
< Li> dog < / li>
< Li> cat < / li>
< / Ul>
< Li> plant < / li>
< Ul>
< Li> grass < / li>
< Li> flowers < / li>
< / Ul>
< Li> human < / li>
< / Ul>
Use tags: < ul>, < ol>, < li>
Custom list:
< Dl>
< Dt> ahah < / dt>
< Dd> sssssssss < / dd>
< Dt> ahah < / dt>
< Dd> sssssssss < / dd>
< Dt> ahah < / dt>
< Dd> sssssssss < / dd>
< / Dl>
Use labels: < dl>, < dt>, < dd>
Use 9.HTML block
HTML block element: when a block element display, typically start a new line
Generally: < h1>, < p>, < ul>
HTML inline elements: inline elements do not usually begin with a new line
Generally have: < b>, < a>, < img>
HTML < div> element: div elements are also referred to as a block element, the main element is a combination of HTML containers
HTML < span> element: span is an inline element, it can be used as a text container
10.HTML5 layout
Usually you can use div layout, you can also use table layout, use these tags can Dachu general framework of a web page, and then to charge the specific details of which mention the elements;
11.HTML5 form
Form Common Tags:
< Form>: Form
< Input>: input box
< Textarea>: Text Box
< Label>: control tag
< Fieldset>: domain
< Legend>: Domain Title
< Select>: Select List
< Optground>: Option Group
< Option>: drop-down list of options
< Button>: Button
Common forms:
Check box form:
eg: Please choose you like to eat fruit:
Apple < input type = "checkbox">
Banana < input type = "checkbox">
Peaches < input type = "checkbox">
single button:
eg: Please select your gender:
M < input type = "radio" name = "sex">
Female < input type = "radio" name = "sex">
Drop-down box:
eg: < select>
< Option> Shanghai < / option>
< Option> Nanjing < / option>
< Option> Beijing < / option>
< / Select>
Text fields:
eg: < textarea cols = "30" rows = "10"> please input your message here ... < / textarea>
Button:
eg: < input type = "submit" value = "Submit">
< Input type = "button" value = "Submit">
Submit the form data to the server:
eg: < form action = "http: //localhost/MyServer/server1.php" method = "get">
< Table>
< Tr>
< Th colspan = "2"> Log < / th>
< / Tr>
< Tr>
< Td> Username: < / td>
< Td> < input type = "text" name = "name"> < / td>
< / Tr>
< Tr>
< Td> Password: < / td>
< Td> < input type = "password" name = "password"> < / td>
< / Tr>
< Tr>
< Td colspan = "2"> < input type = "submit" value = "Submit"> < / td>
< / Tr>
< / Table>
< / Form>
12.HTML5 framework
frame: Frame Tag
Framework for page design has a significant role
frameset: frameset tag
Frameset tags to define how to split a window frame
Each frameset defines a set of rows or columns
rows, cols value specifies the area occupied by each row or column of the screen
Common Tags: norsize fixed frame size, cols columns, rows row
Inline frames: iframe, now recommended framework |
|
|
|