1. iframe - 嵌套页面 MDN

eg:

frameborder 控制边框

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

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

QQ

a标签设置target属性(target="xxx")，在name为相同值(name=“xxx”)的iframe标签打开，这是其中一种用法
除此之外a标签target属性还可以设置为：
```
QQ
QQ
QQ
QQ
```
1. _blank -- 在新标签页中打开
2. _self -- 在当前页面打开
3. _parent -- 在父级页面中打开,比如你在一个iframe标签中打开一个a标签,那么它会向上追溯到iframe标签的页面打开a标签
```
// index.html
index


// index2.html
QQ_blank
QQ_self
QQ_parent
QQ_top
```
index.html中有一个iframe,链接到index2.html
当你打开index,点击iframe显示的index2中的4个a标签时, _parent会选择在index页面中打开
1. _top -- 在最上层页面中打开,同 _parent 类似,只不过 _top 是自动选择在最外层的html中打开,
  如果你只有一个页面,那么就在当前页面中打开,等同于_self
  如果你有两个页面,那么则等同_parent
  如果你有三个或者更多,那么_top会自动向上追寻,找到最外层的那个,在那里打开,
```
// index.html
index


// index2.html
index2


// index3.html
index3
QQ_blank
QQ_self
QQ_parent
QQ_top
```

download属性 -- 点击会下载详细
下载
是否下载还可以由http-content决定,具体设置:
Content-Type: application/octet-stream
如果你没有写这个,而是
Content-Type: text/html
那么只能在a标签写downloa,强制让浏览器下载
href 属性

假设我们不写上面那样,而是:

再刷新尝试点击,会发现并不能打开qq官网，
这是因为这里实际上是相对路径，使用的是file协议，
而而第一种使用的是http协议打开的。

再看另一种，

无协议链接，自动继承协议，它以当前协议打开，意思是当前文件使用什么协议打开的就用什么协议打开，
显然，本地编写的代码双击打开用的是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
这个参数的意思是不要缓存。
这个时候点击你会发现就能正常打开qq官网了，这是因为当前页面使用的是http协议，这就是a标签的无协议链接，自动继承协议
你还可以写相对路径。
href="#xxx" -- 锚点

1
...
A plan

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

href="?name=zero"
会发起一个新的请求，比如：

假设a在index.html页面内，那么会发起一个新的http://index.html?name=zero的请求
javascript代码伪协议

用法：它什么都不做，
不会跳转也不会刷新（href="#"不会刷新但会跳转到页面顶部，href=""则是会刷新）

form表单

首先来看一段代码：

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

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

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

但是这里的写法太麻烦了，可以这样简写：
orange
这样直接将input套在label内就省事多了

现在，点击文字也可以选中选框了。

同理，其它input:type也是一样的
```
  姓名：
  


  密码：
  

......
```
注意，checkbox也需要设置name
而name与value组合成键值对，就是要上传的数据了，比如上面的代码username和password，假设我们在username里填上zero，在password里填上1234，那么f12查看http第四部分，也就是post上传的数据，它们是键值对，中间用&符号组合起来

这里有个问题，password可见！！！
这就是http的糟糕之处了，密码是明文的，所以遇到有问题的换成https://再打开试一下吧。
checkbox是复选框，多个checkbox可以有同一个name，
```
  橘子
  苹果
```
提交的时候两个都会被提交，fruit=orange&fruit=apple
radio -- 单选框
同样必须要设置name，多个同name的radio只有一个可以被选中，例如：
```
男
女
```
select -- 下拉列表 MDN
select设置multiple是多选的意思，不设置就是单选
option属性value什么都不写就是空
option设置disable就无法选中
option设置selected默认选中
trxtarea -- 多行文本 MDN

多行文本，使用css控制样式，resize:none;禁止用户拉伸

table MDN

项目	姓名	班级	分数
	小明	1	96
	小红	2	94
平均分			95
总分			190

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标签配合使用

index

index

index2

index3

next

form表单

input type -- MDN

select -- 下拉列表 MDN

trxtarea -- 多行文本 MDN

table MDN

你可能感兴趣的:(R9-常见标签详解)