HTML网页编程（2）

表格1

使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。
表格一般由以下几部分组成：表格名称、表格栏及表中数据。
<table></table>
这是一对用来指明表格范围的标记，格式如下：
<table>
表格全部内容
</table>

border属性
使用表格的这一属性可以给表格加上框线。如<table border>表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用<table border=n>来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框。
width属性
这一属性可以用来设置“有线表格”占整个页面的相对宽度，写法为<table width=n>。n是一个具体的数字，可以是一个百分数（如100%），也可以是一个具体的数值，单位是像素（如80，表示表格占80个像素单位的宽度）。
height属性
这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与<table width=n>相似。
       使用相对方式来设置表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。
cellspacing属性
这一属性可以用来设置有线表格的单元格线的宽度，用法为<table cellspacing=n>。n是一个具体的数值，单位是像素。
cellpadding属性
       这一属性可以用来设置单元格线与数据之间的距离，用法为<table cellpadding=n>。n为数值，单位是像素，默认值是1。
<caption>和</caption>
       这是一对用来指明表格标题的标记，常用格式如下：
<caption>   表格标题内容   </caption>
<tr>和</tr>
       这对标记用来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。
<th>和</th>
       这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字会突出显示。
<td>和</td>
       这对标记用来指明表格数据行中的一项。一行可以由多项组成，它也必须嵌套在<tr>与</tr>之中使用。
align属性可用于<tr>、<th>及<td>
       设置水平方向的位置：align=left、align=center 或 align=right
nowrap属性可用于<th>及<td>
       超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。
width属性可用于<th>及<td>

使用此属性可以指定宽度。具体用法与在<table>中一样。
valign属性可用于<th>及<td>
       指定垂直方向的位置<valign=f>，f取值：top、middle或bottom
colspan属性可用于<th>及<td>
       实现单元格的横向合并，格式如: <colspan=n>
rowspan属性可用于<th>及<td>
       实现单元格的纵向合并，格式如: <rowspan=n>
色彩的表示
       在计算机显示器中，使用红(red)、绿(green)、蓝(blue)3种颜色来构成各种各样的颜色。颜色的种类有16，256及65536等多种。我们把这三种颜色人0到255分别编号，再表示为16进制的数，则红色（rr）就从00到ff，绿色(gg)和蓝色(bb)两种颜色也如此。三种颜色的表示合起来就是rrggbb。这样一来，可以用一种颜色中所含红、绿、蓝成分的程度，数值化地表示颜色。如：黑色为000000、白色为ffffff、墨绿色为008040、深灰色为808080等。在HTML中，可用这种方式指定颜色。

文本的颜色
       在body的属性中，可以使用以下几种属性改变文本的颜色。
text属性
       该属性用来设置文本的颜色。该“文本”可以是标题、正文及表中的文字，但不能用于超链接的文字。使用格式为：<text=#rrggbb>
link属性
       设置超链接文字的颜色，默认为蓝色，格式：<link=#rrggbb>
vlink属性
       设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为：<vlink=#rrggbb>
<font>标记的color属性
       以上几种属性所都是指定整个网页中某一类文字的色彩，用<font>标记的color属性可指定任意一段文字的色彩。<font color=#rrggbb>
表格的背景色
<table>标记的bgcolor属性
       用来指定整个表格的背景颜色，使用格式为：
                                                 <table bgcolor=#rrggbb>
<td>标记的bgcolor属性
       用来指定表格中一行的背景颜色，使用格式为：
                                                    <td bgcolor=#rrggbb>
<th>标记的bgcolor属性
       用来指定表格中栏目行的背景颜色，使用格式为：
                                                    <th bgcolor=#rrggbb>
<hr>标记的color属性
       用来指定分隔线的颜色，使用格式为：<hr color=#rrggbb />
<font>标记的face和color属性
       指定字体与颜色，格式：<font face=“字体名” color=#rrggbb >
超文本链接1
       超文本链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。
       所谓的超文本链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
而在一个网页中用来超文本链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
☆页面链接
       用HTML创建超文本链接需要使用<A>标记符（结束标记符</A>不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。
在HTML文件中用链接指针指向一个目标。其基本格式为：
       <a href = "…">标记超文本链接信息</a>
☆本地链接
       超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。格式如下：
       <a name="标签名">此处创建了一个标签</a>
☆电子邮件链接
       如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如:
       <a href="mailto:webmaster@hnu.cn">管理员信箱</a>
图像
☆图像标签：<img>
属性说明：
    src:连接一个文件
    align:属性定义图片的排列方式
    border用来设置图像的边框
    height和width为显示的高宽。
☆图像地图：<map>
        应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用。

<img src="Sunset.jpg" alt="图片说明文字" usemap="#map" />
<map >
    <area shape="rect" coords="50,59,116,104" href="1.html" />
    <area shape="circle" coords="118,203,40" href="2.html" />
</map>
框架
☆框架标签：<frameset> 框架标签不可以放到<body>中
<frameset rows="10%,*">
<frame src="1.html" name="top" />
<frameset cols="30%,*">
    <frame src="2.html" name="left" />
    <frame src="3.html" name="right" />
