HTML知识点总结以及典型例子讲解

时间：2023-03-08 16:05:36
HTML知识点总结以及典型例子讲解

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

HTML知识点总结以及典型例子讲解

eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>HTML文本格式化标签</title>

 </head>

 <body>

     <b>定义粗体文字</b><br />

     <big>定义大号字</big><br />

     <em>定义着重文字</em><br />

     <i>定义斜体字</i><br />

     <small>定义小号字</small><br />

     <strong>定义加重语气</strong><br />

     <sub>定义下标字</sub><br />

     <sup>定义上标字</sup><br />

     <ins>定义插入字</ins><br />

     <del>定义删除字</del><br />

 </body>

 </html>

效果：

HTML知识点总结以及典型例子讲解

二、HTML图像

1、图像标签：

HTML知识点总结以及典型例子讲解

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

2、源属性（Src）、替换文本属性（Alt）

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

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

3、图片应用实例

　　（1）将图片当做背景

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>HTML图像</title>

 </head>

 <body background="1.png">

     <h3>图像背景</h3>

     <p>gif 和 jpg 文件均可用作 HTML 背景。</p>

     <p>如果图像小于页面，图像会进行重复。</p>

 </body>

 </html>

　　效果：
HTML知识点总结以及典型例子讲解

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

　　（3）图像的浮动：使图片浮动至段落的左边或右边：使用align属性（align="left"或align="left"）

　　（4）调整图像尺寸：通过改变 img 标签的 "height" 和 "width" 属性的值，可以放大或缩小图像

 <body>

     <img src="1.png" width="50" height="50">

     <img src="1.png" width="100" height="100">

 </body>

HTML知识点总结以及典型例子讲解

　　（5）可以将图像作为链接使用

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

　

三、HTML表格

1、表格标签

HTML知识点总结以及典型例子讲解

2、表格中的空单元格

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

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

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

 <body>

     <table border="1">

         <tr>

           <th>姓名</th>

           <th colspan="2">电话</th>

         </tr>

         <tr>

           <td>Bill Gates</td>

           <td>555 77 854</td>

           <td>555 77 855</td>

         </tr>

     </table>

 </body>

　　效果：
HTML知识点总结以及典型例子讲解

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

 <body>

     <table border="1">

         <tr>

           <th>单元格</th><th>单元格</th>

         </tr>

           <tr>

           <th>单元格</th><th>单元格</th>

         </tr>

     </table><br />

     <table border="1" cellpadding="10">

         <tr>

           <th>单元格</th><th>单元格</th>

         </tr>

           <tr>

           <th>单元格</th> <th>单元格</th>

         </tr>

     </table><br />

     <table border="1" cellspacing="10">

         <tr>

           <th>单元格</th> <th>单元格</th>

         </tr>

           <tr>

           <th>单元格</th><th>单元格</th>

         </tr>

     </table>

 </body>

　　效果：

HTML知识点总结以及典型例子讲解

四、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知识点总结以及典型例子讲解

六、HTML布局

1、使用<div>元素布局

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

　　（1）先将整体分块

 <body>

     <div class="container">

         <div class="header">这是头部</div>

         <div class="left">这是左半部分</div>

         <div class="right">这是右半部分</div>

         <div class="footer">这是底部</div>

     </div>

 </body>

　　效果：

HTML知识点总结以及典型例子讲解

　　（2）对每一块进行样式定义

 <style type="text/css">

     *{         //使整体充满，不留一点空白边距

         margin:0px;

         padding:0px;

     }

     body{margin:0px;}

     .container{

         height:500px;

         width:100%;

     }

     .header{

         height:10%;

         background-color:#FF80C0;

     }

     .left{

         height:80%;

         width:30%;

         background-color:#0F9;

         float:left;    <!--从左到右的一个浮动-->

     }

     .right{

         height:80%;

         width:70%;

         background-color:#90F;

         float:left;   <!--没有这一行的话，此部分会出现在页面下方，不会靠右-->

     }

     .footer{

         height:10%;

         background-color:#999;

         clear:both;   <!--清除浮动，否则此部分会跟着上面浮动，不会出现在底部-->

     }

 </style>

　　最后完成效果：

HTML知识点总结以及典型例子讲解

2、使用<table>布局

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>HTML布局</title>

 </head>

 <body marginheight="0px" marginwidth="0px">

     <table width="100%" height="500px">

         <tr>

             <td colspan="2" height="10%" bgcolor="#CC66CC"></td>

         </tr>

         <tr>

             <td height="80%" width="30%" bgcolor="#66FFCC"></td>

             <td height="80%" width="70%" bgcolor="#9900CC"></td>

         </tr>

         <tr>

             <td colspan="2" height="10%" bgcolor="#999999"></td>

         </tr>

     </table>

 </body>

 </html>

　　效果：
HTML知识点总结以及典型例子讲解

七、框架

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

1、标签：

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

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

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

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

　　（2）框架标签：<frame>

　　（3）内联框架：<iframe>

　　（4）<noframes> 标签：固定框架大小，使用户不可以拖动边框来改变它的大小

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

2、使用实例

　　（1）垂直框架：

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>HTML框架</title>

 </head>

 <body bgcolor="#66FFFF">

 </body>

 </html>

　　　　*最后创建一个框架，将前面三个导入：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>HTML框架</title>

 </head>

 <frameset cols="20%,30%,50%">

     <frame src="frame_a.html" />

     <frame src="frame_b.html" />

     <frame src="frame_c.html" />

 </frameset><noframes></noframes>

 </html>

　　　　效果：

HTML知识点总结以及典型例子讲解（水平框架只需将cols改为rows）

　　（2）混合型框架：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>HTML框架</title>

 </head>

 <frameset rows="50%,50%">

     <frame src="frame_a.html" />

     <frameset cols="30%,70%">

         <frame src="frame_b.html" />

         <frame src="frame_c.html" />

     </frameset>

 </frameset>

 </html>

　　效果：

HTML知识点总结以及典型例子讲解

　　（3）内联框架

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>内联框架</title>

 </head>

 <body>

     <iframe src="Web前端练习代码/框架/1.png"></iframe>

 </body>

 </html>

　　效果：

HTML知识点总结以及典型例子讲解

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

　　（4）导航框架

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>导航框架2</title>

 </head>

 <frameset cols="120,*">    <!--*计算机称为通配符，这是一个框架，一部份为120，其余的为剩下的全部！-->

     <frame src="导航框架1.html" />

     <frame src="1.png" name="mainframe" />

 </frameset>

 </html>

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>导航框架1</title>

 </head>

 <body>

     <a href="frame_a.html" target="mainframe">frame_a</a><br />  <!--注意设置导航栏中的超链接的target目标窗口属性，使其值为框架窗口的名字-->

     <a href="frame_b.html" target="mainframe">frame_b</a><br />

     <a href="frame_c.html" target="mainframe">frame_c</a><br />

 </body>

 </html>

　　效果：

HTML知识点总结以及典型例子讲解

HTML知识点总结以及典型例子讲解

HTML知识点总结以及典型例子讲解

HTML知识点总结以及典型例子讲解