你的位置:首页 > 网页设计

[网页设计]HTML知识点总结以及典型例子讲解


一、HTML文本格式化标签(这些标签都不换行)

eg:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML文本格式化标签</title> 6 </head> 7  8 <body> 9   <b>定义粗体文字</b><br />10   <big>定义大号字</big><br />11   <em>定义着重文字</em><br />12   <i>定义斜体字</i><br />13   <small>定义小号字</small><br />14   <strong>定义加重语气</strong><br />15   <sub>定义下标字</sub><br />16   <sup>定义上标字</sup><br />17   <ins>定义插入字</ins><br />18   <del>定义删除字</del><br />19 </body>20 </html>

效果:


二、HTML图像

1、图像标签:

   <map> 标签指带有可点击区域的图像映射,<area>定义其具体位置

2、源属性(Src)、替换文本属性(Alt)

  src: 指 "source",源属性的值是图像的 URL 地址。

  alt:在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。

3、图片应用实例

  (1)将图片当做背景

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML图像</title> 6 </head> 7  8 <body background="1.png"> 9   <h3>图像背景</h3>10   <p>gif 和 jpg 文件均可用作 HTML 背景。</p>11   <p>如果图像小于页面,图像会进行重复。</p>12 </body>13 </html>

  效果:

 

  (2)排列图片:使用align属性(align="bottom";align="middle";align="top")

  (3)图像的浮动:使图片浮动至段落的左边或右边:使用align属性(align="left"或align="left")

  (4)调整图像尺寸:通过改变 img 标签的 "height" 和 "width" 属性的值,可以放大或缩小图像

1 <body>2   <img src="1.png" width="50" height="50">3   <img src="1.png" width="100" height="100">4 </body>

  (5)可以将图像作为链接使用

  (6)创建图像映射:即使用<map> 标签创建带有可供点击区域的图像地图

 


三、HTML表格

