写给15年后再次回来的你2008岁末录音特别节目2009,我们一起走过一起来听好音乐这一季不唱寂寞
查看: 2024|回复: 6

简单实用的HTML代码分享(转水色处)

[复制链接]
发表于 2007-7-2 11:35:05 | 显示全部楼层 |阅读模式
简单实用的HTML代码分享
July 2,2007  
  这些代码是在浏览水色博客的时候发现的,转贴过来,希望想学习HTML的朋友基础可以从这个帖子开始。
一、HTML各种命令的代码:
1、文本标签(命令)
<pre></pre>         创建预格式化文本
<h1></h1>          创建最大的标题
<h6></h6>          创建最小的标题
<b></b>           创建黑体字
<i></i>           创建斜体字
<tt></tt>          创建打字机风格的字体
<cite></cite>        创建一个引用,通常是斜体
<em></em>          加重一个单词(通常是斜体加黑体)
<strong></strong>      加重一个单词(通常是斜体加黑体)
<font size=?></font>     设置字体大小,从 1 到 7
<font color=?></font>    设置字体的颜色,使用名字或十六进制值

2、图形(命令)
<img src="name">       添加一个图像
<img src="name" align=?>   排列对齐一个图像:左中右或上中下
<img src="name" border=?>  设置围绕一个图像的边框的大小
<hr>             加入一条水平线
<hr size=?>         设置水平线的大小(高度)
<hr width=?>         设置水平线的宽度(百分比或绝对像素点)
<hr noshade>         创建一个没有阴影的水平线



3、链接(命令)
<a href="URL"></a>      创建一个超链接
<a href="mailto:EMAIL"></a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a>     创建一个位于文档内部的靶位
<a href="#NAME"></a>     创建一个指向位于文档内部靶位的链接

4、格式排版(命令)
<p>             创建一个新的段落
<p align=?>         将段落按左、 中、 右对齐
<br>             插入一个回车换行符
<blockquote></blockquote>  从两边缩进文本
<dl></dl>          创建一个定义列表
<dt>             放在每个定义术语词之前
<dd>             放在每个定义之前
<ol></ol>          创建一个标有数字的列表
<li>             放在每个数字列表项之前,并加上一个数字
<ul></ul>          创建一个标有圆点的列表
<li>             放在每个圆点列表项之前,并加上一个圆点
<div align=?>        一个用来排版大块HTML 段落的标签,也用于格式化表


二、HTML基本语法

文件格式<html></html>(文件的开头与结尾)
主题<title></title>(放在文件的开头)
文头区段<head></head>(描述文件的信息)
内文区段<body></body>(放此文件的内容)
标题<h?></h>(?=1~6,改变标题字的大小)
标题对齐<h align=right,left,center></h>
字加大<big></big>
字变小<small></small>
粗体字<b></b>
斜体字<i></i>
底线字<u></u>
上标字<sup></sup>
下标字<sub></sub>
居中<center></center>
居左<left> </left>
居右<right> </right>
基本字体大小<basefont size>(取值范围从1到7,默认值为3)
改变字体大小<font size=?></font>(?=1~7)
字体颜色<font color=#rrggbb></font>(RGB色码)
指定字型<font face=?></font>(?=宋体,楷体等)
网址链结<a href="URL"></a>
设定锚点<a name="?"></a>(?以容易记为原则)
链结到锚点<a href="#?"></a>(同一份文件)
<a href="URL#?"></A>(锚点不同文件)
显示图形<img src="URL"></a>
图形位置<img src="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)
图形取代文字<img src="URL"alt=?>(无法显示图形时用)
图形尺寸<img src="URL" width=? height=?>(?以像素为单位)
连结图形边线<img src="URL"border=?>(?以像素为单位)
图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)
段落<p></p>
断行<br></br>
横线<hr>
横线厚度<hr size=?>(?以像素为单位)
横线长度<hr width=?>(?以像素为单位)
横线长度<hr width=?%>(?与页宽相比较)
实横线<hr noshade>(无立体效果)
背景图案<body background=图形文件名>(图形文件格式为gif和jpg)
背景颜色<body bgcolor=#rrggbb>(RGB色码)
背景文字颜色<body text=#rrggbb>(RGB色码)
未链结点颜色<body link=#rrggbb>(RGB色码)
已链结点颜色<body vlink=#rrggbb>(RGB色码)
正在链结点颜色<body alink=#rrggbb(RGB色码)

