HTML标签
常用标签
-
<meta > metadata information
页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
<!-- 下方标签为该html页面的默认语言为en--> <html lang = "en"> <head> <meta charset= "UTF-8"> <!--下方标签为该HTML页面每间隔3秒自动刷新页面 --> <!-- <meta http-equiv="Refresh" Content = "3"> --> <!--下方标签为该HTML页面每间隔3秒自动刷新页面,并调整到其他页面，但是不建议使用这个--> <!-- <meta http-equiv="Refresh" Content = "3";Url =http://wwww.baidu.com> --> <meta name= "keywords" content = "网站关键字"> <meta name= "description" content = "关键字对应的内容"> <!-- 下方标签为HTML兼容IE模式--> <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;"> <title> HTML头部信息</title> <!-- <link />欠 搞图标 <style />欠 <script />欠 --> </head> </html>
-
Title
<title> HTML头部信息</title>
-
Linkcss
1.css css样式
< link rel="stylesheet" type="text/css" href="css/common.css" >
2.icon 搞图标
< link rel="shortcut icon" href="image/favicon.ico">
特殊符号
参考：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
空格
> >
< <
P标签 代指的是段落
<p> </p>
<br />换行（自闭合标签建议自行加上/）
EG：
<p> 撒大声地<br />艾斯德斯是 </p>
H标签标题，从大到小
<H1>1</H1>
<H2>2</H2>
<H3>3</H3>
<H4>4</H4>
<H5>5</H5>
<H6>6</H6>
span标签
<span>hello</span>
<span>hello</span>
<span>hello</span>
img标签
<!--图片标签，3.png放于相对路径，
style限制图片大小
镶嵌在a标签里，就能做到点击图片超链接；
没有图片的时候显示alt内容
鼠标指到这里显示的内容，就是title的内容
-->
<a href="http://www.baidu.com">
<img src = "3.png" title = "鼠标指到这里显示的内容" style="height: 200px;width: 200px;" alt = "没有图片的时候显示这个">
</a>
ul与li配合,ol与li配合,dl dt dd三者使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--图片标签，3.png放于相对路径， style限制图片大小 镶嵌在a标签里，就能做到点击图片超链接； 没有图片的时候显示alt内容 鼠标指到这里显示的内容，就是title的内容 --> <a href="http://www.baidu.com"> <img src = "3.png" title = "鼠标指到这里显示的内容" style="height: 200px;width: 200px;" alt = "没有图片的时候显示这个"> </a> <!--ul与li配合使用，显示前面加上黑色圆点--> <ul> <li>前面是黑色圆点</li> <li>前面是黑色圆点</li> <li>前面是黑色圆点</li> <li>前面是黑色圆点</li> </ul> <!--ol与li配合使用，显示前面是数字排列 1.前面是数字 2.前面是数字 3.前面是数字 4.前面是数字 --> <ol> <li>前面是数字</li> <li>前面是数字</li> <li>前面是数字</li> <li>前面是数字</li> </ol> <!-- dl dt dd三者使用如下 上一级目录 下一级目录 下一级目录 下一级目录 上一级目录 下一级目录 下一级目录 下一级目录 --> <dl> <dt>上一级目录</dt> <dd>下一级目录</dd> <dd>下一级目录</dd> <dd>下一级目录</dd> <dt>上一级目录</dt> <dd>下一级目录</dd> <dd>下一级目录</dd> <dd>下一级目录</dd> </dl> </body> </html>
table
<!--colspan属性表示占用多少格，这里是2格-->
<!-- rowspan表示列占用两个，所以下一列只需要三个td-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--表格 border：边框大小 --> <table border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> <td>第一行第四列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> <td>第二行第四列</td> </tr> </table> <!--这个是规范式的写法--> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <!--colspan属性表示占用多少格，这里是2格--> <td colspan="2">2</td> <td>3</td> </tr> <tr> <!-- rowspan表示列占用两个，所以下一列只需要三个td--> <td rowspan="2">11</td> <td>22</td> <td>33</td> <td>44</td> </tr> <tr> <td>22</td> <td>33</td> <td>44</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> <td>44</td> </tr> </tbody> </table> </body> </html>
label标签
<!--一般是一般的文本，配合input使用
label里面的for的名称与input的id一致的时候，就能创建关联，即点击用户名，光标到文本里
-->
<label for="username">用户名：</label>
<input id="username" name = "user" type="text"/>
fieldset（一般不用）
<fieldset>
<legend>登陆</legend>
<!--一般是一般的文本，配合input使用
label里面的for的名称与input的id一致的时候，就能创建关联，即点击用户名，光标到文本里
-->
<label for="username">用户名：</label>
<input id="username" name = "user" type="text"/>
<label for="password">密码：</label>
<input id="password" name = "password" type="text"/>
</fieldset>
