Html 5 Introduction
HTML5 is the latest HTML revision, in October 2014 by the World Wide Web Consortium (W3C) standards completed.
HTML5 is designed to support multimedia on a mobile device.
HTML5 easy to learn.
1. Understand simple html and writing.
<!DOCTYPE html>
<-! Statement html
-->
<html>
<head>
<! - some basic information about the definition of a web page ->
<meta charset="UTF-8">
<-! Charset Coded Character Set ->
<-! UTF-8 Unicode
gb2312 Chinese standard Article 2312 Chinese, Korean, .... most Asian languages (traditional Chinese characters are not supported)
GBK expansion on the basis of the above can support complex characters
the larger memory unicode
UTF-8-->
<title></title>
</head>
<body>
</body>
</html>
<! - content comment
Comments are looking for developers, not for the user to see. In the browser, touch the comment will skip, not to resolve his
Notes which do not nest comments
-->
<! - Double tag ->
<-! <Html attribute name = "attribute value" 2 attribute name = "attribute value 2"> </ html>
<html>
<head></head>
</html>-->
<-! Single-label ->
<-! <Meta attribute name = "attribute value" 2 attribute name = "attribute value 2" /> ->
2. Learn browser
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<Title> to start learning html tag </ title>
</head>
<body>
<! - comments shortcuts
Select content ctrl + /
-->
<-! All together spaces and line breaks will be parsed into a space ->
<! - escape character
& Nbsp; space
< <
> >
& Copy; copyright symbol
<br /> tags represent a single line break
-->
<!--今 天 天 气 真
<br />
<br />
Good, very appropriate
<br />
<br />
<br /> together to learn! ! ! ->
<! - started now & lt; br / & gt; tag! ! ! & Copy; ->
What are common browsers?
IE
Firefox
Sohu
Sogou
UC
360
European friends
hao123
Kingsoft
...
Only five browsers
IE
Firefox
apple
European friends
Browser kernel (engine)
car:
Gasoline / Diesel -> kinetic energy
portability
Browser kernel to do
Write code -> machine code / 01010101 bytecode
portability
360: efficient, safe, dinuclear (Google rapid mode, IE compatibility mode.)
</body>
</html>
3. Learn tag (the tag line and block level tag)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Inline tags (tags, elements, nodes (it is called in js))
On one line, this line is displayed only when no less than the time to appear Wrap
Element can not set the width and height, width and height to hold up to a content of
The row block tags: on one line, and the width and height may be provided
Block-level tag
Own separate line
Width and height can
<I> This is some text </ i>
<S> This is some text </ s>
<U> This is some text </ u>
<B> This is some text </ b>
<font color="green" size="7">文字标签</font>
<I> <s> <u> <b> <font color = "red" size = "7"> This is a multi-style text </ font> </ b> </ u> </ s> </ i>
<Div> This is the div tag </ div>
<P> This is a paragraph tag </ p>
<H1> title tag 1 </ h1>
<H2> tag header 2 </ h2>
<H6> title tag 6 </ h6>
<H1> This is some text </ h1>
<B> <font size = "6"> This is some text </ font> </ b>
SEO Search Engine Optimization
Baidu search Baidu spider Keywords
Key elements span, div Baidu small spiders will not touch
1-999 yuan / next
Baidu bid
Time Lock
IP Lock
</body>
</html>
4. Understand the table (create table properties)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<Title> Table </ title>
</head>
<body>
<-! Form must be neat ->
<table border="1px" width="700px" height="500px" align="center">
<-! Tr it means to write a line ->
<tr align="center">
<-! Wrote on a td represents a cell, the first line of the number of cells in the second row must have the number ->
<td><b>姓名</b></td>
<Th> Gender </ th>
<Td> Age </ td>
<Td> Hobbies </ td>
<td>婚否</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table border="1px" width="500px" height="400px">
<! - table headers can be omitted ->
<Caption> Table girlfriend </ caption>
<! - the head of the table can be omitted ->
<thead>
<tr>
<Th> Name </ th>
<Th> Age </ th>
<Th> Height </ th>
<th bgcolor="aqua">体重</th>
</tr>
</thead>
<! - body forms may be omitted ->
<tbody>
<tr align="center" bgcolor="bisque">
<Td valign = "top"> Cuihua </ td>
<td>18</td>
<td>165CM</td>
<td>100KG</td>
</tr>
<tr align="center">
<Td> flower </ td>
<td>20</td>
<td>170CM</td>
<td>80KG</td>
</tr>
</tbody>
</body>
</html>
The inner and outer margins of cells in a table, row and column elimination.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="30">
<-! Cellpadding This is the distance from the surface of the content unit Gerry cell borders ->
<-! Cellspacing This is the distance between the cell and cell ->
<! - table would not have to set the width and height after setting these two properties in general ->
<tr>
<td colspan="2" rowspan="2"></td>
<!--<td></td>-->
<td></td>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<td></td>
<td></td>
<!--<td></td>-->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2" colspan="4"></td>
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
<td></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
<td colspan="2"></td>
<!--<td></td>-->
</tr> </table>
</body>
</html>