找回密码
 注册
搜索
热搜: 回贴

HTML基础学习笔记

2009-12-16 01:56| 发布者: admin| 查看: 22| 评论: 0|原作者: 柳梦璃


9CSS
什么是CSS:就是层叠式风格列表,类似于网页格式的模板,也相当于编程里边的类一样,定义了自己的风格,标记着属性的值(或许比喻不怎么恰当,就原谅一下咯。)下面给出一个完整的例子,大家注意看释:

CSS



标题1


标题2


标题3


标题4


蓝色文字

红色吗?

是红色吗?
orange

orange

爱逛街的老鼠??

//这就是类的使用方法,调用了class


注:由于css功能强大,所以只是简单写了写,以后有机会再专门写写
经过1天多的艰苦奋战,终于把html(Hypertext markup language)的基础教程给看完了。
这次为了xml而看了这“古老”的技术,还是有点收获的。。总体来说,虽然不是很熟练,但是看懂一般的html网页源文件已经不是问题了。闲来无事,就写写笔记吧,说说感受也好!
1总体架构
html给我的感觉是很标准,很有格式的。最主要的代码特点就是标记成对的出现,虽然有些可以省略,但是建议除非太过烦琐还是把前后都加上去吧!作为一个完整的html网页,总是有头部,主体和结尾3大部分,分别用,和表示。另外,一个重要特性就是可以自定义风格(CSS),这是非常方便的,类似于编程语言的类的功能吧!同时,还可以嵌入其他script来增强其交互功能。而对于相当重要的标记,也只是由头部标识和属性所组成。(<标识 属性1 属性2 属性3...>)看来,学习html是学习其他网页脚本语言的基础吧,同时对于学习可视化网页设计也是有帮助的(这么说应该不过分吧!)!,下面就让我们一起来详细分析各个部分的构成元素。
2常见标记介绍
其实大多数html网页的标记不多,就只有10几个吧!(看到这里,好!)这里主要介绍一下常见的控制文件的外观和布局的标记!
:从

所标识的字体依次减小,一般来说,

用来标记文件标题

用来标记一章的标题

用来标记章节的标题,

则是来作为小字印刷,如版权信息等等。


:基本类似于回车键的功能,而

可以插入空格,同时也可以附带属性,如

效果

(缺省情况是左对齐,左对齐很多排列方式的缺省情况)

:虽然类似于

,也可以使用align属性,但是在使用风格表格时功能强大。(风格表格见后)


:可以产生一条水平线,对于组织格式是很有帮助的。
在这里应该说一说逻辑标记和物理标记的差别:物理标记表明信息的外观,而逻辑标记表明信息的语义。从适用范围来说,使用逻辑标记更值得推荐,因为逻辑标记表示的是本质特性,不随浏览器的变化而变化!
逻辑标记:(注:大家可以自己测试一下,看看有什么效果,其中ins和del是很有用的标记,特别是在多人合作开发的时候,看字面应该知道这两个是干嘛的吧!)
物理标记:(注:大家测试吧,动手最重要◎)
3链接
链接是超文本(Hypertext)格式的重要实现方式,而使用的就是锚(Anchor)(,所以缩写也就是),
一个典型的锚标记的定义:
激活热区(注:href:hypertext reference,就是链接到哪里),现在分情况介绍:
1)外部链接
1。1非本地文件:中山大学(这个很明显,不用解释了)
1。2其他形式的非本地资源:中山大学(ftp资源)
我的email(email信息)
1。2本地文件:另一网页?(同一文件夹的,当然也可以给出完整路径咯)
另一网页?(上一级别文件夹的)
(注:../表示上一级文件夹,同样../../就表示上上一级)
2)内部链接
什么是内部链接,就是在同一个网页里边的链接!这样做是为了避免网页太大而造成的浏览麻烦!
步骤:首先要定义一个引用目标锚,然后在另一处定义被锚引用的目标!看例子吧◎
top(其中#top定义了该锚)
top(这里就引用了该锚)
(注:这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了)
4图像
使用图像:(注:图像文件路径与链接路径相同)。在这里可以加入提示属性,如图片(注:看看有什么效果,如果图片不存在,会怎样呢?)
1)对齐方式:缺省是左对齐,可以使用
进行更改。
2)高度和宽度:(注:看明白了吧!不过应该注意的一点是,在ie里边高度和宽度的比例应该与源图相同,不然就显示不了,已在我的机子上测试过了)
3)四周区域和边框:(注:很简单吧,测试一下吧!还有,边框默认情况是没有的,但是对于有链接的图来说,有个框框还是很好的)
5列表
1)无序列表:无序,就是没有特别的序号,也就是平等哦。。下面看个例子吧。
  • 内容1
  • 内容2
  • 内容3
