PHP之一_HTML标签简介(一)
在php这个专题分类下,我将按照课程的先后顺序,讲解php这门课程的所有内容。
文章的更新时间一般是一周一更,在学期末更新完成所有课程内容。
第一讲 HTML标签简介(一)
一、前言
PHP作为一个入门较快的建站语言,被广泛使用。
当前社会,建一个网站是每一个寻求被公众广泛认知的企业都会做的事,知名企业都得有自己的网站。
要建设一个网站,需要掌握如下技术:
1. HTML语言:HTML语言用于构建网站的骨架
2. 样式表:样式表用于美化界面
3. 脚本:脚本分前台脚本和后台脚本,它们的区别是一个运行于浏览器端,一个运行于服务器端;前者主要采用JavaScript,而后台脚本种类就很多了,例如Java、PHP都属于后台脚本;后台脚本可以访问服务器端资源,象视频、数据库、文件等都是服务器端资源,必须用后台脚本才可以访问;前台脚本只在客户端起作用
4. 数据库:数据库解决数据的存储问题,数据库可以永久存储业务数据,例如淘宝的订单数据就需要存储在数据库里。一般要求掌握两种以上常用数据库的使用,并熟悉SQL数据库语言
二、使用软件
需要安装Adobe Dreamweaver软件和WAMP Server软件。
前者是业内通用的网站制作软件,后者用于部署PHP应用。
三、HTML标签简介(一)
在介绍PHP之前,我们先花大概四节课来简要介绍HTML语言和样式表,因为先要有一个网站,才谈得上后台代码。
1. HTML文档基本结构
每一个HTML文档都是后缀名为.htm或.html的文本文件,文档基本结构如下:
<html>
<head>
<title>我的第一个网页 </title>
</head>
<body >
Hello World!
</body>
</html>
<html>标签是HTML文档的开始,</html>标签是HTML文档的结束。HTML文档中大量使用各种标签,标签都是以“<”开始,以“>”结束。
每个标签基本都有开始标签和结束标签,结束标签以“/”开始。
在<html>内部,又分成两部分:头部(head)和身体(body),象一个人一样,有头有身体。
<head>部分主要是网页的一些说明信息,例如标题、附加信息等,脚本和样式表通常也放在头部。<title>部分是网页的标题。
<body>部分就是网页的正文内容了。
将上述内容放在一个名为test.html的文本文件中,用浏览器打开就可以看到效果了。
2. META标签
META标签表示网页的元数据,常用于网页的附加信息,加在头部,比较重要的有:
(1) 字符编码
我们知道字符有中文简体、中文繁体、英文、法文、阿拉伯文等,不同字符有不同标准。在网页中通常需要声明本网页内容的字符标准,简体中文的标准是GB2312或GBK,繁体中文的标准是BIG5(大五码),在开发中通常使用的标准是UTF-8,即统一字符集,兼容各种国家的字符。
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
</head>
META标签的属性有两个,一个是http-equiv,表示定义的条目,另一个是content,表示定义的内容。
例如,定义的条目是“content-type”,表示将要定义“内容的类型”,定义的内容是“text/html; charset=gb2312”,表示内容的类型为文本类型中的html子类型(text/html),字符编码为gb2312。
浏览器通过解读META标签来识别网页的字符编码,如果未设定网页的字符编码,浏览器将使用“自动检测”,有时“自动检测”无法有效识别,会导致页面乱码。
(2) 关键字和描述
<head>
<meta name="keywords" content="淘宝,网上购物,在线交易,交易市场" />
<meta name="description" content="淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、……" />
</head>
这里,META标签定义的条目分别是“keywords”,即关键字,及“description”,即描述。
这两项是提供给搜索引擎使用的,搜索引擎收录网页时,关键字有利于搜索到你的网页,描述将显示在搜索结果上。
(3) 刷新页面
<meta http-equiv="refresh" content="3" />
这项定义将导致页面每3秒钟刷新一次。
3. 标题和段落
网页通常用于展示一篇文章,那么在文章中就有标题和正文,标题还有一级标题、二级标题等,例如以下文章结构:
《关于xxx的报告》
一、前言
[一段正文]
二、背景
1. 历史
[一段正文]
2. 现状
[一段正文]
3. 未来
[一段正文]
HTML标签中,分别使用<h1>~<h6>表示最多6级标题,使用<p>表示段落,上述文章的HTML代码:
<h1>《关于xxx的报告》</h1>
<h2>一、前言</h2>
<p>[一段正文]</p>
<h2>二、背景</h2>
<h3>1. 历史</h3>
<p>[一段正文]</p>
<h3>2. 现状</h3>
<p>[一段正文]</p>
<h3>3. 未来</h3>
<p>[一段正文]</p>
<h1>到<h6>在浏览器上呈现时,会以从大到小的字号来显示,但这不是你选择<h1>或<h6>的理由,即不要看字体多大,而是要看是几级标题。
标题或段落的内容都要放在开始标签和结束标签之间。
附带说两个:
段落内换行,使用<br />标签,这个标签开始标签和结束标签合为一体,写成“<br />”。
水平分隔线,使用<hr />标签,同上。
4. 有序列表和无序列表
这两个列表都用于显示列表项,有序列表前面会加上数字或字母,无序列表前面会加上小圆点或小方块。
<p>注册步骤:</p>
<ol>
<li>填写信息</li>
<li>收电子邮件</li>
<li>注册成功</li>
</ol>
<p>新人上路指南 </p>
<ul>
<li>如何激活会员名?</li>
<li>如何注册会员?</li>
<li>注册时密码设置有什么要求?</li>
</ul>
ol或ul都用于包装列表项,所有的列表项都放在里面。每个列表项是一个li。
列表可以嵌套,用于构成二级列表或三级列表,例如:
<p>产品类别: </p>
<ul>
<li>数码
<ul>
<li>笔记本</li>
<li>手机</li>
<li>家电</li>
</ul>
</li>
<li>美容</li>
<li>服装</li>
</ul>
这里,在数码分类下,有三个子分类,所以使用了嵌套的列表。
在网页上要做导航菜单,有二级菜单或三级菜单时,适合使用无序列表。
5. 定义描述
定义描述用于说明一个“定义”。每个定义包括“词条”和“解释”,所以定义描述的格式为:
<dl>
<dt>咖啡</dt>
<dd>一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料。</dd>
<dd>可以提神,刺激神经。</dd>
<dl>
这里描述了一个定义“咖啡”,它是词条,解释有两条。
dl用于包含定义描述,dt是词条,dd是解释。
6. 表格
表格用于显示带格式的数据,例如要显示的内容是:
百度 | 新浪 | 天涯 |
谷歌 | 搜狐 | 猫扑 |
<table>
<tr>
<td>百度</td>
<td>新浪</td>
<td>天涯</td>
</tr>
<tr>
<td>谷歌</td>
<td>搜狐</td>
<td>猫扑</td>
</tr>
</table>
在此,可以看到table用于表示表格,tr是表格的一行,td是表格的一列。如果有多加一行,就多加一段tr。很简单而有规律。
7. 图片
图片标签为:
<img src="图片地址" alt="提示文字" />
为保证能够访问到图片,通常在网页所在的文件夹下,再建一个images文件夹,把图片放进去。
例如:
<img src="images/girl.jpg" alt="美女图片" />
以上介绍了部分HTML常用标签,其它更多标签后文将继续介绍。