黑马程序员技术交流社区

标题: 【济南中心】PHP课程同步笔记day03：标签介绍 [打印本页]

作者: 小鲁哥哥 时间: 2017-2-6 11:19
标题: 【济南中心】PHP课程同步笔记day03：标签介绍
本帖最后由小鲁哥哥于 2017-2-6 11:32 编辑

【济南中心】PHP课程同步笔记day03：标签介绍

超链接

Anchor 锚

定义和用法

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

<a>属性

属性		值	描述
download		filename	规定被下载的超链接目标。( HTML5 中的新属性)
href		URL	规定链接指向的页面的 URL。
hreflang		language_code	规定被链接文档的语言。
media		media_query	规定被链接文档是为何种媒介/设备优化的。( HTML5 中的新属性)
rel		text	规定当前文档与被链接文档之间的关系。
target		· _blank · _parent · _self · _top · framename	规定在何处打开链接文档。
type	MIME type			规定被链接文档的的 MIME 类型。( HTML5 中的新属性)

提示：如果不使用href属性，则不可以使用如下属性：download,hreflang,media,rel,target以及type属性。

提示：URL(Uniform Resource Locator统一资源定位符)统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

提示： a标签规范是不允许嵌套的，即不允许出现<a>bb<a>cc</a></a>

超链接分为外部链接、内部链接、文本链接、图片链接、下载链接、空链接、电子邮件链接等。

外部链接： URL是本网站外的链接

例如：

360导航页的推荐网站:

内部链接：URL是本网站内的二级域名

例如：

文本链接：

普通文本加上<a href=”url”>普通文本</a>

例如：

12306网上购票系统-用户支付通知

下载链接：

将提供下载的内容打包成*.rar,*.zip,*.iso,*.mp4,*.flv等

当用户点击时，会自动关联下载工具。

空链接：

<a href=”javascript:void(0)”>我是JavaScript空链接也叫死链接</a>

单击后没有反应，可以配合JS程序

<a href=”javascript:void(0)” onclick=”alert(‘点我啊！！’)”>我也是JavaScript 空链接</a>

电子邮件链接

点击这个链接就会自动启动Micosoft office outlook向email发送邮件

锚点链接

先定义锚点：<a name=”top”></a>

使用方法： <a href=”#top”>回到TOP位置</a>

注意：

HTML5中不支持规定锚的命名。

表格结构

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

<table>属性：

属性	值	描述
border	pixels	规定表格边框的宽度。
cellpadding	· pixels · %	规定单元边沿与其内容之间的空白。
cellspacing	· pixels · %	规定单元格之间的空白。
frame	· void · above · below · hsides · lhs · rhs · vsides · box · border	规定外侧边框的哪个部分是可见的。
rules	· none · groups · rows · cols · all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	· % · pixels	规定表格的宽度。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

<body>
      <table border="1" bordercolor="red" cellpadding="10" cellspacing="20">
            <tr><td>孙</td><td>悟</td><td>空</td></tr>
            <tr><td>猪</td><td>八</td><td>戒</td></tr>
            <tr><td>沙</td><td>和</td><td>尚</td></tr>
      </table>
</body>
</html>

显示效果：

<tr>属性

属性	值	描述
align	· right · left · center · justify · char	定义表格行的内容对齐方式。
char	character	规定根据哪个字符来进行文本对齐。
charoff	number	规定第一个对齐字符的偏移量。
valign	· top · middle · bottom · baseline	规定表格行中内容的垂直对齐方式。

<td>属性

属性	值	描述
abbr	text	规定单元格中内容的缩写版本。
align	· left · right · center · justify · char	规定单元格内容的水平对齐方式。
axis	category_name	对单元进行分类。
char	character	规定根据哪个字符来进行内容的对齐。
charoff	number	规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_cells'_id	规定与单元格相关的表头。
rowspan	number	规定单元格可横跨的行数。
scope	· col · colgroup · row · rowgroup	定义将表头数据与单元数据相关联的方法。
valign	· top · middle · bottom · baseline	规定单元格内容的垂直排列方式。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 </head>



 <body>

        <table border="1" bordercolor="red" cellpadding="10" cellspacing="20">

                <tr><td colspan="2">悟</td><td>空</td></tr>

                <tr><td rowspan="2">猪</td><td>八</td><td>戒</td></tr>

                <tr><td>和</td><td>尚</td></tr>

        </table>

 </body>

</html>

效果实现：

<th>属性

列标题文字，自加粗并在单元各居中

<caption>

表格标题，双标记

表单：

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据以及数据提交到服务器。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单的标签：<form></form>

属性：

属性	描述
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

Action属性：

Action属性定义在提交表单时执行的动作。通常表单会被提交到web服务器上的某个PHP文件。若action被省略，则action会被设置为当前页面。

Method属性：

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

或：

何时使用GET?

GET适合少量数据的提交。一般使用GET提交时，提交的数据会在地址栏中显示出来。一般搜索查询的时候用GET提交。

何时使用POST?

POST的安全性高，适合提交一些敏感信息(如密码等)，POST提交数据是不可见的。

Name属性：

每个输入字段必须设置一个name属性。

Entype属性：

有两个类型：

application/x-www-form-urlencoded在发送前编码所有字符（默认），一般可以省略不写。

multipart/form-data在发送前不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。

表单的元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input>元素是最重要的表单元素。

常用的input类型如text、password、radio、submit等

当action和method都不填写的情况：

[PHP] 纯文本查看 复制代码

<?php

        if(!empty($_GET)){

                $name = $_GET['lastname'];

                echo "提交上来的姓名为：".$name;

        }

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 </head>



 <body>

        <form>

                姓名：<input type="text" name="lastname" />

                <input type="submit" value="提交"/>

        </form>

 </body>

</html>

效果展示：

正常action和method都填写的情况：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

<body>
  <form method="post" action="11.php">
            姓名：<input type="text" name="name" />
            <input type="submit" value="发送"/>
  </form>
</body>
</html>

[PHP] 纯文本查看 复制代码

<?php

$name = $_POST['name'];

echo "从11.html中传递过来的姓名为：".$name;

效果展示：

作者: 溜达的鱼 时间: 2017-12-19 12:54
感谢分享

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2