HTML语言基础

来源：互联网发布：修改电脑ip软件编辑：程序博客网时间：2024/06/05 20:39

HTML语言基础

一．简介：

今天我们要讲的计算机网页设计的基础知识HTML语言.

首先我当我打开一个网站时，他们都是由HTML文件生成的.

当我们打这个网页时可以通过浏览器上“查看”菜单的“查看源程序”来看到这个网页所上的“HTML”文件的内容.

现在你们可以自己操作一下

"<>"此编程必须用半角英文的符号来制作

在“<…>”这个中的内容是相一致的

一个为开始一个为结束

比如<html>开始文档

……

</html>结束文档

<html> 开始文档

<head> 头文件一般可以加一些脚本语言比如“JAVASCRIPT”

<title>……</title> "浏览器上的标题"

</head>

<body> 主题文件内容

……

</body> 结束文档体

</html> 结束文档

然后

自己新建一个记事本文件，把这些内容打

打开一个现在的程序

然后把文件名存成“*.HTML”或者.htm也可以

那么就制作出了一个基本的空白浏览器文件

现在我们说一下，基本的HTML中的一些设置。刚才你的在记事本上应该写成这个样子

<html>

<head>

<title>This is first page.</title>

</head>

<body>

Hello World!

</body>

</html>

你存了以后就会看到标题变成了“This is first page.”

而网页上就会有内容“Hello World!”这几个字

注意：

1．在编写HTML文档时，即使不按照HTML框架格式，目前我们所用的浏览器（IE）也可以很好的解析文档。例如：我们直接在文档中写上Hello World!浏览器会自动将这些做为文档体的内容，在浏览窗口中显示出来。

2． HTML中，标签和属性的大小写是无关的。

3． HTML中，给一个标签的属性赋值时，可以加双引号，也可以不加，都是合法的

4． HTML中，标签的属性是可选的，可以写，也可以不写。

存成其它的格式没有关系的

你可以打开你的计算机中一个设置设置一下，然后把文件“重命名”，就可以了

下面来说这个设置

“查看”菜单 “文件夹选项”

去掉“隐藏已知文件类型的护展名”的对勾，给去了

就可以看到你的文件的全称了

现在就可以改正文件类型了

如果设置成这个样子的好处是

你不管建立什么样子的文件，

都可以直接通过修改扩展名来直接建立所要要的程序内容

也就是说你在制作网站上现在所需的文件时，不用安装任何程序就可以制作来你想要的格式的文件

二．HTML基本元素：

现在我来开始程序方面的各种命令的设置：

注意：HTML中，如果存在连续多个空白字符（空格，制表符，回车，换行等），浏览器解析时将只显示为一个空白字符。

1．<br>

表示line break,作用：单行换行

2．<p aligh=”#”>

表示paragraph,作用：隔行换行。属性aligh表示对齐方式，#可以是left,center,right,justify等。

3．<hr color=”clr”>

表示horizontal,作用：插入一条水平线。Color指定一种颜色，clr是颜色名字。如：red,blue,green,black,yellow,white,olive,aqua等，或者以16进制数表示颜色，例如#ff0000表示红色，#00ff00表示绿色，#0000ff表示蓝色。

例如：

<html>

<body>

静夜思<br>

作者:李白

床前明月光，疑是地上霜。<br>

举头望明月，低头思故乡。

</body>

</html>

4．<center>...</center>

作用：使文本居中显示

5．<hn align=”#”>...<hn>

作用：指出文档的标题，n表示1～6的数字，1最大，6最小。align表示对齐方式。

6．<font size=n color=”clr”>...</font>

作用：用于设置字体。Size表示字体大小，可以设置1～7号，数字越大，字体越大。Color表示字体颜色。有两种方法，一种是直接写颜色的英文单词，另一种是直用000000-ffffff的颜色形式来设置的

7．<b>...</b>

作用：使文本成为粗体。

8．<i>...</i>

作用：使文本成为斜体。

9．特殊字符：

