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”>

          用户名：<inputtype=“text” name=”username” />

          密码：<inputtype=“password” name=“userpwd” />

          <inputtype=“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=“默认值” />