</frameset>
</frameset>
☆画中画标签：<iframe>
       frameset标签是把整个窗口划分成不同的子窗体，而iframe标签可以实现在网页中的任意位置显示一个窗体（注意，它不是把整个窗口进行分割）。
       <iframe src=”1.html” > 画中画窗口1 </iframe>
由于知识点过于琐碎，在此将前面的知识点一起演示：

table.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>演示table标记</title></head><body text="#00ff00" link="#000000" vlink="#00ff00" background="head_img.png"><h2>演示table标记</h2> <a href="frame/jd.html" target="abc" >京东京东</a><br><a href="a_href.html" target="abc" >女排女排</a><br><table border="1" cellspacing="0" cellpadding="5" width="80%" height="200"align="center"  ><caption>这是我的第一个表格</caption><tr><th>第1列</th>  <th>第2列</th>  <th>第3列</th></tr>       <tr  align="center"><td align="left" width="100" nowrap="nowrap">单元格1-1多打几个字多打几个字多打几个字</td>  <td>单元格1-2</td>  <td>单元格1-3</td></tr>       <tr align="right"><td valign="bottom">单元格2-1</td>  <td>单元格2-2</td>  <td>单元格2-3</td></tr>       </table><hr color="red"/><table border="1" cellspacing="0" width="50%" height="100"align="center" bgcolor="#80FFFF" ><caption>这是<font color="#750075" face="隶书" size="10">我的第二个</font>表格</caption><tr><th>第1列</th>  <th colspan="2">第2-3列</th></tr>       <tr align="center"><td rowspan="2" bgcolor="#9393FF">单元格1-1</td>  <td>单元格1-2</td>  <td>单元格1-3</td></tr>       <tr align="center"><td>单元格2-2</td>  <td>单元格2-3</td></tr>       </table><a href="http://www.hncu.net">湖南城市学院</a></body>
</html></span>

<span style="font-family:Times New Roman;font-size:14px;">a_href.html</span>

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>演示超链接a标记</title></head><body ><h2>演示a标记</h2> <a href="http://www.baidu.com">百度一下</a> <br><a href="http://www.baidu.com">  <img src="bd_logo.png" height="40" width="120"/>  </a><br><a href="table.html" target="_blank">表格演示的网页</a> <br><br><a href="#pos1">第一局</a>   <a href="#pos2">第二局</a>   <a href="#pos3">第三局</a>  <a href="#pos4">最后</a><hr/><font face="华文彩云" size="6">无名 米哈伊洛维奇发球，惠若琪接一传失误！ 第4局 3-4 无名 米哈伊洛维奇二号位扣斜线得分 第4局 3-3 无名 杨方旭发球 第4局 3-2 <a name="pos1"></a><img src="11.jpg" /><a href="#pos3">第三局</a>无名 袁心玥果断下手，打探头得分，打在后排空档！ 第4局 3-2 无名 中国队有效起球，朱婷四号位进攻对方把球垫过网 第4局 2-2 无名 杨方旭二号位进攻被对方防起来 第4局 2-2 无名 奥格涅诺维奇发球 第4局 2-2 无名 拉西奇三号位短平得分 第4局 2-2 无名 徐云丽发球 第4局 2-1 无名 林莉一传到位，朱婷四号位强势进攻，扣球打在后排 第4局 2-1 直播员 </font><br/><br/><br/><br/><br/>.     无名 惠若琪继续发球，对方二次球得分 <font face="隶书" size="8">无名 米哈伊洛维奇发球，惠若琪接一传失误！ 第4局 3-4 无名 米哈伊洛维奇二号位扣斜线得分 第4局 3-3 无名 杨方旭发球 第4局 3-2 无名 袁心玥果断下手，打探头得分，打在后排空档！ 第4局 3-2 无名 中国队有效起球，朱婷四号位进攻对方把球垫过网 第4局 2-2 无名 杨方旭二号位进攻被对方防起来 第4局 2-2 无名 奥格涅诺维奇发球 第4局 2-2 无名 拉西奇三号位短平得分 第4局 2-2 <a name="pos2"></a><img src="22.jpg" />无名 徐云丽发球 第4局 2-1 无名 林莉一传到位，朱婷四号位强势进攻，扣球打在后排 第4局 2-1 直播员 </font><br/><br/><br/><br/><br/>无名 米哈伊洛维奇发球，惠若琪接一传失误！ 第4局 3-4 无名 米哈伊洛维奇二号位扣斜线得分 第4局 3-3 无名 杨方旭发球 第4局 3-2 无名 袁心玥果断下手，打探头得分，打在后排空档！ 第4局 3-2 无名 中国队有效起球，朱婷四号位进攻对方把球垫过网 第4局 2-2 无名 杨方旭二号位进攻被对方防起来 第4局 2-2 无名 奥格涅诺维奇发球 第4局 2-2 无名 拉西奇三号位短平得分 第4局 2-2 无名 徐云丽发球 第4局 2-1 无名 林莉一传到位，朱婷四号位强势进攻，扣球打在后排 第4局 2-1 直播员 <br/><br/><br/><br/><br/><hr/><a name="pos3"></a>无名 米哈伊洛维奇发球，惠若琪接一传失误！ 第4局 3-4 <font face="黑体" size="8">无名 米哈伊洛维奇二号位扣斜线得分 第4局 3-3 无名 杨方旭发球 第4局 3-2 无名 袁心玥果断下手，打探头得分，打在后排空档！ 第4局 3-2 无名 中国队有效起球，朱婷四号位进攻对方把球垫过网 第4局 2-2 无名 杨方旭二号位进攻被对方防起来 第4局 2-2 无名 奥格涅诺维奇发球 第4局 2-2 无名 拉西奇三号位短平得分 第4局 2-2 无名 徐云丽发球 第4局 2-1 无名 林莉一传到位，朱婷四号位强势进攻，扣球打在后排 第4局 2-1 直播员 </font><br/><br/><a name="pos4"></a><a href="mailto:729627398@qq.com">写邮件</a><a href="thunder://sdjkdsjjdsjdskj223jkdfj23==">2016奥运女排第4局实况录像</a><br/><br/><br/><a href="#pos1">第一局</a>   <a href="#pos2">第二局</a>   <a href="#pos3">第三局</a><br><img alt="女排图片3" src="imgs/33.jpg" width="200" height="160" border="3" align="middle"/></body>
</html></span>