在HTML中，像不间断空格，回车等，HTML保留的字符（’<’，表示标记的开始），一些在键盘中不存在的字符，例如：版权符号©。都需要通过引用的方式才能输入。HTML中有2种引用方式：字符引用和实体引用。

字符引用：&+#+16进制数+;

实体引用：&+字符的助记符+;实体引用是区分大小写的。

字符

字符引用（十进制代码）

字符引用（16进制代码）

实体引用

描述

“

双引号

和号

小于号

大于号

不间断空格

版权符号

注册商标

注意： 占用6个字节，可以用全角输入法直接用键盘的一个空格代替，这时候的空格代表了2个 。

10．

作用：注释信息

例如：

<html>

<body>

<p>

<b><i><font color="green" size="3">床前明月光，疑是地上霜。<br>

举头望明月，低头思故乡。</font></i></b>

</center>

</body>

</html>

三．列表：

1．带有数字编号的列表：

<ol type=”#” start=”#”>

<li value=”#”>...

<li>...

</ol>

作用：建立一个带有数字编号的列表。Type表示编号的类型，Start表示起始编号数值，默认为从1开始，value改变列表内的编号顺序。

Type属性值

编号风格

使用大写字母（A,B,C等）

使用小写字母（a,b,c）

使用大写罗马数字（I,II,III等）

使用小写罗马数字（i,ii,iii等）

使用阿拉伯数字（1，2，3等），这是缺省值

例如：

<li>《JSP从入门到精通》

<li>《JSP快速入门》

<li>《VC++深入编程》

<li value=20>《VB实例教程》

<li>《C++系统编程》

</ol>

<li>《JSP从入门到精通》

<li>《JSP快速入门》

<li>《VC++深入编程》

<li value=20>《VB实例教程》

<li>《C++系统编程》

</ol>

<li>《JSP从入门到精通》

<li>《JSP快速入门》

<li>《VC++深入编程》

<li value=20>《VB实例教程》

<li>《C++系统编程》

</ol>

2．带有项目符号的列表：

<ul type="#" >

<li>...

</ul>

作用：建立一个带有项目符号的列表。

Type取值如下：

disc --显示为实心圆圈

square --显示为实心方块

circle --显示为空心圆圈

例如：

<li>《JSP从入门到精通》

<li>《JSP快速入门》

<li>《VC++深入编程》

<li value=20>《VB实例教程》

<li>《C++系统编程》

</ul>

3．无符号的列表：

<dl>

<dt>...

<dd>...

</dl>

作用：建立无符号的列表。<dt>默认的模式，<dd>缩进的方式

例如：

<dl>

<dt>《JSP从入门到精通》

<dt>《JSP快速入门》

<dt>《VC++深入编程》

<dt>《VB实例教程》

<dt>《C++系统编程》

</dl>

<dl>

<dd>《JSP从入门到精通》

<dd>《JSP快速入门》

<dd>《VC++深入编程》

<dd>《VB实例教程》

<dd>《C++系统编程》

</dl>

<dl>

<dt>HTML

<dd>超文本标记语言

<dt>HTTP

<dd>超文本传输协议

</dl>

四．表格：

1．<table border=n align=”alignment” bgcolor=”clr”>...</table>

作用：table用于定义一个表格。

border用于定义表格边框的宽度。N从0开始，0表示表格不会显示边框。如果不写border，则系统默认border=0。

Align用于定义表格对齐方式，有left,right,center等。

Bgcolor用于指定表格的背景色。取值和前面介绍过的color取值一样。

2．<caption>...</caption>

作用：用于定义表格的标题。

3．<tr align=”alignment” valign=”alignment”>...</tr>

作用：在表格种添加一个新行。

Align用于指定这一行在水平方向上的对齐方式。取值为left,right,center。

Valign用于指定这一行在垂直方向上的对齐方式。取值为top,middle,bottom。

4．<th>...</th>

作用：用于定义表头。

5．<td>...</td>

作用：用于定义单元格。

例如：

<html>

<head><title>表格的例子</title></head>

<body>

<caption>2004年度期末考试成绩单</caption>

</tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>

五．HTML交互式表单：

