search
HomeWeb Front-endHTML TutorialHTML知识点总结以及典型例子讲解_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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、内联元素在显示时通常不会以新行开始。例子：,

, , 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='brush:php;toolbar:false;'> 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='brush:php;toolbar:false;'> 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 /&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='brush:php;toolbar:false;'> 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='brush:php;toolbar:false;'> 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='brush:php;toolbar:false;'> 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='brush:php;toolbar:false;'> 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>
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Related Article
HTML, CSS, and JavaScript: Examples and Practical ApplicationsHTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureHTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentHTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055523 fails to install in Windows 11?
4 weeks agoByDDD
How to fix KB5055518 fails to install in Windows 10?
4 weeks agoByDDD
Roblox: Grow A Garden - Complete Mutation Guide
3 weeks agoByDDD
Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
How to fix KB5055612 fails to install in Windows 10?
3 weeks agoByDDD
Show More

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Show More

Hot Topics

Java Tutorial
1664
14
CakePHP Tutorial
1422
52
Laravel Tutorial
1316
25
PHP Tutorial
1268
29
C# Tutorial
1242
24
Show More