R9-常见标签详解

2017-12-05 本文已影响0人半斋

1. iframe - 嵌套页面 MDN

eg: <iframe src="https://www.baidu.com" name="xxx"></iframe>

frameborder 控制边框

2. a - 跳转页面（HTTP GET 请求）MDN

a标签可以和iframe标签配合使用

  <iframe name="xxx" src="http://baidu.com" frameborder="0"></iframe> 
  <a href="http://qq.com" target="xxx">QQ</a>

a标签设置target属性(target="xxx")，在name为相同值(name=“xxx”)的iframe标签打开，这是其中一种用法

除此之外a标签target属性还可以设置为：

<a href="http://qq.com" target="_blank">QQ</a>
<a href="http://qq.com" target="_self">QQ</a>
<a href="http://qq.com" target="_parent">QQ</a>
<a href="http://qq.com" target="_top">QQ</a>

_blank -- 在新标签页中打开
_self -- 在当前页面打开
_parent -- 在父级页面中打开,比如你在一个iframe标签中打开一个a标签,那么它会向上追溯到iframe标签的页面打开a标签

// index.html
<h1>index</h1>
<iframe src="index2.html" frameborder="1"></iframe>

// index2.html
<a href="http://qq.com" target="_blank">QQ_blank</a>
<a href="http://qq.com" target="_self">QQ_self</a>
<a href="http://qq.com" target="_parent">QQ_parent</a>
<a href="http://qq.com" target="_top">QQ_top</a>

index.html中有一个iframe,链接到index2.html
当你打开index,点击iframe显示的index2中的4个a标签时, _parent会选择在index页面中打开

_top -- 在最上层页面中打开,同 _parent 类似,只不过 _top 是自动选择在最外层的html中打开,
如果你只有一个页面,那么就在当前页面中打开,等同于_self
如果你有两个页面,那么则等同_parent
如果你有三个或者更多,那么_top会自动向上追寻,找到最外层的那个,在那里打开,

// index.html
<h1>index</h1>
<iframe src="index2.html" frameborder="1"></iframe>

// index2.html
<h1>index2</h1>
<iframe src="index3.html" frameborder="1"></iframe>

// index3.html
<h1>index3</h1>
<a href="http://qq.com" target="_blank">QQ_blank</a>
<a href="http://qq.com" target="_self">QQ_self</a>
<a href="http://qq.com" target="_parent">QQ_parent</a>
<a href="http://qq.com" target="_top">QQ_top</a>

download属性 -- 点击会下载详细
<a href="http://qq.com" download>下载</a>
是否下载还可以由http-content决定,具体设置:
Content-Type: application/octet-stream
如果你没有写这个,而是
Content-Type: text/html
那么只能在a标签写downloa,强制让浏览器下载
href 属性
<a href="http://qq.com"></a>
假设我们不写上面那样,而是:
<a href="qq.com"></a>
再刷新尝试点击,会发现并不能打开qq官网，
这是因为这里实际上是相对路径，使用的是file协议，
而而第一种使用的是http协议打开的。

再看另一种，
<a href="//qq.com"></a>
无协议链接，自动继承协议，它以当前协议打开，意思是当前文件使用什么协议打开的就用什么协议打开，
显然，本地编写的代码双击打开用的是file协议，这并没有什么问题，但是有时候我们需要http协议，可是上传github再预览又会太麻烦，
这时候，你可以使用一个小工具：
1. 打开 git bansh
2. npm i -g http-server
3. 然后稍等一会应该就能看见安装成功的信息了
使用，比如我的index.html放在E:\test，那么：
```
http-server /e/test
也就是 
http-server 地址
简写： 
hs /e/test
注意不要漏掉空格
```
运行之后，会给你多个地址，复制一个然后黏贴到浏览器打开就行了，

除此之外，你也可以直接进入到代码所在的文件夹，然后运行http-server，这个时候不需要加参数，默认当前文件夹运行，
最后，建议现在用
http-server -c-1 // 注意这里是负一，而不是i of l
这个参数的意思是不要缓存。
这个时候点击<a href="qq.com"></a>你会发现就能正常打开qq官网了，这是因为当前页面使用的是http协议，这就是a标签的无协议链接，自动继承协议
你还可以写相对路径。
href="#xxx" -- 锚点

<a href="#1">1</a>
...
<p id="a">A plan</p>

作用是页面内的跳转，它不会发起http请求，可以使用F12来测试查看。
可以使用 href="#top"或者 href="#" 链接返回到页面顶部。这种行为在HTML5上被指定

href="?name=zero"
会发起一个新的请求，比如：
<a href="?name=zero"></a>
假设a在index.html页面内，那么会发起一个新的http://index.html?name=zero的请求
javascript代码伪协议
<a href="javascript: alert(1);"></a>
用法：<a href="javascripe:;"></a> 它什么都不做，
不会跳转也不会刷新（href="#"不会刷新但会跳转到页面顶部，href=""则是会刷新）

form表单

首先来看一段代码：

