html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

一、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 id="图像背景">图像背景</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="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose" >3     <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"    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、内联元素在显示时通常不会以新行开始。例子：,

, ,

　　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）

　　注意：不能将

标签与标签同时使用！不过，假如你添加包含一段文本的标签，就必须将这段文字嵌套于标签内 2、使用实例 　　（1）垂直框架： 　　　　*先创建三个基础框架，以其中一个为例： <pre class='brush:php;toolbar:false;'> 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></pre> 　　　　*最后创建一个框架，将前面三个导入： <pre class='brush:php;toolbar:false;'> 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 />10 <frame src="frame_b.html" />11 <frame src="frame_c.html" />12 </frameset><noframes></noframes>13 14 </html></pre> 　　　　效果： （水平框架只需将cols改为rows） 　　（2）混合型框架： <pre class='brush:php;toolbar:false;'> 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></pre> 　　效果： 　　（3）内联框架 <pre class='brush:php;toolbar:false;'> 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></pre> 　　效果： 　　内联框架可以用frameborder="0"来取消边框效果，还可以用width、height来设置大小 　　（4）导航框架 　　　　*设计好框架集页面，并为框架窗口定义名称 <pre class='brush:php;toolbar:false;'> 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,*">  9 <frame src="导航框架1.html" />10 <frame src="1.png" name="mainframe" />11 </frameset>12 </html></pre> 　　　　*设置导航栏中的超链接的target目标窗口属性，使其值为框架窗口的名字 <pre class='brush:php;toolbar:false;'> 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> 10 <a href="frame_b.html" target="mainframe">frame_b</a> 11 <a href="frame_c.html" target="mainframe">frame_c</a> 12 </body>13 </html></pre> 　　效果：

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles