我的php学习第四天之HTML篇

昨日回顾

编号 姓名 性别 学历 毕业院校
1 张三 大专 中国人民大学
2 李四
3

 

<table>

<tr>

<th>编号</th>

<th>标题</th>

<th>发布日期</th>

</tr>

<tr>

<td>1</td>

<td>欢迎光临北京传智播客</td>

<td>2014-10-20</td>

</tr>

</table>

 

如果使用表格来排版网页,搜索引擎搜互的几乎很低。

DIV+CSS布局或排版网页,层级一般为3层左右。

 

HTML网页是一个结构化的文档,是一按层次顺序展示的一个文档。

image001

<table>的子元素(标记)是<tbody>,而不是<tr>

<tr>是<tbody>的子元素

image003

表单

1、表单的主要功能:就是用来搜索用户信息。

2、表单的工作原理

用户填写有表单的网页,单击某个按钮进行提交;

用户填写的表单数据,将发到服务器;

服务器上有专门的程序来对用户提交的数据进行验证;

如果有错误,服务器会返回给浏览器一个错误信息;

如果没有错误,PHP程序会将用户提交的数据写入数据库,并返回一个成功的信息。

       补充:

用户输入的信息是否正确,比如:邮箱地址、电话号码、用户名是否重名等

这些信息都是由PHP后台程序来做验证。

3<form>标记:是一组标记(多个标记)

<form name=“form1” action=“login.php”>

用户名:<input  type=“text” name=“username” size=“50” />

密码:<input type=“password” name=“password” size=“50” />

<input type=“submit” name=“submit” value=“提交” />

</form>

注意:所有表单元素都必须放在<form>中,然后一起提交给服务器。

 

<form>的常用属性

Name:指表单的名称,这个名称一般给JS或PHP来用。

比如:要获取“用户名”框中输入的信息,用JS获取是:document.form1.username.value

Action:设置表单数据的处理程序文件名;比如:login.php

Method:表单数据的提交方式。有两种方式:GET和POST

默认的提交方式:就是GET方式。

GET方式:将表单中的数据(以“名称/值”)形式,追加到表单处理程序(action指定)的末尾。

缺点:提交少量信息、不太安全、只能提交简单的数据,一般可以提交100个字节内的数据

http://www.sina.com.cn/news.php?id=234

POST方式:将表单数据直接发放ACTION指定的处理程序,并没有在地址栏显示。

优点:提交海量数据、相对比较安全、提交的数据类型多样化

Enctype:是指表单数据的编码方式(加密方式)

Application/x-www-form-urlencoded  普通的加密方式(默认)

Multipart/form-data   只有上传文件时使用。

 

  • 单行文本框:用户名、地址、联系方式、邮编等

<input  type=“text” name=“名称” value=“默认值” size=“多少个字符宽” maxlength=“最多可放多少个字符” />

 

注意:如果要把表单元素排齐,请使用表格来排,排的顺序是<form>标记中嵌<table>,<td>中放每一个表单元素。

2、单行密码框:密码框中的内容是以“*”号显示,是为了保证数据的安全

<input  type=“password” name=“名称” size=“字符宽” maxlength=“最大字符数” />

3、按钮

提交铵钮:<input  type=“submit” name=“submit” value=“提交按钮” />

重置按钮(清空):<input type=“reset” name=“reset” value=“重新填写” />

图片按钮:<input type=“image” src=“图片URL” value=“值” />

注意:图片按钮默认是提交表单

普通按钮:<input type=“button” name=“名称” value=“按钮文本” />

<input type="button" value="普通按钮" onclick="javascript:this.form.reset()" />

注意:普通按钮没有任何功能,一般要结合JS来实现提交或重置。

提示:如果哪一个表单项,不想让它提交到服务器,请不要给它添加name属性即可。

 

4、单选按钮:一组相互排斥的按钮,也就是每一次只能选择一个。

<input  type=“radio”name=“名称” value=“值”checked=“checked  />男

注意:一组单选按钮的name值是一样的,最后只能提交选中的哪一个。

5、复选框:一组复选框的名称也是一样的,在后台获取值时,将使用“数组”的形式来获取。

<input type=“checkbox”name=“名称”value=“值”checked=“checked” />游戏

注意:复选框可以同时选择多个,也可以一个都不选。

提示:数组是一个名字里,可以存放多个不同的值(了解)

JS数组:Var  hobby = [“游戏”,“美术”,“电脑”]

 

6、下拉列表

<select name=“edu”>

<option value=“” selected=“selected”>请选择……</option>

<option value=“高中”>高中</option>

<option value=“大专”>大专 </option>

</select>

 

7、文本区域

<textarea  name=“名称”rows=“几行高”cols=“多少个字符宽”></textarea>

提示:如果要在<textarea>中插入图片,实现图文混排,这个标记做不到。一般网站的效果都是通过“在线HTML代码编回器”实现的。比如:FCKEdit(就业班讲)

8、上传文件

<input  type=“file”name=“uploadFile” />