<form action="xx.html" method="post" target="_blank">
  <input type="text" name="xxx">
  <input type="password" name="yyy">
  <input type="submit" value="提交">

  <button type="button"></button>
  <input type="button" value="button">
</form>

form 标签主要是用来发起一个post请求的（a标签是get）
如果你的form表单没有submit（提交）按钮，你就无法提交这个form，除非你用js
你的name都会带到http的第四部分作为它的key
file协议不支持post，记得用http-server模拟打开
get无法设置第四部分,methed="get"会把参数也就是name放到查询参数
post则默认把参数放到第四部分，post使用查询参数：
<form action="index.html?name=zero" method="post"></form>
form内部所有标签都需要一个name，否则这个标签的数据不会被提交
form标签的target属性和a标签一样，并且也可以在iframe中打开
如果一个form中没有submit按钮，只有一个没有设置type的button按钮，那么他会自动升级为submit按钮，如果设置了type且不为submit，那么这个form表单则没有提交按钮
input type -- MDN
checkbox -- 复选框 -- 更多
- 必须使用 value 属性定义此控件被提交时的值
- 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。
<input type="checkbox" name="fruit" value="orange">橘子

这是一个复选框，你只能点击小方框来选中它，现在我们需要增加选中区域，这里我们要使用label -- MDN
<label for="og">orange</label><input type="checkbox" name="fruit" value="orange" id="og">
注意这里input多了一个id属性，它的值和label的for属性的值一样,注意，label的for指向的是id，而不是name

MDN解释label的for属性：
可标记的 form相关元素的ID，在同一文档中作为label元素。第一个这样的元素在文档中有一个ID匹配属性值，作为这个label元素的labeled control。

但是这里的写法太麻烦了，可以这样简写：
<label><input type="checkbox" name="fruit" value="orange">orange</label>
这样直接将input套在label内就省事多了

现在，点击文字也可以选中选框了。
同理，其它input:type也是一样的
```
<label>
  姓名：
  <input type="text" name="username">
</label>
<label>
  密码：
  <input type="password" name="password">
</label>
......
```
注意，checkbox也需要设置name
而name与value组合成键值对，就是要上传的数据了，比如上面的代码username和password，假设我们在username里填上zero，在password里填上1234，那么f12查看http第四部分，也就是post上传的数据，它们是键值对，中间用&符号组合起来

这里有个问题，password可见！！！
这就是http的糟糕之处了，密码是明文的，所以遇到有问题的换成https://再打开试一下吧。
checkbox是复选框，多个checkbox可以有同一个name，
```
  <input type="checkbox" name="fruit" value="orange">橘子
  <input type="checkbox" name="fruit" value="apple">苹果
```
提交的时候两个都会被提交，fruit=orange&fruit=apple
radio -- 单选框
同样必须要设置name，多个同name的radio只有一个可以被选中，例如：
```
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
```

select -- 下拉列表 MDN

<select name="group" multiple>
  <option value=""></option>
  <option value="1">第一组</option>
  <option value="2">第二组</option>
  <option value="3" disable>第三组</option>
  <option value="4" selected>第四组</option>
</select>

select设置multiple是多选的意思，不设置就是单选
option属性value什么都不写就是空
option设置disable就无法选中
option设置selected默认选中

trxtarea -- 多行文本 MDN

<textarea style="resize: none" name="" cols="30" rows="10"></textarea>
多行文本，使用css控制样式，resize:none;禁止用户拉伸

table MDN

<table border=1>
  <colgroup>
    <col width=100>
    <col bgcolor=#f60  width=200>
    <col width=100>
  </colgroup>
  <thead>
      <tr>
      <th>项目</th>
      <th>姓名</th>
      <th>班级</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>小明</td>
      <td>1</td>
      <td>96</td>
    </tr>
    <tr>
      <td></td>
      <td>小红</td>
      <td>2</td>
      <td>94</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>平均分</th>
      <td></td>
      <td></td>
      <td>95</td>
    </tr>
    <tr>
      <th>总分</th>
      <td></td>
      <td></td>
      <td>190</td>
    </tr>
  </tfoot>
</table>

table标签内只能有三个标签：
thead -> table head
tbody -> table body
tfoot -> table foot
然后是再下级标签
tr -> table row
th -> 标题
td -> table data
colgroup
必须和col一起用
可以设置每一列的宽度、背景色（不常用）等
如果将tfoot放到thead前面，浏览器展示tfoot依然在最后，这四个标签的顺序无关展示顺序
如果不写tbody，浏览器会自动添加，
继续不写thead，会被浏览器添加到tbody里
继续不写tfoot，全部都放到tbody，浏览器无法判断顺序，按照代码顺序展示

R9-常见标签详解

1. iframe - 嵌套页面 MDN

2. a - 跳转页面（HTTP GET 请求）MDN

a标签可以和iframe标签配合使用

next

form表单

input type -- MDN

select -- 下拉列表 MDN

trxtarea -- 多行文本 MDN

table MDN

猜你喜欢

热点阅读