打印

[原创] HTML教程二

本主题由 yofx 于 2008-7-23 04:02 审核通过

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=http://wwwbaidu.com target="_blank">弹出一个新窗口</a><br><br>
<a href=http://www.baidu.com>不弹出新窗口</a><br><br>

去掉超级链接的下划线
style="text-decoration:none"
<a href=http://www.baidu.com 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"
Align=bottom使图像底部与文本区域顶部对齐

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

图像的超级链接
<a href="http://www.baidu.com"><img src="s.jpg"></a>
例子
<a href="http://www.baidu.com">
    <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="http://www.enet.com.cn">
  <area shape="poly" coords="126,107,60,122,25,98,31,78,71,62,93,45,109,35,127,63,147,81" href="http://www.enet.com.cn">
  <area shape="poly" coords="111,114,151,113,178,135,167,158,122,151,105,135" href="http://www.enet.com.cn">
</map>
</body>
Hold out and you will succeed in time

TOP

伤心,没人顶.算了,不发了.
Hold out and you will succeed in time
HTML 太简单了,因为咱们X子 这个好象应该算是必学的 没有强调的必要
呵呵 相信X 都会了,
不过我还是帮你顶起来

TOP

Processed in 0.072024 second(s), 6 queries, Gzip enabled