西安做网站PHP入门教材学习方法

  • 孙鑫
  • 2016-09-15
  • 248

学习方法

1.上课认真听讲、勤记笔记;

2.多看相关参考书;

3.勤上机练习,这一点要着重指出,有些同学光听不练,其实编程是熟能生巧的,光上课能听懂能理解是不够的,必须要课后进行大量的练习才可以真正学以致用;西安做网站

4.多看教学视频;

我们的课程将按照html基础、CSS样式表、Javascript、PHP环境配置(包括简单的apache配置)、PHP基础知识、MySQL的基本运用,这样的几大块内容逐步的将学员么带入PHP的世界。


那我们就先从最基础的html部分开始吧

HTML基础

一、基本标志

1.<html>...</html>

<html>标志用于Html文档的最前边,用来标识Html文档的开始。而</html>标志恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束,两个标志必须一块使用。

2.<head>...</head>

<head>和</head>构成Html文档的开头部分,在此标志对之间可以使用<title></title>、<script></script>等等标志对,这些标志对都是描述Html文档相关信息的标志对,<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。

3.<body></body>

<body>...</body>是Html文档的主体部分,在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性:

属性 用途 示例

<body bgcolor="#rrggbb"> 设置背景颜色。 <body bgcolor="red">红色背景

<body text="#rrggbb"> 设置文本颜色。 <body text="#0000ff">蓝色文本

<body link="#rrggbb"> 设置链接颜色。 <body link="blue">链接为蓝色

<body vlink="#rrggbb"> 设置已使用的链接的颜色。 <body vlink="#ff0000">

<body alink="#rrggbb"> 设置正在被击中的链接的颜色。 <body alink="yellow">

说明:以上各个属性可以结合使用,如<body bgcolor="red" text="#0000ff">。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色,如#ff0000对应的是红色。此外,还可以使用Html语言所给定的常量名来表示颜色:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal,如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。

4.<title>...</title>

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,那些信息一般是网页的“主题”,要将学员的网页的主题显示到浏览器的顶部其实很简单,只要在<title></title>标志对之间加入学员要显示的文本即可。注意:<title></title>标志对只能放在<head></head>标志对之间。

下面是一个综合的例子,仔细阅读,学员便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置及其作用。

范例1-1:Html文档中基本标志的使用

<html>

<head>

<title>显示在浏览器最上边蓝色条中的文本</title>

</head>

<body bgcolor="red" text="blue">

<p>红色背景、蓝色文本</p>

</body>

</html>

显示效果如下图:


二、格式标志

上一个节中我们讲了Html文档的基本标志,但我们还不知道怎样在浏览器中显示文本之类的东西,这正是我们在节二中将要谈到的。在学习之前,必须强调一下,我们这个节中所讲的格式标志统统都是用于<body></body>标志对之间的。

1.<p>...</p>

<p></p>标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外,<p>标志还可以使用align属性,它用来说明对齐方式,语法是:<p align=""></p>。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如<p align="Center"></p>表示标志对中的文本使用居中的对齐方式。

2.<br>

<br>是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行。在<br>的使用上还有一定的技巧,如果学员把<br>加在<p></p>标志对的外边,将创建一个大的回车换行,即<br>前边和后边的文本的行与行之间的距离比较大,若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小,学员不妨试试看。

3.<blockquote>...</blockquote>

在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。

4.<dl>...</dl>, <dt>...</dt>, <dd>...</dd>

<dl>...</dl>用来创建一个普通的列表,<dt>...</dt>用来创建列表中的上层项目,<dd></dd>用来创建列表中最下层项目,<dt>...</dt>和<dd>...</dd>都必须放在<dl>...</dl>标志对之间。看一下下面的例子学员就会明白了:

范例1-2:创建一个普通列表

<html>

<head>

<title>一个普通列表</title>

</head>

<body text="blue">

<dl>

  <dt>中国城市</dt>

    <dd>北京 </dd>

    <dd>上海 </dd>

    <dd>广州 </dd>

  <dt>美国城市</dt>

    <dd>华盛顿 </dd>

    <dd>芝加哥 </dd>

    <dd>纽约 </dd>

</dl>

</body>

</html>

效果如图:    

5.<ol>...</ol>, <ul>...</ul>, <li>...</li>

<ol>...</ol>标志对用来创建一个标有数字的列表;<ul>...</ul>标志对用来创建一个标有圆点的列表;<li>...</li>标志对只能在<ol>...</ol>或<ul>...</ul>标志对之间使用,此标志对用来创建一个列表项,若<li>...</li>放在<ol>...</ol>之间则每个列表项加上一个数字,若在<ul>...</ul>之间则每个列表项加上一个圆点。请看下边的例子:

