HTML Overview
HTML is English Hyper Text Mark-up Language (HTML) abbreviation, he is a standard language for making Web page (mark). Equivalent to the definition of a uniform set of rules, we have to follow him, so that you can tell the browser to interpret it according to the rules of the markup language.
Browser is responsible for the label translated into the user "can read" format, presented to the user!
Document tree:
Meta(metadata information)
Provide information about the page meta information, for example: page encoding, refresh, jump, and description for search engines update frequency and keyword
1, page coding (tell the browser what encoding)
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
2, refresh and jump
< meta http-equiv=“Refresh” Content=“30″> < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
3, Keywords
< Meta name = "keywords" Content = "car, car home, car network, car quotes, car pictures, news, reviews, community, club" >
4, description
< Meta name = "the Description" Content = "car home with the latest quotes for your car, car pictures, car prices Daquan, the most exciting car news, quotes, reviews, shopping guide content, to provide the fastest and most complete Chinese car website. " >
5, IE compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Title
< Title > header of your web site </ title >
Link
css
< link rel="stylesheet" type="text/css" href="css/common.css" >
icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
Writing style in the page
< style type="text/css" > .bb{ background-color: red; } < /style>
Script
1, the introduction of file
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2, write js code
< script type="text/javascript" > ... </script >
Give a complete example:
Qichezhijia provide you with the latest car quotes, car pictures, car prices Daquan, the most exciting car news, quotes, reviews, shopping guide content, is to provide the fastest and most complete Chinese automotive Web site. " /> < Title >
小男孩</title> </head> <body> </body> </html>
Commonly used tags
Tags are generally divided into two types: the block-level labels and row labels
1, a, span, select the like
2, div, h1, p and other
symbols
For example: Copyright: © etc; http: //www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
Here are the main labels:
1, p is a paragraph tag (default is spaced between paragraphs), br is a newline tag, hr draw a horizontal line is, H1 ~ H6 title;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>asdfasdfasdasdfasdfasdfasdfasdfasdfasdfasdfasd</p> <p>asdfasdfasdasdfasdfasdfas<br>dfasdfasdfasdfasdfasd</p> <a href="http://www.baidu.com">百度</a> <h1>fuckme</h1> <h2>fuckme</h2> <h3>fuckme</h3> <h4>fuckme</h4> <h5>fuckme</h5> <h6>fuckme</h6> <span>fuckyou</span> <span>fuckyou</span> <span>fuckyou</span> <div id="d1" style="position: fixed; bottom: 0; right: 0;">看我在什么地方</div> </body> </html>
Specific display page as follows:
2, a label, the main functions are: to open a connection (_black means open in a new page) and make anchor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <title>Title</title> </head> <body>
<a href="http://www.baidu.com" target="_blank">百度</a> <a href="#i1"> Chapter </ A > < A the href = "# I2" > Chapter </ A > < A the href = "# I3" > Chapter </ A > < A the href = "# I4" > section chapters </ a > < div ID = "I1" style = "height: 600px;" > first chapter </ div > < div ID = "I2" style = "height: 600px;"> Content Chapter II </ div> < Div ID = "I3" style = "height: 600px;" > Content Chapter III </ div > < div ID "I4" = style = "height: 600px;" > Content Chapter IV </ div > < HR > </ body > </ HTML >
3, input tags, table tags, ul, ol, dl Tags:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Input</title> </head> <body> <form action="" enctype="multipart/form-data"> <input type="text" name="user"> <input type="password" name="pwd"> <hr> 男：<input type="radio" name="gender" value="1"> 女：<input type="radio" name="gender" value="2" checked="checked"> <hr> 形意：<input type="checkbox" name="favor" value="1"> 八卦：<input type="checkbox" name="favor" value="2"> 太极：<input type="checkbox" name="favor" value="3"> <hr> <input type="file" name="f1"> <hr> <select name="city" id="c1"> <option value="1">南京</option> <option value="2">北京</option> <option value="3" selected="selected">上海</option> </select> <br> <textarea name="t1" id="t1" cols="30" rows="10"></textarea> <input type="submit" value="submit"> <input type="reset" value="reset"> <input type="button" value="button"> </form> <hr> <table border="1"> <thead> <tr> <th>11</th> <th>22</th> <th>33</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">2列</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="2">2行</td> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </tbody> </table> <ul> <li>点</li> <li>点</li> <li>点</li> </ul> <ol> <li>序列</li> <li>序列</li> <li>序列</li> </ol> <dl> <dt>1</dt> <dd>11</dd> <dd>11</dd> <dd></11dd> <dt>2</dt> <dd>22</dd> <dd>22</dd> <dd>22</dd> </dl> </body> </html>
4, img, spaces, the size in number, and the fieldset label (label and comprises a jump point corresponding to the input block):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="https://www.sogou.com/web"> <input type="text" name="query"> <input type="submit" value="搜索"> </form> <p>> <</p> <fieldset> <legend>登陆</legend> <label for="i1">账号:</label> <input id="i1" type="text" name="user"> <br> <label for="i2">账号:</label> <input id="i2" type="text" name="passwd"> </fieldset> <img src="test.gif" title="美女" alt="fuckme"> </body> </html>
HTML of knowledge on first so be it ......