1 HTML概述 2 3 超文本标记语言（Hyper Text Markup Language） 4 HTML文档是一个包含标记的文本文件 5 文件名以.htm或者.html 结尾 6 7 ------------------------------------------------------------------------------ 8 9 文档结构 10 11 为了使浏览器能正确渲染页面，我们需要告诉浏览器网页所使用的文档类型（DOCTYPE）。 12 13 目前的HTML版本是4.01，但是实际中广泛使用的是XHTML 1.0 Transitional。 14 15 XHTML比HTML有更加严格的语法： 16 标签必须被正确地嵌套。 （<b><i>Hello</b></i> 是不正确的） 17 标签名必须用小写字母。 18 所有标签必须闭合 19 20 DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分，除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。 21 在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。 打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。 22 23 一个完整的页面： 24 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 25 26 其中的DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。 27 28 29 为了让浏览器正确的渲染HTML文档，我们需要告诉浏览器我们的HTML文档使用的是哪个版本的HTML。 30 31 当前的HTML 4.01，有三个不同的版本： 32 33 Strict 34 最严格、干净的HTML版本。不允许表现层的属性和标签，W3C也将逐渐淘汰这些标签，因为完全可以用CSS来实现。比如<center> <font> <iframe> 标签，以及width，height(img,table)，align(table)，target(a)等属性。 35 36 Transitional: 37 过渡期HTML版本。支持大部分的表现层属性和标签。 38 39 Frameset: 40 允许在一个页面中嵌入多个页面。 41 42 使用三个不同版本的HTML，需要在页面的第一行添加DOCTYPE声明： 43 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 44 45 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 46 47 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 48 49 XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 50 51 ------------------------------------------------------------------------------ 52 基本标签 53 54 块级标签 55 就像标题、段落一样，需要在页面上占据一块的位置的标签。 56 <h1> 最大的标题 <h2> - <h6> 大小依次减小的标题 <p> 段落 57 58 <pre> 显示一段预格式化的文本。此标签内的空格、换行、Tab等都被原样显示出来。一般用来显示一段源代码。 59 predefined：即预定义的。 paragraph：段落 60 61 <pre> ******************** 62 if (!IsPostBack) 63 { 64 string num1 = Request.QueryString["num1"]; 65 string num2 = Request.QueryString["num2"]; 66 67 if (!String.IsNullOrEmpty(num1) && !String.IsNullOrEmpty(num2)) 68 { 69 labResult.Text = (Convert.ToInt32(num1) + Convert.ToInt32(num2)).ToString(); 70 } 71 } 72 </pre> ********************* 73 74 显示效果如下： 75 if (!IsPostBack) 76 { 77 string num1 = Request.QueryString["num1"]; 78 string num2 = Request.QueryString["num2"]; 79 80 if (!String.IsNullOrEmpty(num1) && !String.IsNullOrEmpty(num2)) 81 { 82 labResult.Text = (Convert.ToInt32(num1) + Convert.ToInt32(num2)).ToString(); 83 } 84 } 85 86 大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）。 87 88 <div>一般块级标签。 89 90 <hr>水平线 91 92 注：HTML自动在一个<h1> - <h6> <p> <pre> 的段落前后各添加一个空行。 93 94 ------------------------------------------------------------------------------ 95 基本标签 96 97 内联标签 98 <em> 强调，大部分浏览器渲染为斜体。 99 <strong> 强调，大部分浏览器渲染为黑体。 100 <sub> 下标 101 <sup> 上标 102 103 内联标签通常用于样式化一行中的文本，并且不会导致换行。常见的内联标签包括<i>斜体、<em>、<strong>和<b>。 104 105 <code> 标示一段代码 <span> 一般内联标签 106 <br> 换行 <b> 黑体 <i> 斜体 107 注：<span> 标签被用来组合文档中的行内元素。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异 108 109 ------------------------------------------------------------------------------ 110 实体字符 111 112 HTML文档本身使用了一些字符来作为标签，所以要想在页面上显示 < 或 >，就必须使用实体字符。 113 比如使用 < 可以在页面上显示 < 字符。 114 115 实体字符的格式是： 116 AND符号（&） + 实体名 +分号（;） 117 118 转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。 119 120 常用的实体字符 ****************************** 121 122 空格 123 < < 124 > > 125 & & 126 " “ 127 © ? 128 ® ? ****************************** 129 130 参考：http://www.w3schools.com/html/html_entities.asp 131 132 <p>空格： END</p> 133 <p>左括号：<</p> 134 <p>右括号：></p> 135 <p>AND符号：&</p> 136 <p>引号："</p> 137 <p>人民币：¥</p> 138 <p>版权：©</p> 139 <p>注册：®</p> 140 <p>乘号：×</p> 141 <p>除号：÷</p> 142 143 ------------------------------------------------------------------------------ 144 链接 145 146 HTML使用超级链接来连接到网络上的其他页面。 147 148 一个简单的链接是由 <a> 标签和 href 属性构成的 149 150 <a href="http://www.baidu.com/">百度</a> 151 152 href 属性 153 -- 绝对路径 154 http: 155 --HTTP请求 156 https: ******************** 157 --加密的HTTP请求 158 mailto: 159 --打开邮件客户端，准备发送邮件 160 ftp: 161 --打开FTP服务器 162 163 示例：绝对路径 164 <a href="http://www.baidu.com/">链接到百度首页</a> 165 <a href="mailto:leizhang5@iflytek.com">打开邮件客户端</a> 166 <a href="https://mail.google.com/">登陆Gmail</a> 167 <a href="ftp://mail.ustc.edu.cn/">登陆科大FTP服务器</a> 168 169 href 属性 170 --相对路径 **************** 171 ./ 172 --本目录 也可以不写 173 ../ 174 --上一级目录 175 ../../ 176 --上一级目录的上一级目录 177 / 178 --根目录 179 180 target属性（控制链接打开的位置） 181 _blank 182 新窗口中打开链接 183 _self 184 当前窗口中打开链接（默认） 185 _parent 186 父窗口中打开链接 187 _top 188 最顶层父窗口中打开链接 189 targetname *************** 190 指定窗口或Frame中打开链接 191 192 注：当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 "view_window"，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 "view_window" 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。（即相当于java中的覆盖或重写的方法，取代原来的页面内容） 193 194 <a href="http://www.baidu.com" target="page1">在IFRAME中打开百度首页</a> 195 <a href="../character.htm" target="page1">在IFRAME中打开字符实体示例</a> 196 <iframe style=" 600px; height: 300px; border: 1px solid #666;" name="page1"> 197 </iframe> ********************** 198 199 <a href="#" onclick="javascript:window.open('','mywindow');">打开一个空白的新窗口 *********************** 200 </a> 201 <a href="test2.htm" target="mywindow">在这个新窗口中打开“test2.htm”</a> 202 203 ------------------------------------------------------------------------------ 204 页面锚点 205 206 html 锚点 到底是干吗的？ ****************** 207 通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。 208 209 代码： 210 <a href="#001">跳到001</a> 211 ...文字省略 212 <a name="001" id="001" ></a> 213 ...文字省略 214 215 其实锚点只需name就可以可，加id是为了让它兼容性更好. 216 href的值要跟name i d 一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。 217 因为我们锚点的<a></a>值为空，为不影响美观我们加个空格就行了, 218 219 220 如以下代码，就可以兼容ie8 221 <a href="#001">跳到001</a> 222 ...文字省略 223 <a name="001" id="001" > </a> 224 ...文字省略 225 226 227 另一问题，想显示某页面(如：123.html)的某锚点内容呢？ 228 229 代码如下 230 <a href="123.html#001">跳到001</a> 231 ...文字省略 232 <a name="001" id="001" > </a> 233 ...文字省略 234 ------------------------------------------------------------------------------ 235 图片 236 237 可以在页面中添加bmp，gif，jpg，png等格式的图片。 238 src 是图片的路径 239 alt是图片不能显示时的文本，应该为每个图片提供这个属性。 240 241 <img alt=“birthday" src="images/birthday.bmp" /> 242 <img alt="Rose" src="images/rose2.bmp" /> 243 244 图片链接： 245 <a href="http://www.baidu.com/"> 246 <img alt="baidu" src="baidu_logo.gif" /> 247 </a> 248 249 大部分的浏览器会为图片链接的图片添加边框，可以通过设置图片的样式来去掉边框： ******************* 250 <a href="http://www.baidu.com/"> 251 <img alt="baidu" style="border: 0px;" src="baidu_logo.gif" /> 252 </a> ******************* 253 254 图片地图： 255 点击图片的不同部分，可以链接到不同的地方。 256 257 示例：图片地图 ****************** 258 <img alt="earth" src="./images/earth.bmp" usemap="#earthmap" /> 259 <map name="earthmap"> 260 <area shape="rect" coords="0,0,20,20" alt="baidu" href="http://www.baidu.com/" target="_blank" /> 261 <area shape="circle" coords="76,76,20" alt="google" href="http://www.google.cn/" 262 target="_blank" /> 263 </map> 264 265 <area>定义了图片中特定区域的链接行为 ************** 266 shape属性指出区域的形状 267 如果为矩形（rect），则coords需要指定四个数字（左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标） 268 如果为圆形（circle），则coods需要指定三个数字（圆心横坐标，圆心纵坐标，半径） 269 270 ------------------------------------------------------------------------------ 271 列表 272 273 无序列表 274 <ul> 275 <li>太阳</li> 276 <li>月亮</li> 277 <li>星星</li> 278 <li>地球</li> 279 </ul> 280 281 有序列表 282 <ol> 283 <li>太阳</li> 284 <li>月亮</li> 285 <li>地球</li> 286 </ol> 287 288 示例：无序列表中各无序图标形状 289 <ul type="disc"> 黑圆 290 <li>太阳</li> 291 <li>月亮</li> 292 <li>地球</li> 293 </ul> 294 <ul type="circle"> 白园 295 <li>太阳</li> 296 <li>月亮</li> 297 <li>地球</li> 298 </ul> 299 <ul type="square"> 黑方块 300 <li>太阳</li> 301 <li>月亮</li> 302 <li>地球</li> 303 </ul> 304 305 示例：嵌套列表 306 307 <ul> 308 <li>太阳</li> 309 <li>月亮</li> 310 <li>地球 311 <ul> 312 <li>海洋</li> 313 <li>陆地</li> 314 <li>雪山</li> 315 </ul> 316 </li> 317 </ul> 318 ------------------------------------------------------------------------------ 319 表格 320 321 Table用来展示列表数据。 322 <tr> 表示一行，<td>表示一个单元格 323 324 <table> 325 <tr> 326 <td>数据一</td> 327 <td> 数据二</td> 328 </tr> 329 </table> 330 331 border属性 332 <table border=“5"> 333 334 th与td标签 335 <td>：table data 表示一个单元格 336 <th>：table head 表示一个单元格，这个单元格是表头，浏览器一般渲染为黑体（可以是第一行横排或者是第一列纵排） *************** 337 338 cellpadding属性 ************************ 339 单元格的内边距。 340 <table border="1" cellpadding="20">(即单元格内的文字与左边边框的距离) 341 342 cellspacing属性 ************************ 343 单元格边框的宽度。 344 <table border="1" cellspacing="20">(即整个表格的外边框与单元格边框的距离)（注：将cellspacing="0" 则可实现外边框与内边框合并的效果，即只看到一个边框） ************************ 345 346 空单元格 347 如果table设置了border，那个空单元格的border会不显示，可以通过在空单元格中添加 来解决。 348 349 对齐方式 350 居左、右、中对齐 351 <th align="right">标题一</th> 352 <th align="right">标题二</th> 353 注意：需要在table中设置宽width和高height,如果只是设置cellpadding,是不会显示上下左右的排列 ************************** 354 355 表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。 ************************** 356 357 rowspan属性 358 跨行单元格，rowspan=”2” 表示当前单元格跨两行。(即上下单元格合并) 359 <td rowspan="2"> 360 361 colspan属性 362 跨列单元格，colspan=”2” 表示当前单元格跨两列。(即左右单元格合并) 363 <td colspan="2"> 364 ------------------------------------------------------------------------------