1. 云栖社区>
  2. PHP教程>
  3. 正文

边记边学PHP-(六)常用的HTML基础

作者:用户 来源:互联网 时间:2017-12-01 19:06:27

网页用户

边记边学PHP-(六)常用的HTML基础 - 摘要: 本文讲的是边记边学PHP-(六)常用的HTML基础, PHP只是一种语言,却不能用于设计页面,也就是说他不能去设计页面的布局。是一种后台语言。页面需要HTML、DIV、CSS等语言进行设计。网页不仅需要有自己的功能,美好的外观也是非常重要的,只有界面美与用户的交互好用户才回去用。至少我是这么

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

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

1、HTML的整体结构

<!doctypehtml>

<html>

<head>

         <title>网页标题</title>

</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字符标记

标记       

标记名称

标记功能

br

换行标记            

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

hr

标尺标记

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

center         

居中对齐标记

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

pre

预定义标记

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

font

字体标记

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

b

字体加粗标记

把字加粗显示

i

斜体标记

把字倾斜显示

u

底线标记

给字加上下划线

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

b超级链接标记

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

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

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

c列表标记

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

标记

描述

举例

显示

<ul>

无序显示

<ul>

<li>PHP</li>

<li>Java</li>

<li>C#</li>

</ul>

PHP

Java

C#

<ol>

有序显示

<ol>     

<li>PHP</li>

<li>Java</li>

<li>C#</li>

</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.图片显示

<img src=”图片的路径”></img>

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

 

在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属性来获取值。

id

定义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>

         <option>选项一</option>

<option>选项二</option>

<option>选项三</option>

……

</select>

用于定义一个下拉列表。

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

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

(4)表格

标记名

说明

<table>

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

<tr>

表示一行

<td>

表示一列

<caption>

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

<th>

表格的列标题

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

属性

说明

border

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

bgcolor

表格背景色

align

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

cellpadding

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

cellspacing

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

width

设置表格宽度

height

表格高度

colspan

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

rowspan

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

 

 

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

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索网页 用户 ,以便于您获取更多的相关知识。