2-链接-meta-表格-表单

超级链接
1、语法格式:<a 属性=“值”>内容</a>,不能嵌套 
2、常用属性:
  • Href:目标文件的地址URL,该URL可以是相对地址,也可以是绝对地址
  • Target:目标文件的显示窗口
    • _blank:在新窗口中打开目标文件
    • _self:在当前窗口中打开目标文件(默认),相当于“替换”操作
    • _parent:在父级窗口来打开目标文件
    • _top:在最顶级窗口来打开目标文件
  • Name:定义锚点链接的名称

绝对地址URL
1、远程的绝对地址:访问远程的文件,总是以http://域名,主机打头
2、本地的绝对地址(很少使用):file:///
相对地址URL
1、当前文件和目标文件同级关系,直接写目标文件名
2、当前文件和目标文件所在的文件夹同级,写文件夹名/目标文件名
3、目标文件在上层目录,../(上一级)../../(上两级)

特殊链接
1、什么样的文件会出现下载提示?RAR、doc...
2、邮箱链接:mailto:
3、普通空链接:#
4、JS链接:JavaScript:window.close()

HTML颜色表示
网页中的颜色有三种表示方法:
1、颜色单词:blue、green。。。
2、10进制表示:rgb(255,0,0) 不推荐使用,常用于CSS
3、16进制表示:#FF0000

锚点链接
锚点链接,是在一个网页的不同区域进行跳转。锚点可以理解为“定义记号”
步骤
1、定义锚点(做个记号)<a name= “锚点名称>无内容</a>
  •      锚点名称命名规则:可以包含字母、数字、下划线,但以字母打头
2、跳转到锚点(记号)<a href= “文件名#锚点名称">内容</a>

<meta>标记
<meta>的主要作用,是提供网页的元信息。比如:指定网页的搜索关键字
<meta>标记有两个属性
1、http-equiv属性
  • 功能:模拟http协议文件头信息,当信息从服务器端传到客户端时,告诉浏览器如何正确的显示网页内容。
  • http-equiv属性一般要与content属性配合使用。content属性指定信息的详细参数。
(1)设置网页的字符集
   <meta http-equiv= “Content-Type content=“text/html;charset=utf-8 >     
(2)网页自动刷新
    <meta http-equiv= “refresh”  content= “2 >      //每隔两秒刷新一次
    <meta http-equiv= “refresh”  content= “2;url=xxx >      //2秒后,跳转到XXX
2、name属性
name属性主要用于设置网页的搜索关键字、版权信息、作者等。
(1)设置网页搜索关键字
  <meta name=“keyword” content=“..>
(2)设置网页的描述信息
  <meta name= “description” content=“.>

XHTML简介
传统的HTML开发的初衷是面向PC机的,而随着移动端的不断出现,HTML已经满足不了时长的需求了。 XHTML是新一代的HTML标注语言,目的是为了取代HTML。XHTML的标记与HTML一模一样,语法更严格,可扩展。

XHTML编写规范
  • 所有标记和属性要全小写
  • 单边标记必须关闭。如:<br>———><br />
  • 所有的属性值都必须要加引号。
  • 所有的属性都必须有值。如<hr noshade>———><hr noshade=“noshade” />
  • 标记之间要顺序嵌套,外层套内层,一层套一层。
  • XHTML网页必须有DTD文档类型定义代码。

DTD文档类型定义
DTD文档类型定义的目的:是一种验证机制,也就是说检验一下你写的XHTML标记语法是否合法。
DTD三种类型:
  • 严格型的DTD(strict):使用CSS代替各种表现标记,如:<font>、<b>
  • 过渡型的DTD(transitional):可继续使用表现标记
  • 框架的DTD(frameset)

表格标签
1、表格的结构:块元素,如:1行2列
     <table>
          <tr>
               <td></td>
               <td></td>
          </tr>
     </table>
2、table的属性:
  • width:表格的宽度,单位可以是百分比,也可以是固定值
  • height:表格高度
  • align:表格水平对齐方式,取值:left、right、center
  • border:边框粗细
  • bordercolor:边框颜色
  • bgColor:表格背景色
  • background:背景图片URL
  • cellpadding:单元格边线到内容间距离(填充距离)
  • cellspacing:单元格与单元格之间的距离(间距)
  • rules:合并单元格边框线,取值:all。rules兼容性不好,请使用CSS来取代它。
3、<tr>属性--->行标记
  • bgcolor:行的背景色
  • height:行的高度,没有宽度
  • align:行中的文本水平格式
  • valign:垂直居中,取值:top、middle、bottom
4、<td>或<th>属性
<td>是普通单元格,<th>是标题单元格(默认自动加粗居中,一般为表格第一行)
  • width:单元格宽度,就是列宽
  • height:单元格高度,就是行高
  • bgcolor:单元格背景色
  • backgroud:单元格背景图片
  • align:水平对齐
  • valign:垂直对齐
  • rowspan:上下单元格合并。合并属性必须放在第一个单元格中
  • colspan:左右单元格合并。<td colspan=“2”>,合并一个必须删除一个,有增就有减,保证每一行单元格个数不变
