无损格式发烧友天地
打印

【天下一家谈 HTML 系列之一】HTML 基础教程(抛砖引玉大家有好的方法请加入)

【天下一家谈 HTML 系列之一】HTML 基础教程(抛砖引玉大家有好的方法请加入)


html最基本代码

一个完整的HTML帖子应该是:
美贴=背景+文章+插图+收尾



<*TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>帖子的文章加图片<*/TD><*/TR><*/TBODY><*/TABLE>


注意:前边用了多少<*table......><*tr><*td>后面就要有多少<*/td><*/tr><*/table>收尾。多收和少收都会使帖子出错。

常用的参数设定及注解:

<*table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400"
表格宽度,接受绝对值(如 500)及相对值(如 80%)。

border="10"
表格边框的厚度。

cellspacing="2"
表格格线的厚度

cellPadding=5 表格格线内厚度


align="CENTER"
表格的摆放位置(水平),可选值为:左: left, 右: right, 居中: center

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

background="背景图片网址"
表格的背景图片,与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色,与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
 

 

二.文字应用



1.文字基本设制


基本代码如下:

<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>

<P align=center>表示居中,<P align=left>表示居左,<P align=right>表示居右。

face=字体 常用字体为:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等
 

size=字体大小,这里的最大值为7 取值越大文字就越大

另一种贴法:

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font> font:40pt 数值越大文字就越大。 color=颜色代码。
 

 

 

三.贴图


1.基本代码:

<img src=图片网址 width=图片宽度 height=图片长度>

注意:设定图片大小,此宽度及高度一般采用 pixels 作单位。

通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具
 

(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)。

图片的居中,居左,居右上面已经介绍了,这里不再重复。。。。。


2.给图片加边框


基本代码:


<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00>

<td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=500 height=375></td></table>


说明:

border="6" 表格边框的厚度,不同浏览器有不同的内定值。

cellspacing="2" 表格格线的厚度


cellPadding=1 表格格线内厚度

borderColor=#841A00 边框色彩



3.图片朦胧
 


A.圆形效果
代码: <IMG src="图片" width=500 height=375 style="filter:Alpha(opacity=100,style=2);">

B.方形效果
代码: <IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">

 

[ 本帖最后由 听者有心 于 2006-2-13 10:45 AM 编辑 ]

TOP

第一位报道,跟着 天下一家 学习HTML 基础教程。
第二位开始举手,向 天下一家 学习相关知识。
谢谢分享。

找音乐请先使用论坛“搜索”功能

增加一篇网上的学习资料,原文资料比较老,并且部分功能未毕能用,但作为介绍,却不失为入门之作,值得一看。


学习HTML 4.0 語 法 教 學



[ 本帖最后由 听者有心 于 2006-2-2 10:29 PM 编辑 ]

找音乐请先使用论坛“搜索”功能
精彩!

感谢分享!
漫漫长夜,酹樽相对!醉酒当歌,数我其谁?
欣赏楼主带来的美贴,
百事高音乐论坛
谢谢楼主带来的详细教程,希望能将它学会。。。

TOP

不懂也支持。谢谢分享。

TOP

学习中,这一贴收藏完了,接着去看第二讲了。。。
~简单~生活~

TOP

谢谢楼主,希望继续栽培。

TOP

谢谢楼主带来的详细教程,希望能将它学会。。。

TOP

风斑斑,8是希望学好哦,是一定要学好,嘻嘻
谢谢天下一家,偶要好好学习,天天向上!

TOP

呵呵,还是太笨,连歌曲都不会发
i l o v e bbs.besgold.com

TOP

提示: 作者被禁止或删除 内容自动屏蔽

TOP

入门学习的好教程!

TOP