a标签

1. 当我们想从本页面跳转到其他的页面的时候，这时就可以使用a标签

<a href="http://www.qq.com">腾讯首页</a>

target属性

2. 此时是跳转是当前页面跳转，但如果我们想在新开的窗口的跳转怎么办呢（在新窗口打开页面显然更人性化）
   这时我们就要用到了target属性

    <a href="https://www.qq.com" target="_blank">腾讯首页</a>

3. target显然不止只有这一个属性，它还有

• _self:当前页面加载。此属性是默认的。
• _blank: 跳转到新页面。
• _parent:在它的父窗口打开，比如在页面里有iframe的窗口，那么就在调用iframe的页面打开腾讯首页。
• _top:在顶层窗口打开，换句话就是在它的祖先打开。

4. 另外target还有一个用法，就是和iframe连用。

    <iframe name=tencent src="#" frameborder="0"></iframe> 
    // 首先给iframe起个名字
    <a href="https://www.qq.com" target="tencent">腾讯首页</a> 
    // 接着在target里写上我们刚刚起的名字
    // 效果：当我们点击a标签时，会在iframe的窗口里打开腾讯首页

download属性

    <a href="https://www.qq.com" download>腾讯首页</a>
    //另外一种不用download属性,设置响应头
    // content-type: application/octet-stream

href属性

1. 错误写法

    <a href="qq.com">qq</a>

这种写法错在没有加上https协议，这样浏览器会把qq.com当成文件来去访问

2. 无协议写法

    <a href="//qq.com">qq</a>

这种写法会按照当前所使用的协议来访问qq.com。如果当前使用的是HTTPS协议，则会自动补全为https://www.qq.com。如果当前使用的是file协议，则不能访问qq.com。 因此我们并不建议这种写法

3. 伪协议

    <a href="javascript: alert(1);">使用一段js代码</a>

这种写法和https协议的写法很类似，但我们知道JavaScript并不是一种协议，因此我们把这种写法称之为伪协议写法。其作用就是执行一段js代码。但很少有人会在a标签里写代码，实际上，它还有一种特殊且被广泛使用的写法。

4. 你怎么点我也没有

    <a href="javascript:;">点我也没用</a>

有时候我们会想要这样的效果：它是a标签且有连接，但我们又希望它什么都不做，就可以这样子写。
难道只有这一种写法吗？我href里不写东西可以吗？我们来对比一下其他写法会有怎样的效果：

不写href	href=""	href="#"
此时a标签没有下划线且不可点击	点击之后刷新页面	点击之后回到顶部

显然用伪协议的写法更好，因为它什么都不会做。

form标签

    <form action="uesers"method="post">
        <input type="submit" value="提交">
    </form>

1. a标签跳转页面发起的是GET请求，而用form标签可以发起post请求，GET通常用来获取页面，而POST通常用来上传数据
2. form标签默认是GET请求
3. 当form标签里有button时，此时button默认为提交按钮

    <form action="users"method="post">
        <input type="text" name="username" id="usname">
        <input type="text" name="password" id="pdw">
        <button>提交</button>
    </form>
    // 此时的button和上面的input功能一样

但如果button这样子写，就没有提交功能了

    <form action="users"method="post">
        <input type="text" name="username" id="usname">
        <input type="text" name="password" id="pdw">
        <button type="button">提交</button>
    </form>

此时的button并没有什么卵用，它就和<input type="button" value="提交">一样，仅仅只是一个button

4. form表单里的复选框

 <input type="checkbox" id="apple">苹果

这样子也可以，但点击苹果时没有反应，我们更希望点击苹果时，勾选框也能选上。改进之后的代码

 <input type="checkbox" id="apple"><label for="apple">苹果</label>

有时候我们懒得起名字，因此还可以这样写：

 <label for="apple"><input type="checkbox" id="apple">苹果</label>

5. 单选按钮

    <input type="radion">选项A
    <input type="radion">选项B
    <input type="radion">选项C
    <input type="radion">选项D

这样子，四个选项都可以勾选，但是有时候我们只想选择其中的一个，那么可以这样子写：

    <input name="onlyOne" type="radio">选项A
    <input name="onlyOne" type="radio">选项B  
    <input name="onlyOne" type="radio">选项C
    <input name="onlyOne" type="radio">选项D

6. 下拉列表

<select name="group" >
    <option value="1">一</option>
    <option value="2">二</option>
    <option value="3" disabled>三</option>//不可选
    <option value="4" selected>四</option>//默认选中
  </select>

table标签

table标签很好理解，动手写一遍就明白了。

<table>
    <colgroup>
      <col width=100>// 规定第一列的宽度
      <col bgcolor=red>// 规定第二列的背景颜色
      <col width=200>// 规定第三列的宽度
    </colgroup>
    <thead>
      <tr>// table row
        <th>1</th><th>1</th><th>1</th>// table head
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3</td>// table data
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>1</td><td>2</td><td>3</td>
      </tr>
    </tfoot>
  </table>

iframe标签

iframe标签的作用就是打开一个窗口,但现在似乎已经不常用了.

    <iframe src="http://qq.com" frameborder="0"></iframe>

iframe默认是高度是50，宽度是100。我们可以用css来设置它的宽高，但在css里你可以设置宽为100%，但却不可以设置为高100%，真是令人蛋疼。