1．<form method=”get or post” action=”URL”>...</form>

作用：建立一个表单。

Method：用于指定向服务器发送表单数据时所使用的HTTP方法。可以是get或者post2种。Get是缺省方法，通常当数据较小，没有安全方面的考虑，就使用get方法提交表单。当用get方法提交表单时，提交的数据附加在URL的末端，作为URL的一部分发送到服务器端。例如：action=”reg.jsp”，当提交表单后在浏览器地址栏中我们可以看到下面的信息：http://localhost:8080/reg.jsp?user=zhangsan&pwd=1234

而post方法是将表单中的信息作为一个数据块发送到服务器端。无论哪种方法，数据的格式都是：name1=value1&name2=value2

Action:用于指定对表单进行处理的脚本地址。

2．<input type=”type” name=”name” size=”size” value=”value”>

作用：input用于接受用户输入的信息。Input是一个带有属性的空元素，用来创建表单中的控件。

Type:用来指定要创建的控件的类型。

Name:用来指定要创建的控件的名称。Name可以使服务器利用名称取得对应的值，name属性在表单中并不显示。

Size:用于指定表单中控件的初始宽度。

Value：用于指定控件的初始值。

Type类型

描述

Text

单行文本输入控件

Submit

提交按钮

Reset

重置按钮

Password

口令输入控件

Radio

单选按钮

checkbox

复选框

hidden

隐藏控件，在浏览器中并不显示

3．<select size=”size” name=”name”>

<option value=”value” selected>...</option>

<option value=”value”>...</option>

</select>

作用：select用于创建一个下拉列表框。

Option:列表框中的各个选项都由option提供。

Selected:表示此选项是默认的选项。

4．<textarea name=”name” rows=”number of rows” cols=”number of columns”>...</textarea>

作用：textarea:多行文本输入控件。可以容纳多行信息。如果用户要输入个人简历，那么textarea可以容纳更多信息。<textarea>...</textarea>中间的文本将作为初始文本显示。

Rows:用于指定控件可视区域显示的文本行数。

Cols:用于指定控件可视区域显示的文本宽度。

例如：

<html>

<head><title>表单的例子</title></head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="1" checked>男

<input type="radio" name="sex" value="0">女

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="interest" value="football">足球

<input type="checkbox" name="interest" value="bascketball">篮球

<input type="checkbox" name="interest" value="volleyball">排球

<input type="checkbox" name="interest" value="swim">游泳

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

六．超链接

<a href=”URL”>...</a>

作用：href用于指定链接的目标，目标地址由URL定位。在<a>和</a>之间输入的文本将作为浏览器中显示的链接文本。

例如：

<a href="form.html">表单的例子</a>

链接的是当前页面所在的目录下的form.html页面。

<a href="../form.html">表单的例子</a>

链接的是当前页面的上一层目录下查找form.html。

<a href="F:/favorite/lesson/html/form.html">表单的例子</a>

这个路径是本地路径，通常在网页的编辑上是不会使用的，因为只有自己可以使用这个链接，当将这个文件传到网络上时候，别人访问不了你的本地文件。

<html>

<head><title>链接的例子</title></head>

<body>

<a href="form.html">表单的例子</a><br>

<a href="F:/favorite/lesson/html/table.html">表格的例子</a><br>

<a href="http://www.mybole.com.cn">程序员之家</a><br>

</body>

</html>

七．嵌入图片

在web中使用最多的两种格式是GIF和JPEG。GIF只能用于256色的图像，对于不需要大量颜色的图片，如网站的LOGO，图标等，常使用GIF格式；对图片品质要求比较高的图像，如照片，风景画等，常用JPEG格式。

<img src=”URL” width=n height=n>

作用：src指定图像的位置。

Width和height指定图片的尺寸。

例如：

<html>

<head><title>链接的例子</title></head>

<body>

<a href="form.html">表单的例子</a><br>

<a href="F:/favorite/lesson/html/table.html">表格的例子</a><br>

<a href="http://www.mybole.com.cn">程序员之家</a><br>

</a>

</a>

</body>

</html>

（完）