经过1天多的艰苦奋战,终于把html(Hypertext markup language)的基础教程给看完了。
这次为了xml而看了这“古老”的技术,还是有点收获的。。总体来说,虽然不是很熟练,但是看懂一般的html网页源文件已经不是问题了。闲来无事,就写写笔记吧,说说感受也好!
1总体架构
html给我的感觉是很标准,很有格式的。最主要的代码特点就是标记成对的出现,虽然有些可以省略,但是建议除非太过烦琐还是把前后都加上去吧!作为一个完整的html网页,总是有头部,主体和结尾3大部分,分别用<head></head>,<body></body>和</html>表示。另外,一个重要特性就是可以自定义风格(CSS),这是非常方便的,类似于编程语言的类的功能吧!同时,还可以嵌入其他script来增强其交互功能。而对于相当重要的标记,也只是由头部标识和属性所组成。(<标识 属性1 属性2 属性3...>)看来,学习html是学习其他网页脚本语言的基础吧,同时对于学习可视化网页设计也是有帮助的(这么说应该不过分吧!)!,下面就让我们一起来详细分析各个部分的构成元素。
2常见标记介绍
其实大多数html网页的标记不多,就只有10几个吧!(看到这里,好!)这里主要介绍一下常见的控制文件的外观和布局的标记!
<h>:从<h1>到<h6>所标识的字体依次减小,一般来说,<h1>用来标记文件标题<h2>用来标记一章的标题<h3>用来标记章节的标题,<h6>则是来作为小字印刷,如版权信息等等。
<p>和<br>:基本类似于回车键的功能,而<p>可以插入空格,同时也可以附带属性,如<p align=right>效果<p>(缺省情况是左对齐,左对齐很多排列方式的缺省情况)
<div>:虽然类似于<p>,也可以使用align属性,但是在使用风格表格时功能强大。(风格表格见后)
<hr>:可以产生一条水平线,对于组织格式是很有帮助的。
在这里应该说一说逻辑标记和物理标记的差别:物理标记表明信息的外观,而逻辑标记表明信息的语义。从适用范围来说,使用逻辑标记更值得推荐,因为逻辑标记表示的是本质特性,不随浏览器的变化而变化!
逻辑标记:<cite><dfn><strong><code><ins><del>(注:大家可以自己测试一下,看看有什么效果,其中ins和del是很有用的标记,特别是在多人合作开发的时候,看字面应该知道这两个是干嘛的吧!)
物理标记:<i><t><tt><big><small><sub><sup><strike>(注:大家测试吧,动手最重要◎)
3链接
链接是超文本(Hypertext)格式的重要实现方式,而使用的就是锚(Anchor)(,所以缩写也就是<a>),
一个典型的锚标记的定义:<a href="目标页面">激活热区</a>(注:href:hypertext reference,就是链接到哪里),现在分情况介绍:
1)外部链接
1。1非本地文件:<a href="http://www.zsu.edu.cn">中山大学</a>(这个很明显,不用解释了)
1。2其他形式的非本地资源:<a href="ftp://ftp.zsu.edu.cn">中山大学</a>(ftp资源)
<a href="mailto:[email protected]">我的email</a>(email信息)
1。2本地文件:<a href="另一个网页.html">另一网页?</a>(同一文件夹的,当然也可以给出完整路径咯)
<a href="../另一个网页.html">另一网页?</a>(上一级别文件夹的)
(注:../表示上一级文件夹,同样../../就表示上上一级)
2)内部链接
什么是内部链接,就是在同一个网页里边的链接!这样做是为了避免网页太大而造成的浏览麻烦!
步骤:首先要定义一个引用目标锚,然后在另一处定义被锚引用的目标!看例子吧◎
<a herf="#top">top</a>(其中#top定义了该锚)
<a name="top">top</a>(这里就引用了该锚)
(注:这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了)
4图像
使用图像:<img src="图像文件">(注:图像文件路径与链接路径相同)。在这里可以加入提示属性<alt>,如<img src="图片.gif" alt="图片">(注:看看有什么效果,如果图片不存在,会怎样呢?)
1)对齐方式:缺省是左对齐,可以使用<div align=..>进行更改。
2)高度和宽度:<img src="图片.gif" height=34mm width=34mm>(注:看明白了吧!不过应该注意的一点是,在ie里边高度和宽度的比例应该与源图相同,不然就显示不了,已在我的机子上测试过了)
3)四周区域和边框:<img src="图像文件" border=4 hspace=5 vspace=5>(注:很简单吧,测试一下吧!还有,边框默认情况是没有的,但是对于有链接的图来说,有个框框还是很好的)
啊。。今天就到这里吧。。下次继续。。
本文地址:http://com.8s8s.com/it/it30592.htm