HTML快速入门3

四、表格 (Table)

1. 表格的基本形式

表由 <table> 开始, </table> 结束,表的内容由 <tr>,<th> 和 <td> 定义。

<tr> 说明表的一个行,表有多少行就有多少个 <tr> ;

<th> 说明表的列数和相应栏目的名称(列标题),有多少栏就有多少个 <th> ;

<td> 则填充由 <tr> 和 <th> 组成的表格;

border 属性:说明是否用边框。

下面是有表格线的表。

例:带有列标题的表格:

<TABLE BORDER>

<TR>

<TH> 姓名 </TH><TH> 性别 </TH><TH> 毕业学校 </TH>

<TR><TD> 张飞 </TD><TD> 男 </TD><TD> 自学成才 ></TD>

</TABLE>

2.有通栏的表

A 、有横向通栏的表

<th Colspan=#> # 代表通栏占据的栏 ( 列 ) 数。

例:跨多列的表

<table border="1" width="100%" cellspacing="1">
<tr>
<td colspan="3"><b><font color="red"> 三国英豪</font> </td>
</tr>
<tr>
<td> 姓名 </td>
<td> 性别 </td>
<td> 毕业学校 </td>
</tr>
<tr>
<td> 张飞 </td>
<td> 男 </td>
<td> 自学成才 </td>
</tr>
<tr>
<td> 刘备 </td>
<td> 男 </td>
<td> 皇家武校 </td>
</tr>
<tr>
<td> 关羽 </td>
<td> 男 </td>
<td> 不祥 </td>
</tr>
</table>

B 、有纵向通栏的表

<th Rowspan=#> # 表示通栏占据的行数 , 应小于表的行数。

有纵向通栏的表,每一行必须用 </tr> 明确给出一横向栏目结束 , 这是和表的基本形式不同的。

<table border>

<tr><th rowspan=3> Morning Menu</th><th>Food</th> <td>A</td> </tr>

<tr><th>Drink</th> <td>B</td> </tr>

<tr><th>Sweet</th> <td>C</td> </tr>

</table>

2. 表的尺寸,边框宽度,表格间距

A . 表的尺寸

width=# ,表宽, height=# ,表高 , # 是以象素为单位的整数

例:表格尺寸设置:

<table border width=170 height=100>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

B 、边框宽度

border=# , # 为宽度值,单位是象素。

例:边框尺寸设置:

<table border=10>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

C 、表格单元的间距

cellspacing=# , # 的单位是象素,

例:将表格间距定义为 10 个象素,它看起来象用很粗的线划分的表格。

例:

<table border cellspacing=10>

<tr><th>Food</th><th>Drink</th> <th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

3. 表中文本的输出

A 、文本与表框的距离

cellpadding=# 。 # 的单位是象素

例:使表的内容与表框离开 10 个象素。

<table border cellpadding=10>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

B 、文本 ( 左右 ) 输出的位置

表格单元的宽度大于其中的文本宽度时,文本(左右)输出位置

align=# , # 为

left 左对齐

center 居中

right 右对齐

align 属性可修饰 <tr>,<th> 和 <td> 链接签。

例:

<table border width=300>

<tr>

<th align=left>Food</th><th>Drink</th><th>Sweet</th>

<tr>

<td align=left>A</td><td align=center>B</td><td align=right> C</td>

</table>

图:

C 、文本 ( 上下 ) 输出的位置

表格高度大于其中文本的高度时,用 valign=# 说明文本上下的位置。 # 为:

Top 上对齐

middle, 居中

bottom, 下对齐

baseline 文本基线与表格中线对齐

特别注意的是 baseline 对齐方式,文本出现在网格的上方而不是相象中的下半部。

valign 可修饰 <tr>,<th>,<td> 。

例:

<table border height=100>

<tr>

<th>Food</th><th>Drink</th>

<th>Sweet</th><th>Other</th>

<tr>

<td valign=Top>A</td>

<td valign=middle>B</td>

<td valign=bottom>C</td>

<td valign=baseline>D</td>

</table>

4. 表格颜色

表格的颜色用 bgcolor=# 指定。 # 是 16 进制的 6 位数,格式为 rrggbb ,分别表示红、绿、兰三色的分量。或者是已定义好的颜色名称,参见文本颜色。

<table border>

<tr><th bgcolor=000000>

<Font color=ffffff>Food</Font></th>

<th bgcolor=white>Drink</th>

<tr>

<td bgcolor=olive>A</td><td>B</td>

</table>

如图: 注 000000 为黑色, FFFFFF 白色 , olive 橄榄绿

五、超文本链接(这个部分没有截图,请自己试验)

超文本链接是 html 最吸引人的优点之一。使用超文本链接指针可以使顺序存放的文件具有一定程度

上随机访问的能力,更加符合人类的思维方式。

在本节,我们将要学习以下的知识:

创建文件内部的超文本链接

创建到其它内部文件和外部文件的超文本链接

1. 统一资源定位器 URL

统一资源定位器 URL (Uniform Resource Locator) 是文件名的扩展。

URL 构成: protocol://Machine.name[:Port] / Directory / filename

Protocol: 访问该资源所采用的协议,即访问该资源的方法,它可以是 http 超文本传输协议,

也可以是 ftp 文件传输协议,还可以使 file 、 news 等其它协议。

Machine.name: 访问该资源主机的 IP 地址或域名 , 通常以字符形式的域名出现 , 如 www.rwstar.com . 。

[:Port] 该资源主机 ( 服务器 ) 所使用的端口号。一般情况下默认为 80 ,

只有当服务器所使用的端口号不是默认的端口号时才需写 出。

Directory/Filename: 是该资源所在主机(服务器)上的路径和文件名。

一个典型的 URL 为 :http://www.xfocus.com/index.php 。它表示安全焦点Web服务器上 的首页文件。

2. A 标记

链接主要通过 A 标记来实现。 A 标记可支持较多的属性,其中最重要的是 Href 和 Name 属性。

l href 属性 ( Hypertext Reference 的缩写)

如果 A 标签中包含 Href 属性,则该标签的起始标记和结束标记之间的文本就变成了超文本 (Hypertext)

它是要访问(链接)资源的名称,在浏览器中,超文本通常会以不同颜色并带下划线的字符显示。

基本格式 <a Href = "Url" > 要访问(链接)资源的名称 </a>

( 注意引号 )

href 属性中的统一资源定位器 (url) 是指向的要访问资源的路径,随后的“字符串”在 html 文件中充当

指针的角色。当用鼠标点击这个字符串时,浏览器将会通过网络,沿 Url 指定的路径发出页面的请求,

并将解释执行返回的页面。

例: <a href=”http://www.163.com”>点击进入网易 </a>

点击“点击进入网易”,即可进入电子科大人文风网站的首页。在这个例子中,充当指针的是

“点击进入网易”这几个字符 .

六.文字移动 <marquee>

基本格式

<marquee 移动属性 > 移动文字 </marquee>

文字移动属性的设置 :

l 移动方向: <direction=#> # 为 left, right

例 :

<marquee direction=left> 移动文字, 从右向左移! </marquee> <P>

<marquee direction=right> 移动文字, 从左向右移! </marquee>

l 移动方式: <bihavior=#> #=scroll, slide, alternate

例 :

<marquee behavior=scroll> 移动文字,一圈一圈绕走! </marquee> <P>

<marquee behavior=slide> 移动文字, 移动一次就停止! </marquee> <P>

<marquee behavior=alternate> 移动文字,来回移动! </marquee>

l 循环次数: <loop=#> #= 次数;若未指定则循环不止

例 :

<marquee loop=3 width=50% behavior=scroll> 移动文字,移 3 次 </marquee>

注意: width= #,从浏览器窗口宽度的指定的位置开始移动,可以为象素或窗口宽度的百分比。

l 移动速度: <scrollamount=#> # 为每次移动的象素数 , 越大移动速度越快。

例 :

<marquee scrollamount=20> 移动文字,移动的较快 </marquee>

l 延时 <scrolldelay=#> #为时间,毫秒数,值越大间隔越久

例 :

<marquee scrolldelay=1000 scrollamount=500> 文字间歇移动 </marquee>

例 :

<Font Size=6>

<marquee align=top width=400> 移动文字,对齐方式 </marquee>

</Font>

l 底色 <bgcolor=#>

#: rrggbb 16 进制数码,或者是预定义色彩 , 如 red,green,yellow 等

例 :

<marquee bgcolor=green>< 移动文字,绿色背景 </marquee>

(这个部分无法用图片做例子,除非用屏幕录象软件)

时间: 2024-10-16 15:33:38

HTML快速入门3的相关文章

笔记:Spring Cloud Zuul 快速入门

Spring Cloud Zuul 实现了路由规则与实例的维护问题,通过 Spring Cloud Eureka 进行整合,将自身注册为 Eureka 服务治理下的应用,同时从 Eureka 中获取了所有其他微服务的实例信息,这样的设计非常巧妙的将服务治理体系中维护的实例信息利用起来,使得维护服务实例的工作交给了服务治理框架自动完成,而对路由规则的维护,默认会将通过以服务名作为 ContextPath 的方式来创建路由映射,也可以做一些特别的配置,对于签名校验.登录校验等在微服务架构中的冗余问题

javaweb-html快速入门

本文主要是进行HTML简单介绍(详细的属性查帮助文档就行了,这里主要为快速入门,赶时间,在最短的时间中看明白一个html文件的代码(如果能称之为代码的话)详细的样式表,布局啥的有时间再研究吧) HTML 1.html的简介 1.1,html的全称:HyperText Mark-up Language ,超文本标记型语言,是网页的语言. 超文本:比文本更加强大(后面还会讲到XML,可扩展标记性语言) 标记:就是标签,html所有操作都是通过标签直接或间接的操作(把需要操作的数据通过标签封装起来)

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话 安装Python 从http://www.python.org/downloads/ 下载安装程序 安装完后,再添加到环境变量. 安装Oracle JDK 下载页面: http://www.oracle.com/technetwork/java/javase/downloads/ 选择要下载的Java版本(推荐Java 7). 选择一个JDK下载并接受许可协议. 一旦下载,运行安装程序. 安装Ant Ant:下载http

bash编程快速入门

首先,我们简单的介绍一下bash,bash是GNU计划编写的Unixshell,它是许多Linux平台上的内定shell,它提供了用户与系统的很好的交互,对于系统运维人员,bash的地位是举足轻重的,bash编程能很快处理日常的任务 bash入门,一个最简单的bash例子 #vim hello.sh #!/bin/bash #This is the first example of the bash #echo "Hello world" 下面,我们就这个简单的bash 脚本来介绍一下

定时器(Quartz)快速入门

Quartz概述 Quartz中的触发器 Quartz中提供了两种触发器,分别是CronTrigger和SimpleTrigger. SimpleTrigger 每 隔若干毫秒来触发纳入进度的任务.因此,对于夏令时来说,根本不需要做任何特殊的处理来"保持进度".它只是简单地保持每隔若干毫秒来触发一次,无论你的 SimpleTrigger每隔10秒触发一次还是每隔15分钟触发一次,还是每隔24小时触发一次. CronTrigger 在特定"格林日历"时刻触发纳入进程的

vue.js--60分钟快速入门

Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM

Netty5快速入门及实例视频教程(整合Spring)

Netty5快速入门及实例视频教程+源码(整合Spring) https://pan.baidu.com/s/1pL8qF0J 01.传统的Socket分析02.NIO的代码分析03.对于NIO的一些疑惑04.Netty服务端HelloWorld入门05.Netty服务端入门补充06.Netty客户端入门07.如何构建一个多线程NIO系统08.Netty源码分析一09.Netty源码分析二10.Netty5服务端入门案例11.Netty5客户端入门案例12.单客户端多连接程序13.Netty学习

一起学Google Daydream VR开发,快速入门开发基础教程一:Android端开发环境配置一

原文因涉及翻墙信息,被强制删除,此文为补发! 准备工作 进入Google Daydream开发者官网,开启准备工作,官网地址:https://vr.google.com/daydream/developers/ -------------------------------------------------------------------------------------------------------------------- Google Daydream开发者网址: https

程序员带你十天快速入门Python,玩转电脑软件开发(二)

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到熟悉的效果. 声明:本次教程主要适用于已经习得一门编程语言的程序员.想要学习第二门语言.有梦想,立志做全栈攻城狮的你 如果是小白,也可以学习本教程.不过可能有些困难.如有问题在文章下方进行讨论.或者添加QQ群538742639.群马上就满了,名额不多. 上节课主要讲解了以下内容: 为什么学习Pyth

程序员带你学习安卓开发,十天快速入门-基础知识(四)

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到熟悉的效果. 本系列课程是.Net程序员学习安卓开发系列课程. 下面是前三次课程列表: 程序员带你学习安卓开发,十天快速入门-安卓学习必要性 程序员带你学习安卓开发,十天快速入门-开发工具配置学习 程序员带你学习安卓开发,十天快速入-对比C#学习java语法 为了大家系统有效的快速入门安卓开发,推荐