5、表格标题
  • 语法格式:<caption></caption>
  • 提示:<caption>标记是<table>的子标记。

表单
1、表单的概念
     表单主要用来获取客户端用户的数据(信息)。如:注册表单、查询表单、登陆表单等
2、表单的工作原理
  • 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交
  • 这些表单数据,通过互联网,传递到服务器上
  • 服务器上有专门的程序,对表单数据进行验证。如果验证成功,则返回一个验证成功的信息;验证失败,将返回一个错误信息。
从工作原理来看,表单的制作分为两个部分:一是前台页面的制作,二是后台对表单数据的处理
3、表单的结构<form></form>
     简单登陆
     <form name=“form1” method=“get” action=“login.php”>
          用户名:<input type=“text” name=”username” />
          密码:<input type=“password” name=“userpwd />
          <input type=“submit” value=“提交表单">
     </form>
4、form标记的属性——>块元素
  •   name:表单名字。主要给JavaScript来用,进行客户端表单验证。
  •   method:表单的提交方式,取值:get或post
  •   action:指定表单的处理程序,一般是PHP、ASP、Java文件
    • 如果action为空,提交到当前文件,自己来处理
  •   enctype:指定表单数据的编码方式(加密方式),这个属性只能用在method=“post”情况下,取值:
    • application/x-www-form-urldecoded:默认的传值方式
    • multipart/form-data:如果上传文件,使用该值
   
GET方法和POST 方法
1、get方式(默认方式):
  • 是将表单数据追加到action指定的处理程序的后面,通过地址栏传值(?:后跟参数,也称“查询字符串” ; &:多个参数的分隔符)的方式,向服务器发送数据
  • 如果某个表单元素,不想往服务器传递数据,那么可以不给它加name属性。传递到服务器的数据,如果没有name,就无法获取它的值。(submit。。。)
  • get方式的特点
    • get方式提交的数据不安全,不能提交敏感的数据
    • get方式只能提交少量数据。因为地址栏的长度有限制,大约100多字符
    • get方式下不能上传附件
2、POST方法:
  •      post提交方式,它不将表单数据追加到地址上,而是直接传给 表单处理程序
  •      post方式的特点
    • post提交数据相对安全
    • post可以提交海量数据
    • post可以上传附件

表单元素
表格和表单的嵌套顺序:form嵌套table,table放内容
1、单行文本域
  •      语法格式:<input type=text 属性=“值” />
  •      常用属性:
    • name:文本框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头
    • type:表单元素的类型,text
    • value:文本框的值(一般自己输入)
    • size:文本框的长度,以“字符”为单位
    • maxLength:最多可以输入多少个字符,超出的就输不进去了
    • readonly:只读属性。可以选中,但不能修改。如:readonly=“readonly”
    • disabled:禁用属性。不能选中,不能修改。如:disabled=“disabled”
2、单行密码框
  •      语法格式:<input type=“password” 属性=“值” />
  •      属性和单行文本域一样
3、单选按钮
  •      语法格式:<input type=radio 属性=“值” />
  •      常用属性:
    • name:元素的名称
    • value:元素的值,该value的数据将发往服务器
    • checked:默认选中哪一项。如:checked=“checked”
  •     只可选一个,name的值一致
4、复选框
  •      语法格式:<input type=“checkbox” 属性=“值” />
  •      常用属性:
    • name:元素名称
    • value:元素的值
    • checked:默认选中
  •     注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值
  •    可选可不选
5、下拉列表
  •      语法格式:<select name=“名称>
                              <option value=“值”>内容</option>       //可选项
                       </select>
  •      属性
    • <select>标记的属性,只有一个name属性
    • <option>标记的属性有两个,value和selected。如:selected=“selected”
6、文本区域
  •      语法格式:<textarea name=“名称 cols=“宽度 rows=“高度”></textarea>
  •      常用属性:
    • name:元素名称
    • cols:宽度,是指多少个字符宽
    • rows:高度,是指几行高
  •      提示:<textarea>和</textarea>之间是默认文本
7、按钮
  • 提交按钮 <input type=“submit” value=“提交 />
  • 重置按钮 <input type=“reset” value=“重置 />
  • 图片按钮 <input type=“image” src=“xx/xx.png" />
    • 和提交按钮一样
  • 普通按钮 <input type=“button” value=“普通 />
    • 普通按钮本身不具备任何功能,配合JS使用
8、上传文件域
  •       语法格式:<input type=“file” 属性=“值”>
  •       常用属性:
    • name:表单元素的名称
    • value:表单元素的值,这个值其实就是上传的文件名。value属性是只读属性
9、隐藏域
  •      功能:看不见的一个框。传递一些值,不想让别人看见。
  •      用处:主要用于PHP后台程序,如:修改某一条新闻的内容时,需要传递一个新闻的id号。
  •      语法格式:<input type=hidden name=“名称 value=“默认值” />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值