标签：
HTML:
Hyper Text Markup Language 超文本标签语言
浏览器：解释和执行HTML源码的工具
富文本和超文本的区别：
富文本（RTF）:类似DOC格式（Word文档）的文件，有很好的兼容性
超文本：用★超链接★的方法，将各种不同空间的文字信息组织在一起的网状文本
格式：
1 <html> 2 <head> 3 <title>我的第一个网页</title> 4 </head> 5 <body> 6 您好，Ivy! 7 </body> 8 </html>
工具：
Editplus
Dreamweaver（前端）
Eclipse WTP插件
Firebug插件（火狐）
HBuider（现流行）
Chorme插件
-------------------------------------------------标签---------------------------------------------
<meta>标签
1.描述搜索关键字和描述（SEO）
2.一般用于描述文档类型和字符编码
格式：
<meta http-equiv = "Content-Type" content = "text/html;charset = gb2312"/>
范例：
1 <head> 2 <meta name="keywords" content="资讯，新闻，财经，视频" /> 3 <meta name="description" content="腾讯网服务于全球华人用户" /> 4 </head>
字符集
gb2312 简体中文字
GBK 中文
big5 繁体中文
UTF-8 国际编码-常用
标签
1.块级标签 block
a.总在新行开始
b.高度，行高以及外边距和内边距都可控
c.宽度(缺省是它的容器的)100%，除非设定一个高度
d.可容纳所有的内联元素
2.行级标签 inline
a.和其他元素都在一行
b.高度，行高以及外边距和内边距不可变
c.宽度就是它的文件或图片宽度，不可改变
d.内联元素只能容纳文本或者其他内联元素
块标签：
1.标题标签 <h1>
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第三个页面</title> 5 </head> 6 <body> 7 <h1>一级标题</h1> 8 <h2>二级标题</h2> 9 <h3>三级标题</h3> 10 <h4>四级标题</h4> 11 <h5>五级标题</h5> 12 <h6>六级标题</h6> 13 </body> 14 </html>
2.段落标签 <P>
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第四个页面</title> 5 </head> 6 <h1>做人还是要有梦想滴</h1> 7 <p>万一实现了呢？</p> 8 <p>做人没梦想，跟咸鱼有什么分别呢？</p> 9 <body> 10 </body> 11 </html>
3.水平标签 <hr/>
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第五个页面</title> 5 </head> 6 <h1>做人还是要有梦想滴</h1> 7 <hr/> 8 <p>万一实现了呢？</p> 9 <p>做人没梦想，跟咸鱼有什么分别呢？</p> 10 <body> 11 </body> 12 </html>
4.有序列表 ol
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>我的第六个界面</title> 5 </head> 6 <body> 7 <h3>把大象放进冰箱里：</h3> 8 <ol> 9 <li>打开冰箱</li> 10 <li>大象放进冰箱</li> 11 <li>关上冰箱门</li> 12 </ol> 13 </body> 14 </html>
5.无序列表 ul
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>我的第七个界面</title> 5 </head> 6 <body> 7 <h3>把长颈鹿放进冰箱里：</h3> 8 <ul> 9 <li>打开冰箱</li> 10 <li>把大象取出冰箱</li> 11 <li>放进长颈鹿</li> 12 <li>关上冰箱门</li> 13 </ul> 14 </body> 15 </html>
6.自定义列表 dl,dt,dd
【图文混排】
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第八个网页</title> 5 </head> 6 <body> 7 <dl> 8 <dt>皎月女神 黛安娜</dt> 9 <dd>黛安娜作为一个近战法师，有着其他AP难以企及的爆发</dd> 10 <dd>但缺点也很明显，作为一个法师却是近战</dd> 11 </dl> 12 </body> 13 </html>
7.表格标签 <table>
范例：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>第九个网页</title> 5 </head> 6 <body> 7 <table> 8 <!--tr,行--> 9 <tr> 10 <!--td,列--> 11 <td>h1-h6</td> 12 <td>标题标签</td> 13 <td> </td> 14 <td>p</td> 15 <td>段落标签</td> 16 </tr> 17 <tr> 18 <td>ivy</td> 19 <td>female</td> 20 <td> </td> 21 <td> </td> 22 <td>2016-4-6</td> 23 </tr> 24 </table> 25 </body> 26 </html>
8.层标签 <div>
布局
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第十个网页</title> 5 </head> 6 <body> 7 <div class="weapon"> 8 <h3>地狱咆哮的战戟</h3> 9 <dl> 10 <dt>物品等级 630</dt> 11 <dd>战网账号绑定</dd> 12 <dd>双手装备</dd> 13 <dd>长柄武器</dd> 14 <dd>786 - 1,181伤害</dd> 15 </dl> 16 </div> 17 </body> 18 </html>
行级标签
1.图像标签 <img>
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第十一个网页</title> 5 </head> 6 <body> 7 <!--html和images文件夹在同一个文件夹中，相对路径--> 8 <img src="images/1.jpg" alt= "女神" title="女神"/> 9 </body> 10 </html>
2.范围标签 <span>
a.最小的行级标签
b.标记行元素，效果要另外写一个文件格式
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第十二个网页</title> 5 </head> 6 <body> 7 <img src="images/1.jpg" alt= "女神" title="女神" width="200px"/> 8 <p> 9 <span>女神</span>女神范 10 </p> 11 </body> 12 </html>
3.换行标签 <br/>
注意观察与<p>的区别
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第十三个网页</title> 5 </head> 6 <body> 7 <h3>法海不懂爱 - 龚琳娜</h3> 8 <p> 9 法海<br/> 10 你为什么不同意我们的爱<br/> 11 你不想让我们幸福吗<br/> 12 一生难得真诚的爱 13 <!--没有<br/>,在<p>中换行，系统默认是空格--> 14 你想遵循你的道理 15 </p> 16 </body> 17 </html>
4.<pre> 原样输出
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第十四个网页</title> 5 </head> 6 <body> 7 <h3>法海不懂爱 - 龚琳娜</h3> 8 <p> 9 <pre> 10 <!--原样输出信息--> 11 法海<br/> 12 你为什么不同意我们的爱<br/> 13 你不想让我们幸福吗<br/> 14 一生难得真诚的爱<br/> 15 你想遵循你的道理<br/> 16 </pre> 17 </p> 18 </body> 19 </html>
5.<sub></sub> 下标
<sup></sup> 上标
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>第十五个网页</title> 5 </head> 6 <body> 7 <p> 8 <sup>七</sup>上<sub>八</sub>下 9 </p> 10 </body> 11 </html>
6.超链接★★★★★
语法：<a href="链接地址" target="目标窗口位置">
链接文本或图像</a>
★★href 跳转到路径★★
target取值：_blank, _parent, _top, _self
a.页面间链接
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>超链接示例</title> 5 </head> 6 <body> 7 <a href="http://www.baidu.com">点我看看-绝对路径</a><br/> 8 <!--绝对路径？？？--> 9 <a href="/index.html">点我看看-站点根目录绝对路径</a><br/> 10 <a href="index.html" target="_self">点我看看-相对路径</a><br/> 11 <!--在新的空白网页显示内容--> 12 <a href="index.html" target="_blank">点我看看-相对路径</a><br/> 13 </body> 14 </html>
b.锚链接
1.常用页面内导航
2.小说内容、微博或新闻页面的回到页首功能
范例：当页返回顶部
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>锚链接示例</title> 5 </head> 6 <body> 7 <p> 8 你为什么不同意我们的爱1 9 你不想让我们幸福吗<br/> 10 你为什么不同意我们的爱2 11 你不想让我们幸福吗<br/> 12 你为什么不同意我们的爱 13 你不想让我们幸福吗<br/> 14 你为什么不同意我们的爱 15 你不想让我们幸福吗<br/> 16 你为什么不同意我们的爱 17 你不想让我们幸福吗<br/> 18 你为什么不同意我们的爱 19 你不想让我们幸福吗<br/> 20 你为什么不同意我们的爱 21 你不想让我们幸福吗<br/> 22 你为什么不同意我们的爱 23 你不想让我们幸福吗<br/> 24 你为什么不同意我们的爱 25 你不想让我们幸福吗<br/> 26 你为什么不同意我们的爱 27 你不想让我们幸福吗<br/> 28 你为什么不同意我们的爱 29 你不想让我们幸福吗<br/> 30 你为什么不同意我们的爱 31 你不想让我们幸福吗<br/> 32 你为什么不同意我们的爱 33 你不想让我们幸福吗<br/> 34 你为什么不同意我们的爱 35 你不想让我们幸福吗<br/> 36 你为什么不同意我们的爱 37 你不想让我们幸福吗<br/> 38 你为什么不同意我们的爱 39 你不想让我们幸福吗<br/> 40 你为什么不同意我们的爱 41 你不想让我们幸福吗<br/> 42 你为什么不同意我们的爱 43 你不想让我们幸福吗<br/> 44 你为什么不同意我们的爱 45 你不想让我们幸福吗<br/> 46 <!--1.定锚--> 47 <a name="TOP">同意</a> 48 你为什么不同意我们的爱 49 你不想让我们幸福吗<br/> 50 你为什么不同意我们的爱 51 你不想让我们幸福吗<br/> 52 你为什么不同意我们的爱 53 你不想让我们幸福吗<br/> 54 你为什么不同意我们的爱 55 你不想让我们幸福吗<br/> 56 你为什么不同意我们的爱 57 你不想让我们幸福吗<br/> 58 你为什么不同意我们的爱 59 你不想让我们幸福吗<br/> 60 你为什么不同意我们的爱 61 你不想让我们幸福吗<br/> 62 你为什么不同意我们的爱 63 你不想让我们幸福吗<br/> 64 你为什么不同意我们的爱 65 你不想让我们幸福吗<br/> 66 你为什么不同意我们的爱 67 你不想让我们幸福吗<br/> 68 你为什么不同意我们的爱 69 你不想让我们幸福吗<br/> 70 你为什么不同意我们的爱 71 你不想让我们幸福吗<br/> 72 你为什么不同意我们的爱 73 你不想让我们幸福吗<br/> 74 你为什么不同意我们的爱 75 你不想让我们幸福吗<br/> 76 你为什么不同意我们的爱 77 你不想让我们幸福吗<br/> 78 你为什么不同意我们的爱 79 你不想让我们幸福吗<br/> 80 你为什么不同意我们的爱 81 你不想让我们幸福吗<br/> 82 你为什么不同意我们的爱 83 你不想让我们幸福吗<br/> 84 你为什么不同意我们的爱 85 你不想让我们幸福吗<br/> 86 你为什么不同意我们的爱 87 你不想让我们幸福吗<br/> 88 你为什么不同意我们的爱 89 你不想让我们幸福吗<br/> 90 你为什么不同意我们的爱 91 你不想让我们幸福吗<br/> 92 你为什么不同意我们的爱 93 你不想让我们幸福吗<br/> 94 你为什么不同意我们的爱 95 你不想让我们幸福吗<br/> 96 你为什么不同意我们的爱 97 你不想让我们幸福吗<br/> 98 你为什么不同意我们的爱 99 你不想让我们幸福吗<br/> 100 你为什么不同意我们的爱 101 你不想让我们幸福吗<br/> 102 你为什么不同意我们的爱 103 你不想让我们幸福吗<br/> 104 你为什么不同意我们的爱 105 你不想让我们幸福吗<br/> 106 你为什么不同意我们的爱 107 你不想让我们幸福吗<br/> 108 你为什么不同意我们的爱 109 你不想让我们幸福吗<br/> 110 你为什么不同意我们的爱 111 你不想让我们幸福吗<br/> 112 你为什么不同意我们的爱 113 你不想让我们幸福吗<br/> 114 你为什么不同意我们的爱 115 你不想让我们幸福吗<br/> 116 你为什么不同意我们的爱 117 你不想让我们幸福吗<br/> 118 你为什么不同意我们的爱 119 你不想让我们幸福吗<br/> 120 你为什么不同意我们的爱 121 你不想让我们幸福吗<br/> 122 你为什么不同意我们的爱 123 你不想让我们幸福吗<br/> 124 你为什么不同意我们的爱 125 你不想让我们幸福吗<br/> 126 你为什么不同意我们的爱 127 你不想让我们幸福吗<br/> 128 你为什么不同意我们的爱 129 你不想让我们幸福吗<br/> 130 你为什么不同意我们的爱 131 你不想让我们幸福吗<br/> 132 你为什么不同意我们的爱 133 你不想让我们幸福吗<br/> 134 你为什么不同意我们的爱 135 你不想让我们幸福吗<br/> 136 你为什么不同意我们的爱 137 你不想让我们幸福吗<br/> 138 你为什么不同意我们的爱 139 你不想让我们幸福吗<br/> 140 你为什么不同意我们的爱 141 你不想让我们幸福吗<br/> 142 你为什么不同意我们的爱 143 你不想让我们幸福吗<br/> 144 你为什么不同意我们的爱 145 你不想让我们幸福吗<br/> 146 你为什么不同意我们的爱 147 你不想让我们幸福吗<br/> 148 你为什么不同意我们的爱 149 你不想让我们幸福吗<br/> 150 你为什么不同意我们的爱 151 你不想让我们幸福吗<br/> 152 你为什么不同意我们的爱 153 你不想让我们幸福吗<br/> 154 你为什么不同意我们的爱 155 你不想让我们幸福吗<br/> 156 你为什么不同意我们的爱 157 你不想让我们幸福吗<br/> 158 你为什么不同意我们的爱 159 你不想让我们幸福吗<br/> 160 你为什么不同意我们的爱 161 你不想让我们幸福吗<br/> 162 你为什么不同意我们的爱 163 你不想让我们幸福吗<br/> 164 你为什么不同意我们的爱 165 你不想让我们幸福吗<br/> 166 你为什么不同意我们的爱 167 你不想让我们幸福吗<br/> 168 你为什么不同意我们的爱 169 你不想让我们幸福吗<br/> 170 你为什么不同意我们的爱 171 你不想让我们幸福吗<br/> 172 你为什么不同意我们的爱 173 你不想让我们幸福吗<br/> 174 你为什么不同意我们的爱 175 你不想让我们幸福吗<br/> 176 你为什么不同意我们的爱 177 你不想让我们幸福吗<br/> 178 你为什么不同意我们的爱 179 你不想让我们幸福吗<br/> 180 你为什么不同意我们的爱 181 你不想让我们幸福吗<br/> 182 你为什么不同意我们的爱 183 你不想让我们幸福吗<br/> 184 你为什么不同意我们的爱 185 你不想让我们幸福吗<br/> 186 你为什么不同意我们的爱 187 你不想让我们幸福吗<br/> 188 你为什么不同意我们的爱 189 你不想让我们幸福吗<br/> 190 你为什么不同意我们的爱 191 你不想让我们幸福吗<br/> 192 你为什么不同意我们的爱 193 你不想让我们幸福吗<br/> 194 你为什么不同意我们的爱 195 你不想让我们幸福吗<br/> 196 你为什么不同意我们的爱 197 你不想让我们幸福吗<br/> 198 你为什么不同意我们的爱 199 你不想让我们幸福吗<br/> 200 你为什么不同意我们的爱 201 你不想让我们幸福吗<br/> 202 你为什么不同意我们的爱 203 你不想让我们幸福吗<br/> 204 你为什么不同意我们的爱 205 你不想让我们幸福吗<br/> 206 你为什么不同意我们的爱 207 你不想让我们幸福吗<br/> 208 你为什么不同意我们的爱 209 你不想让我们幸福吗<br/> 210 你为什么不同意我们的爱 211 你不想让我们幸福吗<br/> 212 你为什么不同意我们的爱 213 你不想让我们幸福吗<br/> 214 你为什么不同意我们的爱 215 你不想让我们幸福吗<br/> 216 你为什么不同意我们的爱 217 你不想让我们幸福吗<br/> 218 你为什么不同意我们的爱 219 你不想让我们幸福吗<br/> 220 你为什么不同意我们的爱 221 你不想让我们幸福吗<br/> 222 你为什么不同意我们的爱 223 你不想让我们幸福吗<br/> 224 你为什么不同意我们的爱 225 你不想让我们幸福吗<br/> 226 你为什么不同意我们的爱 227 你不想让我们幸福吗<br/> 228 你为什么不同意我们的爱 229 你不想让我们幸福吗<br/> 230 你为什么不同意我们的爱 231 你不想让我们幸福吗<br/> 232 你为什么不同意我们的爱 233 你不想让我们幸福吗<br/> 234 你为什么不同意我们的爱 235 你不想让我们幸福吗<br/> 236 你为什么不同意我们的爱 237 你不想让我们幸福吗<br/> 238 你为什么不同意我们的爱 239 你不想让我们幸福吗<br/> 240 你为什么不同意我们的爱 241 你不想让我们幸福吗<br/> 242 你为什么不同意我们的爱 243 你不想让我们幸福吗<br/> 244 你为什么不同意我们的爱 245 你不想让我们幸福吗<br/> 246 你为什么不同意我们的爱 247 你不想让我们幸福吗<br/> 248 你为什么不同意我们的爱 249 你不想让我们幸福吗<br/> 250 你为什么不同意我们的爱 251 你不想让我们幸福吗<br/> 252 你为什么不同意我们的爱 253 你不想让我们幸福吗<br/> 254 </p> 255 <!--2.链接--> 256 <a href="#TOP">我要回顶部</a> 257 </body> 258 </html>
范例：新的一个网页返回顶部
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <a href="锚链接.html#TOP">我要去顶部！！！</a> 8 </body> 9 </html>
c.功能性链接
电子邮箱、QQ链接等
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <a href="mailto:test@crazy9.com">回复邮件给我</a> 8 </body> 9 </html>
7.斜体标签 <em>
8.粗体标签 <strong>
服务器
【apache】【wamp】
【tomcat】
<!--注释内容--> 页面不显示，源代码显示
注意：当注释内容与IE6有关，如果是IE6，注释就只是注释；
如果不是IE6，注释就会执行
Ite：less than or equal to
网页实体
空格：
大于： >
小于： <
双引号： "
商标： &trade
版权： ©
&符号： &
WEB结构
1.语义化
2.结构和形式分离
HTML5语义化
文档声明：<!DOCTYPE html>
语法：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>无标题文档</title> 5 </head> 6 <body> 7 <header> 8 <nav>导航</nav> 9 <ul>二级导航</ul> 10 </header> 11 <main> 12 页面主要内容 13 </main> 14 <foot> 15 页脚部分 16 </foot> 17 </body> 18 </html>
标准规范：
1.文档类型声明
a.Strict 小写字母，属性值用双引号；标签闭合；属性不能缩减；不能用被排斥的元素
b.Trasitional 兼容老版浏览器
c.Frameset 框架页使用
2.标签规范
标签名小写
标签应闭合
标签正确嵌套
标签：
原文地址：http://www.cnblogs.com/ivy-xu/p/5365678.html
