HTML 基本结构
<html> <head> <title>website title</title> </head> <body> content of website ... </body> </html>
基本标签
<!--Heading (?= 1 for largest to 6 for smallest, eg h1)--> <h1>...</h1> <!--Paragraph of Text--> <p>...</p> <!--Bold Text--> <b>...</b> <!--Basic Link--> <a href="url">...</a>
段落
<!--Division (or Section) of Page Content--> <hiv>...</hiv> <!--Line Break--> <br> <!--Basic Horizontal Line--> <hr>
List
<!--Ordered List--> <ol> <li>a</li> <li>b</li> <li>c</li> </ol> <!--Un-ordered List--> <ul> <li>a</li> <li>b</li> <li>c</li> </ul>
Table
<table border="1"> <thead> <!--Table Row within table--> <tr> <!--Number of columns the cell spans across (cell merge)--> <th colspan="3">title1</th> <!--Header Cell within table row--> <th>column2</th> <!--<th>column3</th>--> <!--<th>column4</th>--> </tr> </thead> <tbody> <tr> <!--Table Cell within table row--> <td>content1</td> <!--Number of row a cell spans across (cell merge)--> <td rowspan="2">content2</td> <td rowspan="2">content3</td> <td>content4</td> </tr> <tr> <td>column1</td> <td>column2</td> <!--<td>column3</td>--> <!--<td>column4</td>--> </tr> </tbody> </table>
表单
<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data"> <div> <!-- text: This is used for a single line of text; this uses the Size and Maxlength attributes. For multiple lines, use TEXTAREA --> <p>用户名: <input type="text" name="user" /> </p> <p>密码: <input type="password" name="passwd" /> </p> <p>邮箱: <input type="email" name="email" /> </p> <p>性别 (单选框): <!-- radio: Used to collect information where there is one and only one possible value from a set of alternatives. The Checked attribute can set the initial value of this element. --> <br /> 男 <input type="radio" name="gander" value="0" /> <br /> 女 <input type="radio" name="gander" value="1"/> </p> <p>爱好 (复选框): <!--checkbox: This is used for gathering data that can have multiple values at a time.--> <br /> 爱好1 <input type="checkbox" name="favor" value="1" /> <br /> 爱好2 <input type="checkbox" name="favor" value="2"/> <br /> 爱好3 <input type="checkbox" name="favor" value="3"/> </p> <p>city: <select name="city"> <!--occurs only within the SELECT element and is used to represent each choice of the SELECT.--> <option value="1">shanghai</option> <option value="2">beijing</option> <option value="3">guangzhou</option> </select> <select name="city2" multiple size="2"> <option value="4">shanghai</option> <option value="5">beijing</option> <option value="6">guangzhou</option> </select> <select name="city3"> <optgroup label="south"> <option value="7">shanghai</option> </optgroup> <optgroup label="north"> <option value="8">beijing</option> </optgroup> </select> </p> <p>file: <input type="file" /></p> <p>remark: <textarea name="extra"></textarea></p> <input type="submit" value="submit" /> <input type="button" value="button" /> <input type="reset" value="reset" /> </div> </form>
<style> p { font-size: 12px; color: red; background-color: green} </style>
/*class 选择, 找到c1的标签*/
.c1{
background-color: red;
}
id 选择器
/*id 选择, 找到id 等于i1的标签*/
#i1{
font-size: 50px;
/* color: green */
}
关联选择器
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*class 名字前加点 标签类型不加点*/ #one .two em { font-size: 12px; color: red; background-color: gray; } </style> </head> <body> <div id="one"> <p class="two"> <em>123 </em> </p> </div> </body>
第二种关联选择器：
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*以标签类型作为选择器*/ div p em { font-size: 12px; color: red; background-color: gray; } </style> </head> <body> <div> <p> <em>123 </em> </p> </div> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*混合以 class id 标签名称等标记作为选择器*/ p,div,a,h1,.one,#two { font-size: 12px; color: red; background-color: gray; } </style> </head> <body> <p> aaaaa </p> <div> bbbbbb </div> <b class="one"> cccccc </b> <br> <em id="two"> ddddddddd </em> </body>
原文：http://www.cnblogs.com/garyang/p/5751576.html