Chinaunix首页 | 论坛 | 博客
  • 博客访问: 4510486
  • 博文数量: 291
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 7924
  • 用 户 组: 普通用户
  • 注册时间: 2016-07-06 14:28
个人简介

阿里巴巴是个快乐的青年

文章分类

全部博文(291)

文章存档

2018年(21)

2017年(4)

2016年(5)

2015年(17)

2014年(68)

2013年(174)

2012年(2)

分类: Html/Css

2014-03-31 21:01:32

一、HTML语言入门
        HTML(Hypertext Markup Language,超文本标记语言)是一种用来制作Web上超文本文档的简单标记语言。它是在原来文本文件的基础上,加上一系列标记描述其格式、颜色,再加上声音、动画、甚至视频等,形成精彩的画面。当用户浏览WWW上的信息时,浏览器会自动解释这些标记的含义,并按照一定的格式在屏幕上显示这些被标记的文件。
1、一个简单的例子
        用任意编辑器中输入如下代码:
       
           
                第一个网页 
           
           
                这是我的第一个HTML文件!
           
       
        以first.html或first.htm文件名保存,用浏览器打开这个文件即可看到效果。
2、HTML基本格式
        一般HTML文件的开头和结尾分别由和标识标出,当浏览器遇到标记时即会按照HTML标准解释后面的文本,直到遇到结束标记。
        和之间的部分成为头标部分,包含当前网页的一些信息和数据,可看成是整个网页的序言。
        标记用来给网页命名,它应该能够反应网页的内容,显示时在浏览器的标题栏上。
        和之间是网页的主体内容。

二、超链接
        网页上的超链接一般有两种,即同一网页中的链接和不同网页之间的链接。
1、URL
        URL(Uniform Resource Locator,统一资源定位符),即我们常说的网址。
2、超链接的基本格式
        超链接的基本格式如下:
        高亮显示的文本
        以为超链接的开始,href指出所要链接的信息,常用HTTP/FTP等链接方式。
        在网页中,一般文字上的超链接是蓝色,文字下面有一条下划线,当鼠标指针移动到该链接上时,就会变成一只手的样子,单击一下就可以跳到此超链接所指的网页上去。
3、同一网页中链接
        首先,设置超链接,其简单的结构形式如下:
       
高亮显示的文本 
        其中,锚名是指网页中能被链接到的一个特定位置。
        然后,通过标记指定具体锚名,即:
       

        点击前面的“高亮显示文本”,就能跳转到下面处。
4、不同网页之间的链接
        这个就比较常见,格式和使用方法如前面2所述。

三、网页的修饰
        在HTML页面中,可以采用各种标记来对页面进行修饰。
1、字体标记
        对于字体无外乎形状、大小、颜色等,HTML对此有相应的标记来描述。
        对于形状常用标记有粗体()、斜体()、下划线()等。
        对于字符大小有如下三种方式来描述:
        (1)大小等级,分6级,即h1、h2、h3、h4、h5、h6,其中,h1最大,h6最小,一般前3种比正文字体大,后3种比正文字体小。
        (2)绝对大小,在HTML中,用标记带size属性来描述,如size = 5表示五号字体。
        (3)相对大小,用size = "+3"表示比当前字体大三号,size = "-2"表示比当前字体小二号。
        对于颜色可用font带color属性来描述font后面的字符颜色,比如:
        表示即将显示的字符为黄色五号字
        表示即将显示的字符为灰色比当前字体大三号
        从上面例子可以看出,颜色即可用英文单词表示,又可以用十六进制数来表示。
2、页面标记
        (1)加入注释
        格式:
        (2)段标记
        格式:

...


        (3)换行标记
        格式:

        (4)预格式化文本标记
        格式:
 ... 

        (5)水平线
        格式:

        (6)文字对齐
        格式:
... 
... ... 
        (7)背景色彩或背景图案
        格式:link=# alink=# vlink=#>
        其中,background(背景图案和图像文件名及其定位路径)、bgcolor(背景色彩)、text(非可链接文字的色彩)、link(可链接文字的色彩)、alink(正被单击的可链接文字的色彩)、vlink(已经单击过的可链接文字的色彩)、#(rrggbb,色彩值用十六进制的红-绿-蓝RGB来表示)。
        (8)多窗口页面标记
        一幅Web页面可以分为几个部分,每个部分都可以独立地显示一个HTML文件,形成多个窗体,格式如下:
        ...
        多个窗口可以纵向排列,也可以横向排列,也可以混合排列,下面举例说明2行两列的窗口:
       
           
                多窗口页面
           
                    //第一行窗口占比40%,第二行窗口占比60%
                     //第一行窗口分两列,左边占比40%,右边占比60%
               
                ">
                >

                >
                ">
                ">
                >
           
       