范例1-3:标有数字或圆点的列表

<html>

<head>

<title></title>

</head>

<body text="blue">

<ol>

<p>中国城市 </p>

<li>北京 </li>

<li>上海 </li>

<li>广州 </li>

</ol>

<ul>

<p>美国城市 </p>

<li>华盛顿 </li>

<li>芝加哥 </li>

<li>纽约 </li>

</ul>

</body>

</html> 

范例1-3效果如图:


6.<div>...</div> 

<div>...</div>标志对用来排版大块Html段落,也用于格式化表,此标志对的用法与<p>...</p>标志对非常相似,同样有align对齐方式属性。<div>最重要的应用是在后面讲到CSS样式表时,与CSS进行搭配,用DIV+CSS来布局网页,这些内容将在CSS部分详细介绍。

三、文本标志

上一个节中我们已经讲了如何在浏览器中输出文本,以及文本输出的格式,这个节中我们将谈一谈文本输出的字体,如斜体、黑体字、下加一划线等等。在本节的最后给出了一个html代码中文本标志的综合示例,希望学员能认真阅读。

1.<h1></h1>……<h6></h6>

Html语言提供了一系列对文本中的标题进行操作的标志对:<h1></h1>……<h6></h6>,即一共有六对标题的标志对。<h1></h1>是最大的标题,而<h6></h6>则是最小的标题,也即是标志中 h 后面的数字越大标题文本就越小。如果学员的Html文档中需要输出标题文本的话,便可以根据实际需要选用这六对标志中的一对。

2.<b>...</b>, <i>...</i>, <u>...</u>

经常使用 WORD 的人对这三对标志对一定很快就能掌握。<b></b>用来使文本以黑体字的形式输出;<i></i>用来使文本以斜体字的形式输出;<u></u>用来使文本以下加一划线的形式输出。后边将会有一个综合的例子,所以此处就不再作详细讲解了。

3.<tt>...</tt>, <cite>...</cite>, <em>...</em>, <strong>...</strong>

这些标志对的用法和上边的一样,差别只是在于输出的文本字体不太一样而已。<tt>...</tt>用来输出打字机风格字体的文本;<cite>...</cite>用来输出引用方式的字体,通常是斜体;<em>...</em>用来输出需要强调的文本(通常是斜体加黑体);<strong>...</strong>则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。

4.<font>...</font>

<font>...</font>是一对很有用的标志对,它可以对输出文本的字体大小、颜色进行随意地改变,这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。size属性用来改变字体的大小,它可以取值:-1、1和+1;而color属性则用来改变文本的颜色,颜色的取值是我们在节一中讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。具体用法请看下边综合的例子。




范例1-4:文本标志的综合示例

<html>

<head>

<title>文本标志的综合示例</title>

</head>

<body text="blue">

<h1>最大的标题</h1>

<h3>使用h3的标题</h3>

<h6>最小的标题</h6>

<p><b>黑体字文本</b> </p>

<p><i>斜体字文本</i> </p>

<p><u>下加一划线文本</u> </p>

<p><tt>打字机风格的文本</tt></p>

<p><cite>引用方式的文本</cite></p>

<p><em>强调的文本</em></p>

<p><strong>加重的文本</strong></p>

<p><font size="+1" color="red">size取值“+1”、color取值“red”时的文本</font></p>西安做网站

</body>

</html>

范例1-4效果如图:

四、图像标志

再简单朴素的网页如果只有文字而没有图像的话将失去许多活力,图像在网页制作中是非常重要的一个方面,Html语言也专门提供了<img>标志来处理图像的输出。

1.<img>

<img>标志并不是真正地把图像给加入到Html文档中,而是将标志对的src属性赋值,这个值是图形文件的文件名,当然包括路径,这个路径可以是相对路径,也可以是绝对路径。实际上就是通过路径将图形文件嵌入到学员的文档中。必须强调一下,src属性在<img>标志中是必须赋值的,是标志中不可缺少的一部分。除此之外,<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式,在前边的节中已经讲了很多了,这里就不再提了。border属性是图像的边框,可以取大于或者等于0的整数,默认单位是像素。width和Height属性是图像的宽和高,默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。

下面我们来介绍一下相对路径和绝对路径。


西安做网站PHP入门教材学习方法——西安做网站-www.zcidcs.com