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图像

1、图像标签：

　　　<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>

　　效果：

　　（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>

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

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

三、HTML表格

1、表格标签

2、表格中的空单元格

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

　　效果：

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 内联元素

　　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布局

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>

　　效果：

　　（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>

　　最后完成效果：

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>

　　效果：

七、框架

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

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>

　　　　效果：

（水平框架只需将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>

　　效果：

　　（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>

　　效果：

　　内联框架可以用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知识点总结以及典型例子讲解的更多相关文章

Python学习／复习神器-->各种方法／技巧在哪用和典型例子（一）
就我个人在学习Python的过程中,经常会出现学习了新方法后,如果隔上几天不用,就忘了的情况,或者刚学习的更好的方法没有得到应用,还是沿用已有的方法,这样很不利于学习和掌握新姿势,从而拉长学习时间,增 ...
[Oracle] SQL*Loader 详细使用教程（5）- 典型例子
本文介绍SQL*Loader在实际使用过程中经常用到的典型例子. 1. 表中的列比数据文件的列要少怎么办? 假设一个csv的文件如下: a1,a2,a3,a4 b1,b2,b3,b4 c1,c2,c3 ...
DataTemplate——数据模板的一个典型例子
下面是ListBox.ItemTemplate(数据模板)应用的“典型”例子,概述如下两点: 1:Grid部分,用来“规划” 数据显示的布局(即数据长成什么样子) 2:给DataTempl ...
Anaconda安装Graphviz, mac下Graphviz安装, pcharm中调用pycharm, Graphviz典型例子
mac下的Graphviz安装及使用 2017年10月13日 13:30:07 阅读数:7495 一.安装 Graphviz http://www.graphviz.org/ mac用户建议直接用ho ...
C#多线程简单例子讲解
C#多线程简单例子讲解标签: 多线程c#threadobjectcallbacktimer 分类: C#(7) 转载网址:http://www.knowsky.com/540518.html .NE ...
Python--方法／技巧在哪用的典型例子
就我个人在学习Python的过程中,经常会出现学习了新方法后,如果隔上几天不用,就忘了的情况,或者刚学习的更好的方法没有得到应用,还是沿用已有的方法,这样很不利于学习和掌握新姿势,从而拉长学习时间,增 ...
通过生产者消费者模式例子讲解Java基类方法wait、notify、notifyAll
wait(),notify()和notifyAll()都是Java基类java.lang.Object的方法. 通俗解释wait():在当前线程等待其它线程唤醒.notify(): 唤醒一个线程正在等 ...
DirectShow Filter 开发典型例子分析 ——字幕叠加（FilterTitleOverlay）1
本文分析一下<DirectShow开发指南>中的一个典型的Transform Filter的例子:字幕叠加(FilterTitleOverlay).通过分析该例子,我们可以学习到Direc ...
如何用简单例子讲解 Q - learning 的具体过程？
作者:牛阿链接:https://www.zhihu.com/question/26408259/answer/123230350来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

TYVJ P1098 任务安排 Label:倒推dp 不懂
描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti.在每批任务开始前, ...
JavaScript基础知识总结
正则表达式: 是一种专门用于操作字符串规则. 正则表达式: 通过一些符号来表达,简化对字符串的复杂操作. 弊端:阅读性较差常见操作: 1.匹配 String matches(regex) 2.获取( ...
ubuntu中的Wine详解
什么是wine?(转自百度百科,具体看百科) wine,是一款优秀的Linux系统平台下的模拟器软件,用来将Windows系统下的软件在Linux系统下稳定运行,该软件更新频繁,日臻完善,可以运行许多 ...
Shortcut 常用快捷键
多行注释: VS2010: / NotePad++: Ctrl Q Xcode: CMMND / 回到光标所在之前位置 VS2010: Ctrl +/- 关闭当前页: VS2010: 鼠标中 ...
#undef
#undef 是在后面取消以前定义的宏定义该指令的形式为 #undef 标识符其中,标识符是一个宏名称.如果标识符当前没有被定义成一个宏名称,那么就会忽略该指令. 一旦定义预处理器标识符,它将保持 ...
php 类
<?php class mysql{ private $host; private $name; private $pass; private $table; private $ut; func ...
Apache开启不了------The requested operation has failed!
1.这个问题通常是由于端口被占用了,cmd输入netstat -ano查看端口号,根据端口号80的程序的pid在任务管理器下杀掉它. 2.我遇到这个问题不是这个原因.我由于刚配置了虚拟目录.查看虚拟目 ...
shenyi 语录
[讲师]沈逸(65480539) 2016-06-08 14:58:42 会centos 转redhat是分分钟的事 [讲师]沈逸(65480539) 2016-06-08 14:58:54 查看 ...
java的包装类（转）
Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...
[排错] PATH_MISSING
症状: 更换了磁带机部件,导致Robots选项卡中的TLD(2) Robotic Path显示为PATH_MISSING. 解决方法: 概括起来就是: 删除TLD(2),重新创建Robot记录,然后重 ...

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

HTML知识点总结以及典型例子讲解的更多相关文章

随机推荐

热门专题