[转] HTML之快速入门

hejiajunsh

浏览: 408971 次
性别:
来自: 天津

最近访客更多访客>>

mikesun

Charles2628

鱼乐

D13

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaSE

html

一、HTML语言入门

HTML（Hypertext Markup Language，超文本标记语言）是一种用来制作Web上超文本文档的简单标记语言。它是在原来文本文件的基础上，加上一系列标记描述其格式、颜色，再加上声音、动画、甚至视频等，形成精彩的画面。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。

1、一个简单的例子

用任意编辑器中输入如下代码：

<html>

<head>

<title> 第一个网页 </title>

</head>

<body>

这是我的第一个HTML文件！

</body>

</html>

以first.html或first.htm文件名保存，用浏览器打开这个文件即可看到效果。

2、HTML基本格式

一般HTML文件的开头和结尾分别由<html>和</html>标识标出，当浏览器遇到<html>标记时即会按照HTML标准解释后面的文本，直到遇到结束标记</html>。

<head>和</head>之间的部分成为头标部分，包含当前网页的一些信息和数据，可看成是整个网页的序言。

<title>和</title>标记用来给网页命名，它应该能够反应网页的内容，显示时在浏览器的标题栏上。

<body>和</body>之间是网页的主体内容。

二、超链接

网页上的超链接一般有两种，即同一网页中的链接和不同网页之间的链接。

1、URL

URL（Uniform Resource Locator，统一资源定位符），即我们常说的网址。

2、超链接的基本格式

超链接的基本格式如下：

<a href="链接的地址或文件"> 高亮显示的文本 </a>

以<a>为超链接的开始，href指出所要链接的信息，常用HTTP/FTP等链接方式。

在网页中，一般文字上的超链接是蓝色，文字下面有一条下划线，当鼠标指针移动到该链接上时，就会变成一只手的样子，单击一下就可以跳到此超链接所指的网页上去。

3、同一网页中链接

首先，设置超链接，其简单的结构形式如下：

<a href="#锚名"> 高亮显示的文本 </a>

其中，锚名是指网页中能被链接到的一个特定位置。

然后，通过标记<a name>指定具体锚名，即：

点击前面的“高亮显示文本”，就能跳转到下面<a name="锚名">处。

4、不同网页之间的链接

这个就比较常见，格式和使用方法如前面2所述。

三、网页的修饰

在HTML页面中，可以采用各种标记来对页面进行修饰。

1、字体标记

对于字体无外乎形状、大小、颜色等，HTML对此有相应的标记来描述。

对于形状常用标记有粗体（<b></b>）、斜体（<i></i>）、下划线（<u></u>）等。

对于字符大小有如下三种方式来描述：

（1）大小等级，分6级，即h1、h2、h3、h4、h5、h6，其中，h1最大，h6最小，一般前3种比正文字体大，后3种比正文字体小。

（2）绝对大小，在HTML中，用<font></font>标记带size属性来描述，如size = 5表示五号字体。

（3）相对大小，用size = "+3"表示比当前字体大三号，size = "-2"表示比当前字体小二号。

对于颜色可用font带color属性来描述font后面的字符颜色，比如：

<font color = "Yellow" size = 5>表示即将显示的字符为黄色五号字

<font color ="808080" size = "+3">表示即将显示的字符为灰色比当前字体大三号

从上面例子可以看出，颜色即可用英文单词表示，又可以用十六进制数来表示。

2、页面标记

（1）加入注释

格式：

（2）段标记

格式：<p> ... </p>

（3）换行标记

格式：<br>

（4）预格式化文本标记

格式：<pre> ... </pre>

（5）水平线

格式：<hr>

（6）文字对齐

格式：<center> ... </center>、<left> ... </left>、<right> ... </right>

（7）背景色彩或背景图案

格式：<body background="image-URL" bgcolor=# text=# link=# alink=# vlink=#>

其中，background（背景图案和图像文件名及其定位路径）、bgcolor（背景色彩）、text（非可链接文字的色彩）、link（可链接文字的色彩）、alink（正被单击的可链接文字的色彩）、vlink（已经单击过的可链接文字的色彩）、#（rrggbb，色彩值用十六进制的红-绿-蓝RGB来表示）。

（8）多窗口页面标记

一幅Web页面可以分为几个部分，每个部分都可以独立地显示一个HTML文件，形成多个窗体，格式如下：

多个窗口可以纵向排列，也可以横向排列，也可以混合排列，下面举例说明2行两列的窗口：

<html>

<head>

<title> 多窗口页面 </title>

</head>