三、具体在做html文件前,我们还有哪些需要做的:

1、网页图象一般有什么要求?
  受网络传输速度制约,图象要尽量小。一般每幅最大不要20K。
图象格式一般为gif和jpg两种。通常单调的可以考虑使用gif压缩。用jpg处理照片比较合适,因为里面包含许多色彩的缓和变化。不管是哪种,做好后都应压缩以给图片减肥,但不要压得太多而失真。压缩可用JPEG Optimizer或Image Optimizer两种工具,若用photoshop5.5做的图象,保存时直接用Save For Web可进行压缩。另外,Gif格式可作成动画。

2、选择图片的网络存储空间
  建议各位卖家们事先可以找一个稳定的空间来存放你的图片,以确保你的买家随时可以看到精美漂亮的商品。注意:不要把图片存放在免费相册里,因为这些相册的路径一般都是虚拟的,每一次浏览的URL都会改变,这对我们卖家来说是非常不好的。
另外要注意的一点是:有一些买家反映看到的卖家商品的图片是小叉叉,这是因为一些卖家在用HTML粘贴图片的时候把自己电脑中C盘或者D盘(也就是本地路径)的图片的路径直接直接复制在命令中,这样就会造成卖家自己可以看到这些图片而你的买家们看到的则是叉叉!所以卖家们在用HTML制作图片的时候一定要注意不要用本地路径直接粘贴图片!

四、练习的例子:(红色字体部分即可修改成你自己的自定义)

第一:用HTML来插入一个图片,
<img src="http://www.cyberhome.cn/images/girl/PLMM_A.jpg">

Key:

第二:用HTML来插入一个URL,
<a href="http://www.cyberhome.cn/images/girl/PLMM_F.jpg">点击我进入</a>

Key:点击我进入

第三:插入url的同时,插入图片,点击图片就可以进入这个url,如做一个插入网园淘艺坊的图片链接代码: <a href="http://taobao.cyberhome.cn/"><img src="http://www.cyberhome.cn/images/girl/PLMM_C.jpg"></a>

Key:

第四:插入一段音乐
高山流水:<embed src="http://www.cyberhome.cn/images/hill-water.mid" width="72" height="25" autostart="false" loop="1" align="absmiddle" controls="smallconsole/playbutton/pausebutton/stopbutton"></embed>

Key:

何日君再来:<a href="http://202.108.23.172/m?ct=134217728&tn=baidumt, 何日君再来 &word=mp3, http://lib.jiutai.org/longresdemo/fWJjZGVmZ2hhYmVlbWhpbjE$.mp3,, [%BA%CE%C8%D5%BE%FD%D4%D9%C0%B4]&si = %BA%CE%C8%D5%BE%FD%D4%D9%C0%B4;; %B5%CB%C0%F6%BE%FD&lm = 16777216">何日君再来</a>
Key:
何日君再来

 
发表于 2007-7-2 12:03:14 | 显示全部楼层
忽~看得眼睛痛那
发表于 2007-7-2 13:07:12 | 显示全部楼层
是不是多来点图鉴,光看文字难懂
发表于 2007-7-2 13:42:37 | 显示全部楼层
同意楼上说的!
先带走~~慢慢研究去~~
发表于 2007-7-2 15:46:10 | 显示全部楼层
这些写起来好累...可以不用写啊...
发表于 2007-7-2 21:10:41 | 显示全部楼层
真正的语法,很难懂哦,我喜欢看例题,呵呵

谢谢楼楼:)
发表于 2007-7-2 21:13:19 | 显示全部楼层
<P>
原帖由 <I>quincylin</I> 于 2007-7-2 15:46 发表 <A href="http://www.kltx.net/redirect.php?goto=findpost&amp;pid=31412&amp;ptid=5081" target=_blank><IMG onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.kltx.net/images/common/back.gif');}" alt="" src="http://www.kltx.net/images/common/back.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0></A> 这些写起来好累...可以不用写啊...
</P>
<P>&nbsp;</P>
<P>不用自己写哦,复制,学会套用就行了,当然了,没有这些语法字母,就不会出来漂亮的帖子了:)</P>
您需要登录后才可以回帖 登录 | 非必要不注册

本版积分规则

手机版|小黑屋|分享我的生活 kltx.vip ( 京ICP备2022033851号-1 )

GMT+8, 2025-1-18 18:49

Powered by Discuz! X3.5 Licensed

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表