Chinaunix首页 | 论坛 | 博客

尘世中一个迷途小书童riverhwp.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

Larpenteur

  • 博客访问： 6320753
  • 博文数量： 2759
  • 博客积分： 1021
  • 博客等级： 中士
  • 技术积分： 4091
  • 用 户 组： 普通用户
  • 注册时间： 2012-03-11 14:14
文章分类

全部博文（2759）

文章存档

2019年（1）

2017年（84）

2016年（196）

2015年（204）

2014年（636）

2013年（1176）

2012年（463）

我的朋友
最近访客
推荐博文
HTML之快速入门

分类： Html/Css

2014-04-05 02:39:04

原文地址：HTML之快速入门 作者：scq2099yt

一、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）创建选项菜单
                在
        标记间插入
                   

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


        阅读(496) | 评论(0) | 转发(0) |
        0

        上一篇：漫谈析构函数（一）——从一个面试题开始

        下一篇：四种基本的排序算法练习

        给主人留下些什么吧！~~
        关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

        Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

        感谢所有关心和支持过ChinaUnix的朋友们

        16024965号-6