<frameset rows=40% ,60%> //第一行窗口占比40%，第二行窗口占比60%

<frameset cols=40% ,60%> //第一行窗口分两列，左边占比40%，右边占比60%

</frameset>

</frameset>

</html>

四、多媒体页面

1、图像标记

格式：<img>

属性：

src：图像的URL

alt：在浏览器尚未完全读入图像时，在图像位置显示的文字

width：图像的宽度

height：图像的高度

align：图像和文字的对齐方式，有left、middle、right、top和botton

border：图像边框厚度

hspace：水平空距

vspace：垂直空距

比如：插入一个左对齐的xxx.gif，点击该图像跳转到yyy.html，如下即可：

2、背景音乐

格式：<bgsound>

属性：

src：WAV文件的URL

loop：循环数

举例如下：

将loop属性设为-1，意味着声音循环播放。

3、插入视频

格式：<img src="url.gif" dysnc="url.avi">

用url.avi这个文件来播放视频，用url.gif这个图像来作为视频的封面，即在浏览器尚未完全读入AVI文件时，现在AVI播放区域显示该图像。

五、表格与表单

1、列表

在HTML中列表分为三种：无序列表、有序列表和定义列表。

无序列表用<ul>来定义，格式如下：

<ul>

<li>

</ul>

ul标记符带有type属性，列表项li也可以带type属性，type属性可以是circle（中空圆形）、disk（宽心圆形）、square（正方形）。

有序列表用<ol>来定义，格式与无序列表一样，但ol带有type和start两种属性，type属性可以是A（大写字母编号）、a（小写字母编号）、l（阿拉伯数字编号）、I（大写罗马字母编号）、i（小写罗马字母编号），start属性与<ol>标记连用，指定列表中第一项的起始数字，默认的起始数字为”1“。

定义列表标记符为<dl>，用<dt>引出标题，以<dd>说明标题所定义的内容。

2、表格

HTML表格的基本格式为：

<table>

<tr>

<th> 表头1... <th> 表头n

<tr>

<td> 表项1... <td> 表项n

...

</table>

<table>和</table>定义表格，表格中的所有内容都在这两个标签之间，在<table>标签内可以带有frame（控制边框属性）、rules（控制单元格间分隔线）、border（设置边框宽度，单位为像素），<caption>和</caption>之间定义表格的标题，<tr>定义表格的行，在表格的每一行中，<th>和<td>定义表格的单元格，一般情况下，<th>定义表格的表头项，<td>定义表格的内容。

3、表单

表单标记符Form的基本格式为：

...

</form>

在form标记符中，method表示输入数据时送到服务器的方式（get表示将数据加在action设定的uri地址后面传送到服务器，get表示通过HTTP post传输数据方式将输入数据传送到服务器），action指定了服务器所执行的程序。

（1）输入型表单

输入型表单标记符<input>是一个独立标记，常用属性如下：

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）创建按钮

<button>标记符可以创建三种按钮：提交按钮、重置按钮和普通按钮，语法如下：

...

</button>

其中，name属性指定控件名称，value属性指定控件的初始值，type属性指定创建按钮的类型（为submit时，表示创建一个提交按钮；为button时，表示创建一个普通按钮；为reset时，表示创建一个重置按钮）。

（3）创建选项菜单

在<form>标记间插入<select>标记，并将每一个独立的选项用<option>标记标出来，我们就可以得到选项菜单，其语法如下：

...

</select>

select标记符的常用属性有以下几种：

name：用于指定控件名

size：用于指定选项菜单中一次显示多少行

multiple：有此属性时，用户可以选择多个选项，否则，只允许一个选项。

option标记符的常用属性有以下几种：

selected：用于说明当前选项为预先选中的

value：用于指定控件的初始值

lable=text：为选项指定一个标签

下面举例说明表单设计，具体代码如下：

<html>

<head>

<title> html表单演示程序 </title>

</head>

<body>

请输入您的地址

文化程度

<option>博士

<option>硕士

<option>大学

<option>大专

<option>中专

<option>其他

</select>

<br>

您想要的书籍

语文<input type="checkbox" name="book" value="yea" checked>

数学<input type="checkbox" name="book" value="yea">

英语<input type="checkbox" name="book" value="yea">

物理<input type="checkbox" name="book" value="yea">

化学<input type="checkbox" name="book" value="yea">

政治<input type="checkbox" name="book" value="yea">

</form>

</body>

</html>

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

分享到：

[转]Tomcat初探之快速入门 | [转]JavaScript之快速入门

2015-02-16 16:01
浏览 1055
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论