边记边学PHP-（六）常用的HTML基础

来源：互联网发布：自学高中数学的软件编辑：程序博客网时间：2024/04/29 00:56

PHP只是一种语言，却不能用于设计页面，也就是说他不能去设计页面的布局。是一种后台语言。页面需要HTML、DIV、CSS等语言进行设计。网页不仅需要有自己的功能，美好的外观也是非常重要的，只有界面美与用户的交互好用户才回去用。至少我是这么认为的。

那么这篇我就把我最近在PHP里面经常用到的HTML知识分享一下。那我先来说一下HTML的大体框架。之后我给出一些表格，我通过书上总结的。

1、HTML的整体结构

<!doctypehtml>

<html>

<head>

</head>

<body>

网页内容

</body>

</html>

<!doctypehtml>这是一句声明，不属于HTML语句，也不是他的标签。这句话必须在文档中的第一行，它的意思就是告诉浏览器该文档使用HTML规范。一般就是通用标准。但是我一般不写这个，他也不会报错，我想可能默认就是通用标准吧。

<html></html>这是告诉浏览器我这里面的代码是HTML语言编写，里面所用到的标记什么的都要用HTML语言解读。

<head></head>通过英文单词的意思也大概明白是什么意思了。就是HTML文件的头部标记。这里面的内容不会显示在网页中，这里面可以引用css文件，javascript文件。以后会用到。

<title></title>这里面的内容显示在标题栏里，比如你打开百度，标题栏里会显示“百度一下，你就知道”，这八个字就是在<title>里面写的。

<body></body>这里面就是HTML文件的主题内容了，这些内容将显示在网页上，包括文字图片动画超链接及其他的一些东西。

当然这些东西一些可以不用有的，关键看你需要什么了。也许这不是一个好的习惯，但是有时候我创建PHP文件，他不写我就懒得再去给他添加上了。

2、HTML的元素（突然感觉有好多啊，我只列一下我经常用到的，如果再有新的我会补充）

（1）基本标记

a字符标记

标记

标记名称

标记功能

换行标记

另起一行显示，已经见过了

标尺标记

添加一个水平标尺，比如在题目跟正文之间画一条线就用这个

center

居中对齐标记

被这个标记包起来的部分会在网页的中间显示，这个我是今天才用到了一次，后来又去掉了，感觉不爽

pre

预定义标记

这个标记里面的内容会以原来的格式来显示，就是你写的是什么格式它就显示什么格式

font

字体标记

通过这个标记你可以去修饰字体的大小颜色字体等。我看书上说HTML5已经抛弃这个标记了，但是在相当长的时间可以用。不过我用的确实很少，一般设置字体都在css文件里设置。

字体加粗标记

把字加粗显示

斜体标记

把字倾斜显示

底线标记

给字加上下划线

我在想要不要举例子呢。如果举例子这篇文章就会很长了，先写完再说吧。

b超级链接标记

<a href=”你的目标地址”>你自定义的名称</a>

比如：<a href=www.baidu.com>点击查询</a>

这样在网页上会显示“点击查询”四个字，这四个字会连接到百度，一点击就跳转到百度了。

c列表标记

这里先知道在列表里有一个标签<li></li>这个是列表里面的选项。

标记

描述

举例

显示

<ul>

无序显示

<ul>

</ul>

PHP

Java

<ol>

有序显示

<ol>

</ol>

1.PHP

2.Java

3.C#

在无序显示中你也可以定义它前面的字符是什么，比如我这样写<li type=a>PHP</li>那就会这么显示a.PHP。在有序显示中你可以定义它从几开始显示，比如我这样写<ol start=3></ol>那它里面的元素前面的编号就不是从1开始了，而是从3开始。只是编号，内容是不变的。

（2）段落标记及图片显示

a.段落标记<p></p>取自段落英文的首字母。在这里面的内容将会显示为一个自然段。这个也可以在PHP语言里强制另起一段，比如echo “<p>”;

b.图片显示

这个地方就会显示你定义的图片。

在HTML里还有这样的标题显示<h1></h1><h2></h2><h3></h3><h4></h4>里面的数字设置了字体的大小，不是特殊含义，我记得貌似是到h6.从1到6越来越小。

（3）表单（这个很重要的，经常用到）

首先定义一个表单是用<form></form>来定义的。

<form>有下面几个常用到的属性，

name:表单的名字，当然可以不写。这个name一般是在javascript文件对这个表单里某个表单控件操作的时候用到。

