HTML标签小记

<iframe>

frameborder属性

frameborder标签用来消除默认的iframe的边框， 因为它太丑了。如下：

<iframe src=""></iframe>

src="">

且默认宽为100px, 高为50px
设置了frameborder后如下：

<iframe src="" frameborder="0"></iframe>

图中红框是为了能看清，对<iframe>设置了css样式：

iframe {border: 2px solid red;}

name属性

可以再<iframe>中打开一个新的窗口， 但是name 必须和<a>的target属性连用才有效。

<iframe name="iframe" src="" frameborder="0"></iframe>
<a target="iframe" href="http://www.youkuaiyun.com">点我</a>

src属性

src属性指定了页面嵌套的URL，例如：

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

src="http://www.qq.com">

src属性值可以是一个相对路径， 但是没啥用就不演示了。
更多内容请看这里

<a>

target属性的四个值

target有四个属性值分别为：_self（默认）,_blank, _parent, _top分别表示不同的含义。具体点击这里
当点击<a> 时根据target属性值的不同发生浏览器不同的反应。
target属性值为_self时，当前页面加载
target属性值为_blank时， 在新窗口发生加载
target属性值为_parent时， 在当前框架的父框架中加载
target属性值为_top时，在最顶层（祖先）的iframe框架中加载

download属性

这个属性用于下载， 加入有一个index.html页面中有如下属性：

<a href="index.html" download>下载</a>

点击下载查看效果
更多内容请看这里

<form>

<form>是表单元素， 常用来提交表单。有GET和POST两种提交方式， 但是最长用的是POST提交方式。

target属性

<form>中target的属性和a中的属性是一个属性， 也要四个值：_self, _blank, _parent, _top。所表示的含义也一致。这里不过多描述。
下面是target设置为_blank:

<form action="" target="_blank">
    <p>在新窗口提交</p>
    <input type="submit" value="提交">
</form>

点击提交按钮后，会在新窗口打开页面

GET和POST

GET方法会将参数放在URL中：

<form action="index.html" method="GET">
    <input type="text" name="text1" value="GET方法提交文本">
    <input type="submit" value="提交">
</form>

当我们用POST方法提交时， 参数会在Form Data请求头中：

<form action="index.html" method="POST">
    <input type="text" name="text2" value="POST方法提交文本">
    <input type="submit" value="提交">
</form>

form表单中的提交按钮

<form action="index.html" method="GET" target="_blank">
    <input type="text" name="autoSubmit" value="点击后自动提交">
    <button>提交</button>
  </form>
  <form action="index.html" method="GET" >
    <button type="button">点击后不会有反应</button>
  </form>
  <form action="index.html" method="GET" >
    <input type="button" value="点击后也不会有反应">
  </form>
  <form action="index.html" method="GET" target="_blank">
    <input type="text" name="submit" value="点击后提交">
    <input type="submit" value="提交">
  </form>

更多内容请看这里

<input>

<input>在前面已经初次接触过了， 它的type属性有许多的值，常用的有text, radio, checkbox, submit, button, file, password, reset.
在进行布局时经常和<label> 一起用。
text: 输入文本
radio: 单选按钮
checkbox：多选按钮
submit: 提交按钮
button：普通按钮
file: 上传文件
password: 密码
reset`: 重置， 点击后会重置所有表单元素为初始值

当多个radio为一组时， 设置相同的name值， 那么radio就只能选一个。
checkbox同理， 多个checkbox属于同一组， 但可以多选。具体请看下面示例:

<form action="GET"> 
    <label>用户名：<input type="text" name="text" value="user"></label><br>
    <label>密码：<input type="password" name="password"></label><br>
    <label>选择文件<input type="file" name="file"></label><br>
    <label><input type="reset" name="reset" value="重置"></label>
    <input type="submit" value="提交">
</form>

输入密码后点击提交， 可以看到地址栏传入了参数。点击重置则所有项目重置到初始状态。

  <form action="GET">
    <label><input type="radio" name="radio">南京</label>
    <label><input type="radio" name="radio">北京</label>
    <label><input type="radio" name="radio">东京</label>
    <br>
    <label><input type="checkbox" name="checkbox">喜欢</label>
    <label><input type="checkbox" name="checkbox">不喜欢</label>
    <label><input type="checkbox" name="checkbox">没感觉</label>
    <input type="submit" value="提交">
</form>

运行如下：

更多内容请看这里

<table>

<table>的子元素可以有theader, tbody, tfooter, tr, th, td
用boder设置单元格之间的距离

<table border=1>
    <theader>
      <tr>
        <th>项目</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
      </tr>
    </theader>
    <tbody>
      <tr>
        <th></th>
        <td>001</td>
        <td>张三</td>
        <td>男</td>
      </tr>
      <tr>
        <th></th>
        <td>002</td>
        <td>李四</td>
        <td>女</td>
      </tr>
      <tr>
        <th></th>
        <td>003</td>
        <td>王五</td>
        <td>男</td>
      </tr>
      <tr>
        <th>总计</th>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

显示如下：

以前还会用bgcolor设置属性， 修改上一示例代码的第一行如下：

<table bgcolor=red>
    <theader>
      <tr>
        <th>项目</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
      </tr>
    </theader>
    <tbody>
      <tr>
        <th></th>
        <td>001</td>
        <td>张三</td>
        <td>男</td>
      </tr>
      <tr>
        <th></th>
        <td>002</td>
        <td>李四</td>
        <td>女</td>
      </tr>
      <tr>
        <th></th>
        <td>003</td>
        <td>王五</td>
        <td>男</td>
      </tr>
      <tr>
        <th>总计</th>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

还可以通过colgroup控制每列的宽度, 我们将下面的代码加入<table>子标签中：

<colgroup>
      <col width=50>
      <col width=100>
</colgroup>

会发现表格成这样了：

第一列变为50px宽， 第二列变为100px宽， 剩下两列没有设置。
更多内容请看这里

<select>

<select> 用于创建选项菜单。

<select name="select">
    <option value="香蕉" disabled>香蕉</option>
    <option value="桔子">桔子</option>
    <option value="苹果" selected>苹果</option>
    <option value="梨子">梨子</option>
</select>

演示如下：

本文左右代码可以再这里访问。