html二

超链接

超链接有三种形式：

1、外部链接：链接到外部文件。举例：

<a href="new.html">点击进入到新网页</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语hypertext reference超文本地址的缩写。

当然，我们也可以直接点进链接，访问一个网址。举例如下；

 <a href="http://www.baidu.com" target="_blank">进入百度</a>

2、锚链接：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。效果如下：

上图中解释：

11行代码表示，顶部这个锚的名字叫做top。
然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。注意上图中红框部分的#号不要忘记了，表示跳到名为top的特定位置，这是规定。如果少了#号，点击之后，就会跳到top这个文件或者top这个文件夹中去。

如果我们将上图中的第23行代码写成：

<a href="new.hhml#top">回到顶部</a>

就表示，点击之后，跳转到new.html页面的top锚点中去。

说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

3、邮件链接：
代码举例：

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

效果：点击之后，会弹出outlook，作用不大。

前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息

特殊几个链接：

返回页面顶部的位置

 <a href="#">跳转到顶部</a>

与js有关：

 <a href="javascript:alert(1)">内容</a>
  <a href="javascript:;">内容</a>

1. javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</2
2. javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a>

超链接的属性

• href：目标URL
• title：悬停文本。
• name：主要用于设置一个锚点的名称。
• target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
  • _self：在同一个网页中显示（默认值）
  • _blank：在新的窗口中打开。
  • _parent：在父窗口中显示
  • _top：在顶级窗口中显示

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

ps:a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该是p包含a；

<p>
    <a href="">段落段落段落段落段落段落</a>
</p>

而不是a包裹p：

<a href="">
    <p>
        段落段落段落段落段落段落
    </p>
</a>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

总结：标签的使用
   a：
         （1）超链接
          href 超链接的地址
          target: _self 默认 在当前中打开链接地址
                _blank  在空白的页面打开连接地址
         （2）标签内部跳转
          锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。

   img
      src:连接的图片资源
      alt:图片资源加载失败。显示的文本

   ul: unordered list 无序列表 ul下的子元素只能是li
      li
      type='circle' 圆心
      type='square' 方块
   ol:
      ordered list
      只能是li
   dl：定义列表
      dt:定义标题
      dd:定义描述

   sublime的简单使用
   ctrl+shift+p  搜package control

   table  border='1' style="border-collapse:collapse;"
      tr  表格行
      td  表格描述
   form
      HTTP协议
      action:提交的服务器网址
      method:get(默认)| post(应用：登录注册、上传文件)
      页面中的a img link 默认是get请求

      input
         type:
            text: 文本输入框
            password:密码输入框
            file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
            submit:提交按钮
            button:普通按钮
         name:提交到服务器端的key
         value: 显示的文本内容，与服务器端的value
         placeholder：文本代替

      label
         for:是与下面的某个表单控件的id属性进行关联

   BS交互

      1.form表单默认与服务器进行交互
      2.ajax技术