HTML

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>&nbsp;&nbsp;</td>
14 <td>p</td>
15 <td>段落标签</td>
16 </tr>
17 <tr>
18 <td>ivy</td>
19 <td>female</td>
20 <td>&nbsp;&nbsp;</td>
21 <td>&nbsp;&nbsp;</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

网页实体
空格： &nbsp;
大于： &gt;
小于： &lt;
双引号： &quot;
商标： &trade
版权： &copy
&符号： &amp;

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.标签规范
　　标签名小写
　　标签应闭合
　　标签正确嵌套

 

posted @ 2016-04-07 21:59  Ivy_Xu  阅读(256)  评论(0)  编辑  收藏  举报