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