阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
html基础学习笔记（1）
html基础学习笔记（1） 4 Y>v+N^
出处 5X^bv W26
YDEUiZ~
经过1天多的艰苦奋战，终于把html（Hypertext markup language）的基础教程给看完了。 v/% q*6@
qta^i819
这次为了xml而看了这“古老”的技术，还是有点收获的。。总体来说，虽然不是很熟练，但是看懂一般的html网页源文件已经不是问题了。闲来无事，就写写笔记吧，说说感受也好！ s^nP SY!
CV <@Rg
oa
1总体架构 I{Pn y/d`
b}P5*}$:9"
html给我的感觉是很标准，很有格式的。最主要的代码特点就是标记成对的出现，虽然有些可以省略，但是建议除非太过烦琐还是把前后都加上去吧！作为一个完整的html网页，总是有头部，主体和结尾3大部分，分别用<head></head>,<body></body>和</html>表示。另外，一个重要特性就是可以自定义风格（CSS），这是非常方便的，类似于编程语言的类的功能吧！同时，还可以嵌入其他script来增强其交互功能。而对于相当重要的标记，也只是由头部标识和属性所组成。（<标识 属性1 属性2 属性3...>）看来，学习html是学习其他网页脚本语言的基础吧，同时对于学习可视化网页设计也是有帮助的（这么说应该不过分吧！）！，下面就让我们一起来详细分析各个部分的构成元素。 Z,~"`9>Ss
`_L=~F8
2常见标记介绍 J:M)gh~#
QInow2/u
其实大多数html网页的标记不多，就只有10几个吧！（看到这里，好！）这里主要介绍一下常见的控制文件的外观和布局的标记！ ~'/I[y4t
rV LUT
<h>:从<h1>到<h6>所标识的字体依次减小，一般来说，<h1>用来标记文件标题<h2>用来标记一章的标题<h3>用来标记章节的标题，<h6>则是来作为小字印刷，如版权信息等等。 Ve<3XRq |8
!A>VzW
<p>和<br>:基本类似于回车键的功能，而<p>可以插入空格，同时也可以附带属性，如<p align=right>效果<p>（缺省情况是左对齐，左对齐很多排列方式的缺省情况） RZykwD(
USVM' ~p I
<div>:虽然类似于<p>,也可以使用align属性，但是在使用风格表格时功能强大。（风格表格见后） 5H_%inWM
?L|Jc_E
<hr>:可以产生一条水平线，对于组织格式是很有帮助的。 T7W*S-IW
h v xvwV1
在这里应该说一说逻辑标记和物理标记的差别：物理标记表明信息的外观，而逻辑标记表明信息的语义。从适用范围来说，使用逻辑标记更值得推荐，因为逻辑标记表示的是本质特性，不随浏览器的变化而变化！ 51oZ w%os=
Ed/@&52z0
逻辑标记：<cite><dfn><strong><code><ins><del>（注：大家可以自己测试一下，看看有什么效果，其中ins和del是很有用的标记，特别是在多人合作开发的时候，看字面应该知道这两个是干嘛的吧！） Is6<3eQ\x
Ov{fO
物理标记：<i><t><tt><big><small><sub><sup><strike>（注：大家测试吧，动手最重要◎） tMaJ; 4
)=\W
sQ
3链接 @Kr i)U
i
uNLB3Rdy}
链接是超文本（Hypertext）格式的重要实现方式，而使用的就是锚（Anchor）（，所以缩写也就是<a>）, [P*3ld,,G%
g0.D3 6
一个典型的锚标记的定义：<a href="目标页面">激活热区</a>（注：href：hypertext reference,就是链接到哪里），现在分情况介绍： 4%WV)lt
]rM{\En
1）外部链接 ? V_Qa0k
WG
9f>kE
1。1非本地文件：<a href="http://www.zsu.edu.cn">中山大学</a>（这个很明显，不用解释了） (^g?/i1@d
7p}G!]
`
1。2其他形式的非本地资源：<a href="ftp://ftp.zsu.edu.cn">中山大学</a>（ftp资源） ; %
*e}w0
78tWzO
<a href="mailto:mc02cxj@zsu.edu.cn">我的email</a>（email信息） 5Ah-aDBj
3nBbPP_
1。2本地文件：<a href="另一个网页.html">另一网页？</a>（同一文件夹的，当然也可以给出完整路径咯） *qg9~/
O?@1</r ^
<a href="../另一个网页.html">另一网页？</a>（上一级别文件夹的） yy?| q0
B$7m@|p!
（注：../表示上一级文件夹，同样../../就表示上上一级） @1P1n8mH]
: o$ R@l
2）内部链接 uqZLlP#&#
$X5~9s1Wl
什么是内部链接，就是在同一个网页里边的链接！这样做是为了避免网页太大而造成的浏览麻烦！ ?{q w
/&
t; n6Q0
步骤：首先要定义一个引用目标锚，然后在另一处定义被锚引用的目标！看例子吧◎ 14\%2nE
S$]:3
<a herf="#top">top</a>（其中＃top定义了该锚） h_ ]3L/
5S7`gN.
<a name="top">top</a>（这里就引用了该锚） ^g[\.Q
"<6pp4*I
(注：这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了) !5`}s9hsF_
LH 4
-b-
4图像 N(&FATZUW
qx{.`AaZW
使用图像：<img src="图像文件">（注：图像文件路径与链接路径相同）。在这里可以加入提示属性<alt>，如<img src="图片.gif" alt="图片">（注：看看有什么效果，如果图片不存在，会怎样呢？） `#fOY$#XB
(Wq9YDD@
1）对齐方式：缺省是左对齐，可以使用<div align=..>进行更改。 6Ep ns s
q22cp&gmX
2）高度和宽度：<img src="图片.gif" height=34mm width=34mm>（注：看明白了吧！不过应该注意的一点是，在ie里边高度和宽度的比例应该与源图相同，不然就显示不了，已在我的机子上测试过了） }U'5j/EFZ
5F2+o#*h
3）四周区域和边框：<img src="图像文件" border＝4 hspace=5 vspace=5>（注：很简单吧，测试一下吧！还有，边框默认情况是没有的，但是对于有链接的图来说，有个框框还是很好的） 'n: Ft
PR|Trnd&D
啊。。今天就到这里吧。。下次继续。。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:27 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> html基础学习笔记（1）
