HTML之快速入门

一、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）创建选项菜单         在 标记间插入标记，并将每一个独立的选项用标记标出来，我们就可以得到选项菜单，其语法如下：                                 ...                             select标记符的常用属性有以下几种：         name：用于指定控件名         size：用于指定选项菜单中一次显示多少行         multiple：有此属性时，用户可以选择多个选项，否则，只允许一个选项。         option标记符的常用属性有以下几种：         selected：用于说明当前选项为预先选中的         value：用于指定控件的初始值         lable=text：为选项指定一个标签         下面举例说明表单设计，具体代码如下：                                                         请输入您的地址                   文化程度                     博士             硕士             大学             大专             中专             其他                         您想要的书籍         语文         数学" name="book" value="yea">         英语" name="book" value="yea">         物理" name="book" value="yea">         化学" name="book" value="yea">         政治" name="book" value="yea">                                             在浏览器中运行该文件的效果如下图所示：          阅读(4265) | 评论(1) | 转发(7) | 1 上一篇：Linux之screen命令详解 下一篇：Tomcat初探之快速入门 给主人留下些什么吧！~~ scq2099yt2014-03-31 21:01:53 文明上网，理性发言... 回复 | 举报 评论热议 请登录后评论。 登录 注册 关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册 Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有 感谢所有关心和支持过ChinaUnix的朋友们 16024965号-6