frame.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>演示frameset标记</title></head><frameset rows="20%,*" border="0"><frame src="1.html"><frameset cols="30%,*" border="0"><frame src="../table.html"><frame src="../a_href.html" name="abc"></frameset></frameset><body ></body>
</html></span>

1.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body >此次论坛的举办正是在顺应湖南省 “十三五”发展规划的“三量齐升”与“五化同步”目标和湖南省委城市工作会议精神的背景下，围绕“绿色人文城市建设实践”，探讨湖南省新型城镇化发展之道，为湖南省绿色人文城市的发展规划出谋划策，建言献计。
随后，湖南商学院院长陈晓红教授作了题为《生态文明与绿色发展——长株潭两型社会实践》的主题发言。她介绍了湖南两型社会建设的历程，并结合湖南两型社会建设的</body>
</html></span>

jd.html

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body >此次论坛的举办正是在顺应湖南省 “十三五”发<img src="44.jpg"/>展规划的“三量齐升”与“五化同步”目标和湖南省委城市工作会议精神的背景下，围绕“绿色人文城市建设实践”，探讨湖南省新型城镇化发展之道，为湖南省绿色人文城市的发展规划出谋划策，建言献计。
随后，湖南商学院院长陈晓红教授作了题为<iframe src="ClassLoaderDemo.java" width="500" height="300">画中画窗口1</iframe>《生态文明与绿色发展——长株潭两型社会实践》的主题发言。她介绍了湖南两型社会建设的历程，并结合湖南两型社会建设的</body>
</html></span>

HTML网页编程（2）相关推荐

【渝粤题库】陕西师范大学164111 Java及JSP动态网页编程与应用作业（高起专）
<JAVA与JSP动态网页编程与应用>作业一.单选题 1.以下哪项都是关键字( ) A．package privati protect throw B. false final fina ...
初中文化能学编程吗_网页编程课程来了，确定不来pick一下!!!|科创辅学进行时...
KE CHUANG FU XUE 科创辅学天天用手机,各种app 半夜不睡觉,只会网上浪醒醒,少年,别玩了不要再搞这些花里胡哨的东西了! 要学会用魔法打败魔法上一周,我们跟着夏老师学习了 Ar ...
python 网页编程_通过Python编程检索网页
python 网页编程 The internet and the World Wide Web (WWW), is probably the most prominent source of info ...
前端_网页编程 Form表单与模板引擎（下）
目录续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
asp.net网页编程 ASP.NET中绑定枚举类型
asp.net网页编程 ASP.NET中绑定枚举类型<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office: ...
第一章：客户端网页编程简介
1.企业应用计算的演变过程:主机/哑终端的集中计算模式.客户机/服务器计算模式.浏览器/服务器计算模式. 2.网页的基本组成:web应用程序.web服务器.客户端浏览器.HTTP网络协议. 3.发送到 ...
网页编程软件：Coda 2 for Mac
Coda 2 for Mac是应用在Mac上的一款网页编程软件,可以帮助快速查找文件,并查看更多选项卡,可定制边栏,把你最喜爱的强大的Coda工具放在边栏:精简的工作流程,你总是知道你在看什么:代码焦 ...
网页编程（满屋花、金山打字、打地鼠）——张渣渣_的学习记录（4）
张渣渣_的学习记录(4)--网页编程(满屋花.金山打字.打地鼠) 满屋花金山打字打地鼠满屋花效果图如下: (需要素材的话可以dd我) <!DOCTYPE HTML> <htm ...

HTML网页编程（2）

HTML网页编程（2）相关推荐

最新文章

热门文章