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>
next
-
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再预览又会太麻烦，
这时候，你可以使用一个小工具：- 打开 git bansh
npm i -g http-server- 然后稍等一会应该就能看见安装成功的信息了
使用，比如我的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，而不是nameMDN解释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，浏览器无法判断顺序，按照代码顺序展示
网友评论