(注:对于ul,可以添加属性type,属性值有disc,square,circle,这样就可以改变序号了◎)
2)有序列表:这个当然就是前面有序号咯。
  1. 内容1
  2. 内容2
  3. 内容3
(注:对于ol,同样可以添加type属性,属性值可以是1,a,A,i,I,呵呵,自己测试一下。)另外,对于ol,可以从喜欢的序号开始排序,用的属性就是ol的start和li的value了,很明白吧:)
3)列表嵌套:嵌套,类似于树状菜单的东西。可以使用
    (ol也一样)类似的格式进行使用。
    4)定义列表:主要有dl,dt,dd,分别代表定义标识,头部和内容,使用方法:
    头部
    定义的内容
    (注:dt和dd不需要结束标记)
    6表单
    1)定义一个form:定义一个form标记,用于确定发送消息的类型和处理方式,其中必须的属性就是action了。
    (注:method用于说明传送数据的方式,还有get方式,不过现在常用post)。类似的有,
    2)大部分的form都是在中处理的。如下面所示:
    请输入名字


    请输入口令


    请提出宝贵意见




    自己可以修改一下属性并进行测试◎
    3)复选框和单选框
    check1
    check2
    check3

    (这是复选框)
    radio1
    radio2
    radio3

    (这是单选框)
    4)下拉菜单和滚动菜单

    (下拉菜单)

    (滚动菜单,就是比下拉菜单多了个multiple属性和name属性,而size属性是可有可无)
    7帧结构
    什么是帧结构,就是在一个完整网页里边分页,当一个页的url发生变化,其他的可以不变:)使用帧结构可以使得网页更加多变,内容更加丰富,不过也会带来一定的麻烦,因为它打乱了原来的基本操作规则。
    如何建立一个帧结构?如下面的例子所示。
    ///注意:没有body的哦。。

    帧结构

    //定义了网页的分页结构,包括了行数和列数
    //引用网页的基本写法
    //定义了一个嵌套的帧

    //scrooling表示是否带有滚动条

    //frameborder表示边框格式,1表示缺省,0表示无
    //noresize使得帧窗口的大小不可移动!


    注:另外,如果在帧窗口中加入这样的话,当激活这个链接的时候,就清除了当前的帧结构,用新页代替,可以自己测试一下。
    8表格
    如何建立一个表格呢?

    //大家可以测试一下,这3个分别表示的是什么。。其中border表示边框,如果不设置,那么显示的表格就没有边框。而cellsapcing是格间线宽度,cellpadding是内边框!


    //标题,可以使用align属性进行设置其出现的位置


    //数据,可以使用align和valign对其上下左右的位置进行设置


    //还可以对其bgcolor属性进行设置数据的颜色

    数据
    数据1数据2
    一些数据还有数据
    更多数据最后数据

    注:还可以进行跨行和跨列的设置,用的是colspan和rowspan(看意思就知道了:))如:
    数据内容

    最新评论

    QQ|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )

    GMT+8, 2024-9-30 13:33 , Processed in 0.082806 second(s), 12 queries , Gzip On, MemCache On.

    Powered by Discuz! X3.5

    © 2001-2023 Discuz! Team.

    返回顶部