action：表示处理程序。也就是说当你把这个表单提交了它需要一个页面去处理，而你应该吧这个页面写在action里面。

method：定义表单的传送信息的方式，可取值为get或者post。这个属性很重要，但是可以省略，默认为get传递。他们两个的区别是get方式以字符串传递数据，一般限制在1KB以下，安全性较低；post方式以数据块传递信息，数据量较大，安全性较高。我一般用post。

target：这个属性指定新打开的页面的位置，比如重新打开一个浏览器标签页还是在原来的标签页显示。它可以取值为_blank（空白窗口）、 _parent（父级窗口）、 _self（当前窗口）、_top（顶层窗口）。

enctype:这个属性定义表单的编码方式，这个几乎用不到吧。只要整个页面按照utf8编码应该不会出现乱码。

格式为：

<form action= “你的网址或者处理这个表单的页面” name = “form1” method = “post” target = “_blank” >表单里面的内容或者控件</form>

常用到的表单控件：

①输入控件<input></input>

Input一看这个单词就知道这里面是用于输入数据的，但是能输入数据的地方有很多种样式，比如简单的输入框，密码框等等。那么这些都可以在它的type（类型）属性中设置。它的属性有如下几种：

type

指定表单元素类型，常用的选项有：text（简单的文本框）、password（密码框，输入的字符会被隐藏）、checkbox（复选框，比如网页登陆是是否记住密码就是用复选框）、radio（单选框，注意当你用单选框时注意name属性设置为相同。比如注册界面选择性别时）、submit（提交按钮，但不是button，使用它把整个表单提交）、reset（重置表单，与submit相对应）、file（文件类型）、image（输入图片，一点这个输入框就会弹出窗口让你选择图片，它里面显示的图片的绝对路径）、hidden（隐藏域，这个不会再页面上显示，但的确存在，一般用于记录某种情况的状态）、button（按钮，这个我有点不大理解，这个只能响应javascript文件里的函数，以后就会用到）。type默认为text

name

定义input的名称。可以通过name属性来区分一个界面的多个相同类型的标签。并且在处理界面是通过name属性来获取值。

定义input的id。在javascript问及爱你通常使用id来获取控件

value

定义控件上显示的文字，如果为输入框，则会在输入框里显示

size

定义input控件在界面中显示的长度，一般用在text/password里。注意是显示长度不是输入长度

maxlength

这个定义输入长度，最大输入的字符数。默认为无限。我还没用过这个呢。

checked

这个的返回值是一个boolean类型，也就是有两种状态，选中与未选中。一般用在单选框或者复选框。

src

src=”url”。当使用image控件时这个定义显示图片的路径。注意不是type=image。而是一个image控件。

readonly

这个是我最近采用到的一个属性，指定输入框是否可以输入，TRUE为可以false为只读，也就是让程序给你填写。比如你选择好你的生日的时候，星座自动填写，你是不能改的。

当然input里面的属性应该还会比上面多，这几个是我经常用到的。

②多行文本标记和下拉列表

<textarea></textarea>表示多行文本框。它里面有name,cols,rows属性。

name:表示多行文本框的名称。

cols：表示多行文本框的列数

rows：表示行数。行数和列数都是以字符数为单位来计算的。

……

</select>

用于定义一个下拉列表。

<select>里面的属性有name定义下拉列表框的名字。multiple这个属性不用赋值表示是否可以多选。当定义这个属性后列表框的内容将全部显示在页面上，而不是下拉列表了。size表示列表的宽度。

<option>里面的属性主要用到的有selected表示默认选中的值，但是不要都写，只要一个就行了。value表示要传到服务器上的值，服务器通过value属性获取选中的值。

（4）表格

标记名

说明

<table>

表格标记，成对出现，标记内必须有tr行和td列标记组成

<tr>

表示一行

<td>

表示一列

表格的标题，默认为黑体居中效果

<th>

表格的列标题

表格元素的一些常用属性：

属性

说明

border

边框的宽度，大于1才生效

bgcolor

表格背景色

align

设置对齐方式，默认为左对齐

cellpadding

设置单元格边框和内部内容之间的建个大小

cellspacing

设置单元格之间的间隔大小

width

设置表格宽度

height

表格高度

colspan

用于td，表示这一列占几列

rowspan

用于td，表示这一列占几行

终于说完了，这样干说太没意思了，下一篇用这些做一个用户注册界面。

0 0