ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLの知識のまとめと代表例の解説_html/css_WEB-ITnose
HTMLの知識のまとめと代表例の解説_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:481521ブラウズ
一、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、图像标签：
dab9f699790ab0922e596ecb9f6677d5 标签指带有可点击区域的图像映射，03fc64e1e502d5ba947b3a9af06d2d2a定义其具体位置
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" width="50" height="50">3 <img src="1.png" width="100" height="100">4 </body>
（5）可以将图像作为链接使用
（6）创建图像映射：即使用dab9f699790ab0922e596ecb9f6677d5 标签创建带有可供点击区域的图像地图
三、HTML表格
1、表格标签
2、表格中的空单元格
如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。（b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf）
3、设置表格边框：c3eabfe0f2ab8a9eadae05ced4d2507b，无边框则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、块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：4a249f0d628e2318394fd9b75b4636b1, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185, f5d188ed2c074f8b944552db028f98a1
2、内联元素在显示时通常不会以新行开始。例子：a4b561c25d9afb9ac8dc4d70affff419, b6c5a531a458a2e790c1fd6421739d1c, 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b
3、HTML dc6dce4a544fdca2df29d5ac0ea9906b 元素是块级元素，它是可用于组合其他 HTML 元素的容器，如果与 CSS 一同使用，dc6dce4a544fdca2df29d5ac0ea9906b 元素可用于对大的内容块设置样式属性。45a2772a6b6107b401db3c9b82c049c2 元素是内联元素，可用作文本的容器，当与 CSS 一同使用时，45a2772a6b6107b401db3c9b82c049c2 元素可用于为部分文本设置样式属性。
五、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、使用dc6dce4a544fdca2df29d5ac0ea9906b元素布局
每一对dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68标签代表一个块，对块的属性进行定义后，在标签里输入块的内容。
（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、使用f5d188ed2c074f8b944552db028f98a1布局
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)框架集标签：f900b4fc197b16ab214eecf015bb6bd2
*框架集标签定义如何将窗口分割为框架
*每一个f900b4fc197b16ab214eecf015bb6bd2定义一系列行或列
*rows和cols的值规定了每行或每列占据屏幕的面积
（2）框架标签：04a0d55efbbfd646a993fbc01f262c57
（3）内联框架：d5ba1642137c3f32f4f4493ae923989c
（4）37f861bd36cef5b6406eba87d20a5bab 标签：固定框架大小，使用户不可以拖动边框来改变它的大小
注意：不能将 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 标签与 f900b4fc197b16ab214eecf015bb6bd2eb5f059992a0ae0ef16884cb75644e40 标签同时使用！不过，假如你添加包含一段文本的 37f861bd36cef5b6406eba87d20a5bab 标签，就必须将这段文字嵌套于 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 标签内
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 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 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 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 <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 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 <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 xmlns="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 xmlns="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 xmlns="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>
效果：