传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-2-6 11:32 编辑

【济南中心】PHP课程同步笔记day03标签介绍
超链接
Anchor 锚
定义和用法
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
在所有浏览器中,链接的默认外观是:
     未被访问的链接带有下划线而且是蓝色的
     已被访问的链接带有下划线而且是紫色的
     活动链接带有下划线而且是红色的
<a>属性
属性
描述
filename
规定被下载的超链接目标。( HTML5 中的新属性)
URL
规定链接指向的页面的 URL。
language_code
规定被链接文档的语言。
media_query
规定被链接文档是为何种媒介/设备优化的。( HTML5 中的新属性)
text
规定当前文档与被链接文档之间的关系。
· _blank
· _parent
· _self
· _top
· framename
规定在何处打开链接文档。
MIME type
规定被链接文档的的 MIME 类型。( HTML5 中的新属性)
       提示:如果不使用href属性,则不可以使用如下属性:download,hreflang,media,rel,target以及type属性。
       提示:URL(Uniform Resource Locator统一资源定位符)统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
       提示: a标签规范是不允许嵌套的,即不允许出现<a>bb<a>cc</a></a>
超链接分为外部链接、内部链接、文本链接、图片链接、下载链接、空链接、电子邮件链接等
外部链接 URL是本网站外的链接
     <a href=”http://www.sina.com.cn” target=”_blank”>新浪网</a>
例如:
360导航页的推荐网站:
图片1.png
内部链接URL是本网站内的二级域名
      <a href="http://sports.sina.com.cn/csl/" target="_blank">中超</a>
例如:
图片2.png
文本链接
普通文本加上<a href=”url”>普通文本</a>
例如:
      12306网上购票系统-用户支付通知
       图片3.png
下载链接
将提供下载的内容打包成*.rar,*.zip,*.iso,*.mp4,*.flv等
当用户点击时,会自动关联下载工具。
图片4.png
空链接
      <a href=””>空链接</a>
      <a href=”javascript:void(0)”>我是JavaScript空链接也叫死链接</a>
            单击后没有反应,可以配合JS程序
      <a href=”javascript:void(0)” onclick=”alert(‘点我啊!!’)”>我也是JavaScript        空链接</a>
电子邮件链接
      <a href=”完整的email地址”>联系我们</a>
      <a href=”mailto:完整的email地址”>联系我们</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>属性
属性
描述
pixels
规定表格边框的宽度。
· pixels
· %
规定单元边沿与其内容之间的空白。
· pixels
· %
规定单元格之间的空白。
· void
· above
· below
· hsides
· lhs
· rhs
· vsides
· box
· border
规定外侧边框的哪个部分是可见的。
· none
· groups
· rows
· cols
· all
规定内侧边框的哪个部分是可见的。
text
规定表格的摘要。
· %
· pixels
规定表格的宽度。
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align]<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>
     显示效果:
    图片5.png
<tr>属性
属性
描述
· right
· left
· center
· justify
· char
定义表格行的内容对齐方式。
character
规定根据哪个字符来进行文本对齐。
number
规定第一个对齐字符的偏移量。
· top
· middle
· bottom
· baseline
规定表格行中内容的垂直对齐方式。
<td>属性
属性
描述
text
规定单元格中内容的缩写版本。
· left
· right
· center
· justify
· char
规定单元格内容的水平对齐方式。
category_name
对单元进行分类。
character
规定根据哪个字符来进行内容的对齐。
number
规定对齐字符的偏移量。
number
规定单元格可横跨的列数。
header_cells'_id
规定与单元格相关的表头。
number
规定单元格可横跨的行数。
· col
· colgroup
· row
· rowgroup
定义将表头数据与单元数据相关联的方法。
· 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>
效果实现:
          图片6.png
<th>属性
     列标题文字,自加粗并在单元各居中
<caption>
     表格标题,双标记
表单:
表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分:
表单标签:这里面包含了处理表单数据以及数据提交到服务器。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
             图片7.png
表单的标签:<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):
          <form action="a.php" method="GET">
        或:
        <form action=".php" method="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>
效果展示:
                   图片8.png
正常action和method都填写的情况:
         
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align]<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;
效果展示:
          图片9.png
          图片10.png
锦绣齐鲁.jpg



分享至 : QQ空间
收藏
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条