欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

几种关于html和css的使用方法

程序员文章站 2022-05-21 23:46:27
...
本文主要和大家介绍了几种关于html和css的使用方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

HTML使用方法篇

一：颜色代码
如果你想使用某种颜色，取得它的颜色值即可。比如，您想改变某些文字的颜色，您可以使用下面的代码：<font color=#ffc060 size=2>改变#符号后的代码即可改变颜色</font>

二：文字加粗 倾斜的代码

◆文字加粗的代码是: <b>你好</b> ◆文字倾斜的代码是: <i>你好！</i> ◆底线字：<u></u>


三：文字链接代码
如果您想点击某处文字会连接到另外一个网页的效果，这是超链接，代码是这样：
<a href="网站地址";>共享空间</a>如果要点了这个文字以后重新打开一个窗口的话，代码是：<a href="网站地址";; target="_blank">共享空间</a>

四：在网站上放图片的代码
如果你看到一个好看的图片想放到网站上，代码是这样的：
<img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100">
后面的数字调节图片的尺寸大小。

五：图片链接代码
如果要点一下图片就能打开一个网站的链接代码是这样的：
<a href="http://www.163.com/";><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>
如果要点一下图片就能打开一个网站的链接，并且重新打开一个窗口。代码是这样的：
<a href="http://www.163.com/";; target="_blank"><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>上面的数字都能调节图片尺寸大小。

六：换行代码

如果你想换行，直接用Enter键是不行的，需要在您想换行的位置输入<br>
，这样就会分成两行显示 ，整个网站看起来也不会是一大片了，而是段落分明。

七：文字移动的代码是
<marquee>这里写文字</marquee>

八：移动图片的代码
<marquee><img src="/Article/UploadFiles/200605/20060507081900241.jpg";><img src="/Article/UploadFiles/200605/20060507081900700.jpg";><img src="/Article/UploadFiles/200605/20060507081900831.jpg";><marquee>
把里面的图片地址换成你的就行 想多放一个图片就按照格式在中间插入：
<img src="/Article/UploadFiles/200605/20060507081900700.jpg";>
里面的图片地址自己定。

九：背景音乐的代码
如果想在你的网站上放上一段好听的背景音乐，代码是： <bgsound src="http://xxxxx.com/xxx.mid";loop=10>
<bgsound src="http://www.midifan.com/midi/music.ASP?id=3073";loop=30> 里面的背景音乐地址你能自己替换。
前面的是音乐地址，一般都以mid或者mp3的形式结尾 后面的数字是播放次数。
http://www.midifan.com/midi/
这个网站都有好的背景音乐

十：在网站中插入一个flash动画的代码是
<embed width=200 height=200
src="http://flash.shangdu.com/view/2/fff.swf";> 里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。

十一：打开网站时候出现的欢迎词代码
<body onLoad= alert("你好，欢迎访问本网站！")>

十二：关闭网站的时候出现的话
<body onUnload="window.alert('谢谢您的光临)">

十三：打开网站的时候自己做一个弹出窗口的广告
<script language="javascript">
var TimerID=1;
window.open('http://163.com'/;,'','width=600,height=300,left=100,top=50');
</script>
里面的 http://163.com/ 这个是你预先做好的一个网页，后面的数字是调节大小和位置的，你自己多试验几次。

十四：鼠标感应字体变红色

代码如下：插在<body></body>之间 

<STYLE type=text/css>TD { 
FONT-SIZE: 12px 
} 
BODY { 
FONT-SIZE: 12px 
} 
INPUT { 
FONT-SIZE: 12px 
} 
A:link { 
COLOR: #000000; TEXT-DECORATION: none 
} 
A:visited { 
COLOR: #000000; TEXT-DECORATION: none 
} 
A:active { 
COLOR: blue; TEXT-DECORATION: none 
} 
A:hover { 
COLOR: red; TEXT-DECORATION: underline 
} .so { 
BORDER-RIGHT: 1px ridge; BORDER-TOP: #ffffff 1px ridge; FONT-SIZE: 12px; BORDER-LEFT: #ffffff 1px ridge; BORDER-BOTTOM: 1px ridge; BACKGROUND-COLOR: #cccccc 
} 
</STYLE>

十五：禁止他人复制你网页的代码：

<body bgcolor="#ffffff"oncontextmenu="return false"onselectstart="return false">

十六：把其它网页放入自已网页中的代码：

<IFRAME name=smjh align=center src="../../这里换成你要放入网站的网址" frameBorder=0 width=760 scrolling=no height=300></IFRAME>

网页中使用CSS样式表的五种方法

一、使用STYLE属性

将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签

将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如： 

<STYLE TYPE="text/css">
<!--
BODY {
　　color: BLUE;
　　background: #FFFFCC;
　　font-size: 9pt}
TD, P {
　　COLOR: GREEN;
　　font-size: 9pt}
-->
</STYLE>

通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签

将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。


四、使用@import引入

跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
　　@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
　　@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分号是绝对不可少的！

五、使用<span></span>标记引入样式

例如：<span style="font:12px/20px 宋体 #000000;">网页教学网</span>

以上就是几种关于html和css的使用方法的详细内容，更多请关注其它相关文章！

相关标签： css html

上一篇： php smtp发送邮件

下一篇： Word2007内置工具帮你进行四则运算

推荐阅读