黑客X档案官方论坛's Archiver

zhutou 发表于 2008-7-22 11:30

HTML教程二

文件标签属性
1.文字颜色
<font color=#> wenzi </font>
2.文字字体
<font face="#,#,...,#">...</font>
#=客户端可获得的字体
3.文字大小
<font size=#>...</font>
4.文字标题
<h#>...</h#>
#=1,2,3,4,5,6

文字布局
段(Paragraph)(可以看做是空行)
<p>
空白占位符

行的控制 <br>不成对出现
<nobr>为强制不换行,中间出现的文字无论浏览器宽度如何,均不改变.
<nobr>
  请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记的作用!
</nobr>

<body>......
     <i>倾斜文本</i>
<b>粗体</b>
<u>下划线</u>
<s>删除线</s>
......</body>

HTML注释
<!--注释部分-->
<!--多行注释内容-->

文字的对齐
<hn align=#>...</hn>(n=1,2,3,4,5,6)
<p align=#>...</p>(#=left,center,right>
<BODY>
<h3 align=left>align标志的左对齐</h3>
<h3 align=center>align标志的居中对齐</h3>
<p align=right>p标志中利用align标志实现右对齐</p>
<center>center标志的居中对齐</center>
  </BODY>

文字的分区显示
<div align=#>...</div>
(#=left,center,right)

居中元素<center>
独立的使所标记的字符居中的元素
<BODY>
<center>
<p>那一年 你正年轻 总觉得明天肯定会很美</p>
<p>那理想世界就象一道光芒 在你心里闪耀着</p>
<p>怎能就让这不停燃烧的心 就这样耗尽消失在平庸里</p>
<p>你走在这繁华的街上 在寻找你该去的方向</p>
</center>
<p>你走在这繁华的街上 在寻找你曾拥有的力量</p>
  </BODY>

正常字--<em>em标记-斜体</em><p></p>
        正常字--<strong>strong标记-对内容进行强调</strong><p></p>
        正常字--<code>code标记-等宽字符</code><p></p>
        正常字--<var>var标记变量或程序参数-以斜体字来显示</var><p></p>
        正常字--<small>small标记-文本以小字体显示</small><p></p>
        正常字--<big>big标记-文本以大字体显示</big><p></p>
3.HTML段落与分行控制标尺线
<hr size=#>:   设定线宽
<hr width=#>:   设定线长
<hr align=#>:   设定对齐方式
#=left,right
<hr color=#>:   设定线的颜色
<BODY text=#0000ff>
        <H3 align=center>Horizontal rule</h3>
        <hr>
        <hr size=10>
        <hr width=50>
        <hr width=50%>
        <hr width=50% align=left>
        <hr width=50% align=right>
        <hr size=10 width=80% color=#ff0000>
        <hr size=10 width=80% color=#00ff00>
        <hr size=10 width=80% color=#0000ff>
        <hr noshade>
<p>

</BODY>

无序列表元素列表在HTML的文挡里有重要的地位,HTML规定了多种列表元素,列表所起的主要作用是使特定的文本有序化.
无须列表是有<ul>和<li>元素定义的:
<ul>
<li>sports</li>
<li>food</li>
<li>drink</li>
<li>friends</li>
</ul>
列子
<BODY>

        无序列表
        <ul>
                <li>列表项1</li>
                <li>列表项2</li>
        </ul>
        <hr>
        有序列表
        <ol>
                <li>列表项1</li>
                <li>列表项2</li>
        </ol>
        <hr>
  </BODY>

无须列表的默认符号是圆点.
<ul>元素有type属性,通过定义不同的type属性可以改变列表的项目符号.目前,type属性的属性值有:
disc(圆),  circle(圆圈),  square(方块)
<BODY>
        <font size=12>
        <ul>
                <li type=disc>disc
                <li type=circle>circle
                <li type=square>square
        </ul>
        </font>
  </BODY>

有序列表有<ol>和<li>定义:
<ol>
<li>sports</li>
<li>drink</li>
<li>friends</li>
</ol>

<ol>元素也有自己的type属性,type属性的值有1,A,a,I,i等.例如,我们以A,B,C....做为列表的编号
<BODY>
        <font size=4>
        <ol>
                <li type=A>ONE-ONE
                <li type=A>ONE-TWO
        </ol>
</BODY>

<ol>还可以定义列表的起始编号
<ol start=5>

4.超级链接在<a>元素下,有元素属性href=
href的属性值是一个URL地址.
如<a href="http://www.baidu.com">指向学院的超级链接</a>
如<a href="5.htm">
a标记的英文为anchor
超级链接也可以指向EMAIL
如<a href="mailto:ww@qq.com">指向EMAIL的超级链接</a>

开一个新的浏览器窗口
<a href="URL" target="_blank">新开百度</a>
<a href=[url=http://wwwbaidu.com]http://wwwbaidu.com[/url] target="_blank">弹出一个新窗口</a><br><br>
<a href=[url=http://www.baidu.com]http://www.baidu.com[/url]>不弹出新窗口</a><br><br>

去掉超级链接的下划线
style="text-decoration:none"
<a href=[url=http://www.baidu.com]http://www.baidu.com[/url] style="text-decoration: none">链接下面没有下划线</a>

指向本页面锚点的超链,就是返回本页的顶部.
<a href="#top">返回页首</a>
指向23页的锚点
<p>
        <a href="23.htm#top">链接23页面的锚点</a>
        </p>

HTML对照片的控制基本语法
<img src="图片名称">
src的属性为图片的URL地址.
URL可以是绝对或者相对地址.
<BODY>
        <img src="hefang.jpg" alt="情系何方">
        <img src="hefang2.jpg" alt="情系何方">
  </BODY>
alt为图片的替代文本

图片的显示大小
方法:
<img src=:sample.jpg" width=100 hetght=100>
width,height分别是宽度和高度
他们的属性值也可以是像素,和%
<img src="hefang.jpg" width=120 height=120><p>

图片的边框
<img src="sample.jpg" border="2">
border 的属性值为像素数
<img src="hefang.jpg" border=5>

图片的对齐方式
可以相对于页面或单元格有一个对齐方式.
定义水平方式的方法是:
<img src="sample.jpg" align="left">
<img src="a.jpg" align="ringt">
例子
<img src="hefang.jpg" align=left >图像处于文本区域的左边  ,后边都是文字.

图片的垂直对齐方式
<img src='s.jpg" align="top">
                                   = "middle"
                                    = "bottom"
[b]Align=bottom使图像底部与文本区域顶部对齐[/b]

[b]定义图片与左右文本之间的间距[/b]
[b]<img src="s.jpg" hspace=5 vspace=5>[/b]
[b]Hspace(horizontal)定义水平间距[/b]
[b]Vspace(vertical)定义垂直间距[/b]
[b]单位都是像素数[/b]
<img src="hefang.jpg" align=left vspace=10 hspace=20>

图像的超级链接
<a href="http://www.baidu.com"><img src="s.jpg"></a>
例子
<a href="[url=http://www.baidu.com][color=#0000ff]http://www.baidu.com[/color][/url]">
    <img src="hefang.jpg">
</a>

图像映射
是指一个图片上的不同位置被制定了不同的超级链接,电击不同的位置会打开不同的超链目标.
图像映射有<map>定义,,有一个基本属性是name
name给图像映射名字,这个命名将会被<img>元素用usemap属性引用.
<map>在定义图像影射时,可以定义三种形状的映射:
circle   圆形
rect    矩形rectangle
poly   多边形
例子
<body bgcolor="#FFFFFF" text="#000000">
<img src="chinamap.gif" width="362" height="265" border="0" usemap="#Map">
<map name="Map">
  <area shape="poly" coords="110,195,151,190,149,159,108,149,91,124,44,125,36,154" href="[url=http://www.enet.com.cn/][color=#0000ff]http://www.enet.com.cn[/color][/url]">
  <area shape="poly" coords="126,107,60,122,25,98,31,78,71,62,93,45,109,35,127,63,147,81" href="[url=http://www.enet.com.cn/][color=#0000ff]http://www.enet.com.cn[/color][/url]">
  <area shape="poly" coords="111,114,151,113,178,135,167,158,122,151,105,135" href="[url=http://www.enet.com.cn/][color=#0000ff]http://www.enet.com.cn[/color][/url]">
</map>
</body>

zhutou 发表于 2008-7-27 20:26

伤心,没人顶.算了,不发了.

regedit 发表于 2008-7-27 21:53

HTML 太简单了,因为咱们X子 这个好象应该算是必学的 没有强调的必要
呵呵 相信X 都会了,
不过我还是帮你顶起来

页: [1]


Powered by Discuz! 6.1.0  © 2001-2007 Comsenz Inc.