注意:value属性是只读属性,是为了保证网站的安全。

GET方式上传不了文件,

只有POST能上传文件,并且编码类型设置为:mulitpar/form-data

 

 

框架

1、框架的概念:将一个浏览器窗口划分若干个区域,每个区域都是一个独立的小窗口,小窗口中存放一个网页文件。

 

框架相当于一个窗户。一个窗户由窗格和玻璃构成。一个框架是由框架集(Frameset)和框架页(Frame)构成。

<frameset>中定义框架的结构(上下型、左右型)、大小、位置等。

<frame>中定义小窗口是否显示滚动条小窗口是否可以改大小、默认显示的网页

在框架定义页面中,不能出现<body>及<body>的子标记,换句话说,<frameset>和<body>只能选择其中一个。

2、框架的代码结构

<frameset>

<frame />

<frame />

</frameset>

3、<frameset>的常用属性

Rows:指定框架为上下型,例如:rows=“180,*”,上窗口的高为180px,剩下都给下窗口。

Rows=“180,20,*”,顶窗口高为180px,中窗口高为20px,剩下高都给下窗口。

Rows=“20%,50%,*”

Cols:划分框架为左右型,例如:cols=“200,*”,左窗口宽为200px,剩下都给右窗口。

Cols=“200,10,*”

Frameborder:是否显示框架边线,取值:1或0,yes或no

Border:指定边框的粗细

Bordercolor:边框的颜色

Framespacing:指框架边框间的距离

 

4、<frame>的常用属性:主要定义:是否可以调整大小、是否显示滚动条、默认页设置

Src:设置小窗口中显示的默认网页;

Noresize:是否可以调整窗口的大小,取值:noresize

Scrolling:是否显示滚动条,取值:yes、no、auto(自动)

Name:设置每个小窗口的

 

image005

Index.html

 

 

行内框架<iframe></iframe>

<iframe>是<body>的子元素

<ifame>是嵌套到<body>元素中的。

 

常用属性

Src:引入哪个HTML文件

Width:指行内框架的宽度

Height:指行内框架的高度

Scrolling:是否显示滚动条

Align:水平对齐方式

 

 

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/168.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2015年10月14日 10:12
下一篇 2015年10月14日 10:26

相关推荐

  • 我来教你html网站怎么渗透。

    在网络安全领域,渗透测试是一种常用的方法,用于评估Web应用程序的安全性,HTML站点也不例外,在本教程中,我们将介绍如何使用一些常见的渗透测试工具和技术来寻找HTML站点的漏洞,请注意,本教程仅用于教育和研究…

    2024年6月24日
    00
  • 经验分享如何在html中引入scss。

    在HTML中引入SCSS(Sass)的步骤如下: (图片来源网络,侵删) 1、安装Node.js和npm 你需要在你的计算机上安装Node.js和npm,Node.js是一个JavaScript运行时环境,而npm是Node.js的包管理器,你可以从Node.js官网…

    2024年6月24日
    00
  • 我来教你html如何设置代码优先级。

    在HTML中,可以通过设置内联样式、外部样式表或者使用!important来调整代码的优先级,下面是一个详细的解释和示例: (图片来源网络,侵删) 1、内联样式 内联样式是直接在HTML元素中使用style属性来设置样式,它的…

    2024年6月25日
    01
  • 我来分享html下载文件到本地。

    HTML(HyperText Markup Language)是一种用于创建网页的标记语言,当你下载一个HTML文件时,你实际上是下载了一个包含网页源代码的文件,要查看或编辑这个文件,你需要使用一个可以解析HTML代码的浏览器或者文本编…

    2024年6月24日
    00
  • 小编分享html怎么改表格边框颜色。

    要更改HTML表格线为黑色,可以使用CSS来设置表格的边框样式,下面是一个详细的技术教学,包括代码示例和解释说明。 (图片来源网络,侵删) 1、我们需要在HTML文件中创建一个表格,可以使用<table>标签来定义…

    2024年6月25日
    00
  • 分享html如何给所有元素加边框符号。

    在HTML中,给所有元素加边框可以通过CSS样式来实现,CSS(层叠样式表)是一种用于描述HTML或XML等文件的样式的语言,通过使用CSS,我们可以为网页上的元素添加颜色、字体、边距、填充和边框等样式。 (图片来源网络…

    2024年6月24日
    00
  • 我来分享html如何获取当前点击元素的属性值。

    在HTML中,我们可以通过JavaScript来获取当前点击元素的属性值,以下是详细的技术教学: (图片来源网络,侵删) 1、我们需要了解什么是事件监听器,事件监听器是一种可以响应特定事件的代码,在JavaScript中,我们…

    2024年6月24日
    00
  • 聊聊html中图片怎么排成一排。

    在HTML中,我们可以通过使用CSS来控制图片的布局和排列方式,以下是一些常见的方法,可以帮助你在HTML中并排显示图片: (图片来源网络,侵删) 1、使用浮动(Float) 浮动是一种非常常见的方法,可以使元素并排显…

    2024年6月24日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息