>  기사  >  웹 프론트엔드  >  HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose

HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:32:481478검색

一、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 xmlns="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><br />

效果:

二、HTML图像

1、图像标签:

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

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 xmlns="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"    style="max-width:90%"  style="max-width:90%" alt="HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose" >3     <img  src="1.png"    style="max-width:90%"  style="max-width:90%" alt="HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose" >4 </body>

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

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

 

三、HTML表格

1、表格标签

 2、表格中的空单元格

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

 )

3、设置表格边框:

,无边框则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、块级元素在浏览器显示时,通常会以新行来开始(和结束)。例子:

,

,

    ,

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

, , HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose

  3、HTML

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

 

 

五、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、使用

元素布局

  每一对

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

  (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、使用

布局

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="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)框架集标签:

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

    *每一个

定义一系列行或列

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

  (2)框架标签:

  (3)内联框架:

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

  注意:不能将

标签与 标签同时使用!不过,假如你添加包含一段文本的 标签,就必须将这段文字嵌套于 标签内 <p>2、使用实例</p> <p>  (1)垂直框架:</p> <p>    *先创建三个基础框架,以其中一个为例:</p> <p class="sycode"> <pre class="precsshui"> 1 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 2 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;HTML框架&lt;/title&gt; 6 &lt;/head&gt; 7 8 &lt;body bgcolor=&quot;#66FFFF&quot;&gt; 9 &lt;/body&gt;10 &lt;/html&gt;</pre> </p> <p>    *最后创建一个框架,将前面三个导入:</p> <p class="sycode"> <pre class="precsshui"> 1 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 2 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;HTML框架&lt;/title&gt; 6 &lt;/head&gt; 7 8 &lt;frameset cols=&quot;20%,30%,50%&quot;&gt; 9 &lt;frame src=&quot;frame_a.html&quot; /&gt;10 &lt;frame src=&quot;frame_b.html&quot; /&gt;11 &lt;frame src=&quot;frame_c.html&quot; /&gt;12 &lt;/frameset&gt;&lt;noframes&gt;&lt;/noframes&gt;13 14 &lt;/html&gt;</pre> </p> <p>    效果:</p> <p>(水平框架只需将cols改为rows)</p> <p>  (2)混合型框架:</p> <p class="sycode"> <pre class="precsshui"> 1 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 2 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;HTML框架&lt;/title&gt; 6 &lt;/head&gt; 7 8 &lt;frameset rows=&quot;50%,50%&quot;&gt; 9 &lt;frame src=&quot;frame_a.html&quot; /&gt;10 11 &lt;frameset cols=&quot;30%,70%&quot;&gt;12 &lt;frame src=&quot;frame_b.html&quot; /&gt;13 &lt;frame src=&quot;frame_c.html&quot; /&gt;14 &lt;/frameset&gt;15 &lt;/frameset&gt;16 &lt;/html&gt;</pre> </p> <p>  效果:</p> <p></p> <p>  (3)内联框架</p> <p class="sycode"> <pre class="precsshui"> 1 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 2 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;内联框架&lt;/title&gt; 6 &lt;/head&gt; 7 8 &lt;body&gt; 9 &lt;iframe src=&quot;Web前端练习代码/框架/1.png&quot;&gt;&lt;/iframe&gt;10 &lt;/body&gt;11 &lt;/html&gt;</pre> </p> <p>  效果:</p> <p></p> <p>  内联框架可以用frameborder="0"来取消边框效果,还可以用width、height来设置大小</p> <p>  (4)导航框架</p> <p>    *设计好框架集页面,并为框架窗口定义名称</p> <p class="sycode"> <pre class="precsshui"> 1 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 2 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;导航框架2&lt;/title&gt; 6 &lt;/head&gt; 7 8 &lt;frameset cols=&quot;120,*&quot;&gt; &lt;!--*计算机称为通配符,这是一个框架,一部份为120,其余的为剩下的全部!--&gt; 9 &lt;frame src=&quot;导航框架1.html&quot; /&gt;10 &lt;frame src=&quot;1.png&quot; name=&quot;mainframe&quot; /&gt;11 &lt;/frameset&gt;12 &lt;/html&gt;</pre> </p> <p> </p> <p>    *设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字</p> <p class="sycode"> <pre class="precsshui"> 1 &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 2 &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;导航框架1&lt;/title&gt; 6 &lt;/head&gt; 7 8 &lt;body&gt; 9 &lt;a href=&quot;frame_a.html&quot; target=&quot;mainframe&quot;&gt;frame_a&lt;/a&gt;&lt;br /&gt; &lt;!--注意设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字--&gt;10 &lt;a href=&quot;frame_b.html&quot; target=&quot;mainframe&quot;&gt;frame_b&lt;/a&gt;&lt;br /&gt;11 &lt;a href=&quot;frame_c.html&quot; target=&quot;mainframe&quot;&gt;frame_c&lt;/a&gt;&lt;br /&gt;12 &lt;/body&gt;13 &lt;/html&gt;</pre> </p> <p>  效果:</p> <p></p> <p></p> <p> </p> <p></p> <p></p> <p> </p> <p> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.