1、表格标签

 2、表格中的空单元格

  如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。(<td>&nbsp;</td>

3、设置表格边框:<table border="1">,无边框则border="0”

4、跨行或者跨咧的单元格:使用colspan来合并单元格

 1 <body> 2   <table border="1"> 3     <tr> 4      <th>姓名</th> 5      <th colspan="2">电话</th> 6     </tr> 7     <tr> 8      <td>Bill Gates</td> 9      <td>555 77 854</td>10      <td>555 77 855</td>11     </tr>12   </table>13 </body>

  效果:

5、单元格边距:cellpadding与单元格间距:cellspacing

 1 <body> 2   <table border="1"> 3     <tr> 4      <th>单元格</th><th>单元格</th> 5     </tr> 6      <tr> 7      <th>单元格</th><th>单元格</th> 8     </tr> 9   </table><br />10   <table border="1" cellpadding="10">11     <tr>12      <th>单元格</th><th>单元格</th>13     </tr>14      <tr>15      <th>单元格</th> <th>单元格</th>16     </tr>17   </table><br />18   <table border="1" cellspacing="10">19     <tr>20      <th>单元格</th> <th>单元格</th>21     </tr>22      <tr>23      <th>单元格</th><th>单元格</th>24     </tr>25   </table>26 </body>

  效果:


 

四、HTML 块元素、HTML 内联元素

  1、块级元素在浏览器显示时,通常会以新行来开始(和结束)。例子:<h1>, <p>, <ul>, <table>

  2、内联元素在显示时通常不会以新行开始。例子:<b>, <td>, <a>, <img>

  3、HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器,如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<span> 元素是内联元素,可用作文本的容器,当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

 


 

五、HTML颜色

1、颜色值:

  颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。

2、颜色名:

  仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持,它们是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的话,就应该使用十六进制的颜色值

3、部分颜色如下:

 


六、HTML布局

1、使用<div>元素布局

  每一对<div></div>标签代表一个块,对块的属性进行定义后,在标签里输入块的内容。

  (1)先将整体分块

1 <body>2   <div class="container">3     <div class="header">这是头部</div>4     <div class="left">这是左半部分</div>5     <div class="right">这是右半部分</div>6     <div class="footer">这是底部</div>7   </div>8 </body>

  效果:

  (2)对每一块进行样式定义

 1 <style type="text/css"> 2   *{     //使整体充满,不留一点空白边距 3     margin:0px; 4     padding:0px; 5   } 6   body{margin:0px;} 7   .container{ 8     height:500px; 9     width:100%;10   }11   .header{12     height:10%;13     background-color:#FF80C0;14   }15   .left{16     height:80%;17     width:30%;18     background-color:#0F9;19     float:left;  <!--从左到右的一个浮动-->20   }21   .right{22     height:80%;23     width:70%;24     background-color:#90F;25     float:left;  <!--没有这一行的话,此部分会出现在页面下方,不会靠右-->26   }27   .footer{28     height:10%;29     background-color:#999;30     clear:both;  <!--清除浮动,否则此部分会跟着上面浮动,不会出现在底部-->31   }32 </style>

 

  最后完成效果:

 2、使用<table>布局

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML布局</title> 6 </head> 7  8 <body marginheight="0px" marginwidth="0px"> 9   <table width="100%" height="500px">10     <tr>11       <td colspan="2" height="10%" bgcolor="#CC66CC"></td>12     </tr>13     <tr>14       <td height="80%" width="30%" bgcolor="#66FFCC"></td>15       <td height="80%" width="70%" bgcolor="#9900CC"></td>16     </tr>17     <tr>18       <td colspan="2" height="10%" bgcolor="#999999"></td>19     </tr>20   </table>21 </body>22 </html>

  效果:

 


 

七、框架

  框架也可以用来布局,通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

1、标签:

  (1)框架集标签:<frameset>

    *框架集标签定义如何将窗口分割为框架

    *每一个<frameset>定义一系列行或列

    *rows和cols的值规定了每行或每列占据屏幕的面积

  (2)框架标签:<frame>

  (3)内联框架:<iframe>

  (4)<noframes> 标签:固定框架大小,使用户不可以拖动边框来改变它的大小

  注意:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内

2、使用实例

  (1)垂直框架:

    *先创建三个基础框架,以其中一个为例:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML框架</title> 6 </head> 7  8 <body bgcolor="#66FFFF"> 9 </body>10 </html>

    *最后创建一个框架,将前面三个导入:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML框架</title> 6 </head> 7  8 <frameset cols="20%,30%,50%"> 9   <frame src="frame_a.html" />10   <frame src="frame_b.html" />11   <frame src="frame_c.html" />12 </frameset><noframes></noframes>13 14 </html>

    效果:

(水平框架只需将cols改为rows)

  (2)混合型框架:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML框架</title> 6 </head> 7  8 <frameset rows="50%,50%"> 9   <frame src="frame_a.html" />10 11   <frameset cols="30%,70%">12     <frame src="frame_b.html" />13     <frame src="frame_c.html" />14   </frameset>15 </frameset>16 </html>

  效果:

  (3)内联框架

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>内联框架</title> 6 </head> 7  8 <body> 9   <iframe src="Web前端练习代码/框架/1.png"></iframe>10 </body>11 </html>

  效果:

  内联框架可以用frameborder="0"来取消边框效果,还可以用width、height来设置大小

  (4)导航框架

    *设计好框架集页面,并为框架窗口定义名称

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航框架2</title> 6 </head> 7  8 <frameset cols="120,*">  <!--*计算机称为通配符,这是一个框架,一部份为120,其余的为剩下的全部!--> 9   <frame src="导航框架1.html" />10   <frame src="1.png" name="mainframe" />11 </frameset>12 </html>

 

    *设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航框架1</title> 6 </head> 7  8 <body> 9   <a href="frame_a.html" target="mainframe">frame_a</a><br /> <!--注意设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字-->10   <a href="frame_b.html" target="mainframe">frame_b</a><br />11   <a href="frame_c.html" target="mainframe">frame_c</a><br />12 </body>13 </html>

  效果: