html_day4---html加强+表格布局案例

最新推荐文章于 2025-06-11 08:30:00 发布

原创最新推荐文章于 2025-06-11 08:30:00 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#网页设计 #html

☛Web前端同时被 2 个专栏收录

38 篇文章

订阅专栏

------ HTML

5 篇文章

订阅专栏

本文详细介绍HTML进阶知识，包括背景色彩设置、页面空白调整、超链接应用、标尺线使用、字体样式设置、文字布局技巧、图像插入方法、表单元素配置、表格布局实践、文字滚动实现及多媒体页面构建等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day4

●HTML加强

（1）背景色彩和文字色彩

<bodybgcolor=# text=# link=# alink=# vlink=#>

bgcolor ---背景色彩

text ---非可链接文字的色彩

link ---可链接文字的色彩

alink ---正被点击的可链接文字的色彩

vlink ---已经点击(访问)过的可链接文字的色彩

（2）页面空白(Margin)

页面左边的空白 <bodyleftmargin=#>

页面上方的空白(天头) <bodytopmargin=#> #=margin amount

**默认的文字是不紧靠左侧和右侧的。这时可以设置leftmargin和topmargin的值

（3）超链接

（4）标尺线hr

（5）字体

①标题字体<h#> ... </h#> #=1, 2, 3, 4, 5, 6

②字体大小<font size=#> ... </font> #=1, 2, 3, 4, 5,6, 7 or +#, -#

③物理字体

<b>粗体</b>今天天气真好！

<i>斜体</i>今天天气真好！

<u>下划线</u>今天天气真好！

可以组合使用！

④客户端字体

#=客户端可获得的字体

（6）文字布局标记

①分段<p>…</p>

②换行<br/>

③对齐方式

④文字的分区(Division)显示：div

⑤列表：无序列表，有序列表

（7）图像

①<img alt=#>

#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

（8）表单

①checked默认选中的（对于checkbox和radio）

②对于select(下拉列表)，默认选中为selected

③文本域textarea自动换行与不自动换行：wrap=off，默认是换行。

（9）表格

①th与td区别

②vlign属性：top,bottom,left,right,定义字体在表格中的对齐方式

（10）会移动的文字：marquee(IE8以上浏览器不支持)

（11）多媒体页面

●案例：

使用表格布局，做一个邮箱登陆界面

采用表格布局，首先要确定怎样通过表格布局才能达到如图示效果。分析如下：

可见：首先将整个界面分成一个3x3的表格（黑色线部分），我们的主要内容在第二行第二列单元格中。

然后在该单元格中又将其分成一个3x2的表格（红色线部分），主要的表单组件在第二行第二列中。

在该单元格中又将其分成一个4x2的表格（蓝色线部分），并且最后两行中单元格横跨所有列。

代码如下：

<html>
	<head>
		<title>邮箱登陆
			</title>
		</head>
		<body>
			<table width=100% ><!--第一层表格-->
			<tr height="150px" ><td> </td><td> </td><td> </td></tr>
			<tr><td width="350px"> </td><td>
			<!--background可以设置背景图片--><!--第二层表格-->
			<table width="535px" height="300px" background="background.jpg" >
			<tr height="60px"><td> </td><td> </td></tr>
			<tr><td width=200px> </td><td>
			<form action="" method="post">
			<table  height=100%><!--第三层表格-->
			<tr><td height="40px"><font size=4>用户名:</font></td><td><input type="text"/></td></tr>
			<tr><td height="40px"><font size=4>密  码:</font></td><td><input type="password"/></td></tr>
			<tr><td height="40px" colspan=2 align=center>
											<input type="submit" value="登   录 " style="font-size:18px"/>
											<input type="reset" value="重   置" style="font-size:18px"/></td></tr>
			<tr><td height="40px" colspan=2 align=center>
											<a href="#">找回密码</a>
											<a href="#">注册用户</a></td></tr>
			</table>
			</form>
			</td></tr>
			<tr><td> </td><td> </td></tr>
			</table>
			</td><td> </td></tr>
			<tr><td> </td><td> </td><td> </td></tr>
			</table>
			</body>
	</html>

运行效果如图（背景图片不一样）：