四、多媒体页面
1、图像标记
        格式:
        属性:
                src:图像的URL
                alt:在浏览器尚未完全读入图像时,在图像位置显示的文字
                width:图像的宽度
                height:图像的高度
                align:图像和文字的对齐方式,有left、middle、right、top和botton
                border:图像边框厚度
                hspace:水平空距
                vspace:垂直空距
        比如:插入一个左对齐的xxx.gif,点击该图像跳转到yyy.html,如下即可:
       

2、背景音乐
        格式:
        属性:
                src:WAV文件的URL
                loop:循环数
        举例如下:
               
        将loop属性设为-1,意味着声音循环播放。
3、插入视频
        格式:
        用url.avi这个文件来播放视频,用url.gif这个图像来作为视频的封面,即在浏览器尚未完全读入AVI文件时,现在AVI播放区域显示该图像。

五、表格与表单
1、列表
        在HTML中列表分为三种:无序列表、有序列表和定义列表。
        无序列表用
    来定义,格式如下:
           

             

    •        

    •        

    •        

            ul标记符带有type属性,列表项li也可以带type属性,type属性可以是circle(中空圆形)、disk(宽心圆形)、square(正方形)。
            有序列表用
      来定义,格式与无序列表一样,但ol带有type和start两种属性,type属性可以是A(大写字母编号)、a(小写字母编号)、l(阿拉伯数字编号)、I(大写罗马字母编号)、i(小写罗马字母编号),start属性与
        标记连用,指定列表中第一项的起始数字,默认的起始数字为”1“。
                定义列表标记符为
        ,用
        引出标题,以
        说明标题所定义的内容。
        2、表格
                HTML表格的基本格式为:
               
               
               
               
               
        表格标题
        表头1... 表头n
               
        表项1... 表项n
                ...
               

                和
        定义表格,表格中的所有内容都在这两个标签之间,在标签内可以带有frame(控制边框属性)、rules(控制单元格间分隔线)、border(设置边框宽度,单位为像素),之间定义表格的标题,定义表格的行,在表格的每一行中,
        定义表格的单元格,一般情况下,定义表格的表头项,定义表格的内容。
        3、表单
                表单标记符Form的基本格式为:
               

                ...
               

                在form标记符中,method表示输入数据时送到服务器的方式(get表示将数据加在action设定的uri地址后面传送到服务器,get表示通过HTTP post传输数据方式将输入数据传送到服务器),action指定了服务器所执行的程序。
                (1)输入型表单
                输入型表单标记符是一个独立标记,常用属性如下:
                name:用于指定表单控件名称
                value:用于指定控件的初始值
                size:用于指定控件的初始宽度,属性值通常是像素,当type属性为text或password时,则为字符数
                maxlength:用于指定用户可以输入文本的最大个数,当此长度超过size时,浏览器会允许数据的滚动
                checked:布尔属性,用于指定该框是否选中
                src=uri:在type="image"时,用于指定用于修饰图形化提交按钮的图片的位置
                type:属性的取值及意义为button(按钮)、checkbox(复选框)、textarea(多文本行输入区)、text(输入文本)、password(输入密码用)、hidden(隐藏按钮)、submit(提交服务器)、image(图像传送服务器)、reset(清除重新输入)、radio(单选按钮)
                (2)创建按钮
               
                其中,name属性指定控件名称,value属性指定控件的初始值,type属性指定创建按钮的类型(为submit时,表示创建一个提交按钮;为button时,表示创建一个普通按钮;为reset时,表示创建一个重置按钮)。
                (3)创建选项菜单
                在
        标记间插入
                   

               
               
                在浏览器中运行该文件的效果如下图所示:
                


        阅读(3229) | 评论(1) | 转发(7) |
        给主人留下些什么吧!~~

        scq2099yt2014-03-31 21:01:53

        文明上网,理性发言...