a标签(HTTP GET(获取) 请求)
1,target 目标 _self当前 在当前窗口打开内容 2,_blank空白 在新的窗口打开内容 3,_parent 在父亲窗口打开内容 如嵌套2层 在最外面嵌套中打开 4,_top在顶层窗口打开,嵌套N层,在最外面嵌套中打开 3和4 结合ifarme标签理解
1, <a href="" target="_self">qq</a>
2, <a href="" target="_blank">qq</a>
3, <a hrref="" target="_parent">qq</a>
4, <a href=""target="top">qq</a>
a标签下载属性
加入download下载html网页,
<a href="http://qq.com" download>下载</a>
![ef8da609623c70f2d6b9347c080c237f.png](https://i-blog.csdnimg.cn/blog_migrate/3f943eeeff78729e18cb74ed1dd5caa3.jpeg)
a标签href属性,超链接
第一个/的意思是协议,当前页面是HTTP协议,点击链接就是HTTP协议,如果当前页面是本地file协议,点击链接就是file协议链接,1和2的写法实现效果一样
1,<a href="//qq.com">qq</a>
2,<a href="http/qq.com">qq</a>
3,href="#" 页面内跳转不发请求
<
4,href里面不是#号,会发起请求,如下图
4,<a href="?name=frank">qq</a>
5,href里面写js代码可以执行,写一个a标签不想它跳转可以写成 <a href="javascript:;">qq</a>这样a标签不会跳转也不会跳转到页面开头伪协议
5,<a href="javascript:alert(1)">qq</a> <a href="javascript:;">qq</a>
![c22e9f6a5c25c6c51cce5e2d7e660dc0.png](https://i-blog.csdnimg.cn/blog_migrate/1ac736bf19cd2e15efae0567b09b167e.jpeg)
![4ee1cc9f50767f1e628d3090e4384773.png](https://i-blog.csdnimg.cn/blog_migrate/0cc86a8aad05786585bdffb9ec939365.jpeg)
iframe标签:
<iframe name=”xxx” src=”路径” frameborder=”0”></iframe>
<a target=”xxx”(这里引用了上面iframe的namexxx) href=”http://qq.com”>qq</a>
<a target=”xxx”(这里引用了上面iframe的namexxx) href=”http://baidu.com”>百度</a>
意思是:name:点击a链接时在iframe里打开a里面target为xxx的链接
frameborder:清除本身的边框
form(HTTP POST(上传)请求)
form加载input外层写上属性 发送请求form请求可以得到第四部分见图2 a标签也可以发生请求
<
![445b4f512d88ecc07e29241feed8ee56.png](https://i-blog.csdnimg.cn/blog_migrate/2853a3c755c54331dac4c2ef8cbf6b04.jpeg)
![219ae10c1ed167bdcfabf3d81058108f.png](https://i-blog.csdnimg.cn/blog_migrate/e6696bba8b8f08d90b4f3fc1056906c2.jpeg)
input标签
如果form里面buttom标签不写type值,那么button标签会当做提交按钮(submit)
![35f95c2f06977427e4ea2f089bf9b5ec.png](https://i-blog.csdnimg.cn/blog_migrate/21d68b7101e8f80ec7506df1457d5aab.jpeg)
form里面input type button 这个只是普通按钮不会当做提交按钮
![16ad8157a1276f9ddd984305e491e369.png](https://i-blog.csdnimg.cn/blog_migrate/224f2a01042b064ae1e8b8f6fa6bc990.jpeg)
form里面input type submit 这个才是提交按钮。点击会发生post请求
![60f668c165271c0f1ac37c476f7b23ce.png](https://i-blog.csdnimg.cn/blog_migrate/0b28a13d1dbb3ca330d3751283fb8b3a.jpeg)
checkbox
多选框 此时点击网页小方框会打勾勾,但是点击你好文字不会打勾,体验比较差,
![6de852f414c9afa653acad17743fb0ec.png](https://i-blog.csdnimg.cn/blog_migrate/54258750e5df0082cd8b0c27232e9828.jpeg)
![bb7cba0ce782b982f26d07c3daf79653.png](https://i-blog.csdnimg.cn/blog_migrate/2cb0a6ce743e49ecf6c88f935238b57b.jpeg)
修改代码加上lable标签写上属性,在input里添加id对应lable属性,此时点击你好文字会打上勾
![28ec8d506fa253a89c2b448e641adda8.png](https://i-blog.csdnimg.cn/blog_migrate/58d86409623e51c92f5ba517c9c94239.jpeg)
![408e7d7b89829b07d32314433f7394cb.png](https://i-blog.csdnimg.cn/blog_migrate/ccc8ecc0748ae4f14124af823b18cb85.png)
还可以设置文本框,这样点击用户名,文本框会聚焦
![7e3a61ab06154435a856191d5a39a8d8.png](https://i-blog.csdnimg.cn/blog_migrate/e5740ef83c1e865928e25bcccbf0d8fe.jpeg)
![44468df59c68ff17c73e9ef204e8833a.png](https://i-blog.csdnimg.cn/blog_migrate/8e51af4d26a2f9fa98a2117e4e3517a1.png)
优化写法,直接用label标签把input标签包裹
![e1315dc7e90638bc67bf614da7a2d1a5.png](https://i-blog.csdnimg.cn/blog_migrate/e103781230586c3ba49d38733ada823f.jpeg)
input标签必须要写上name值,这样提交上去才会有保存,GET提交就到输入栏里面(不推荐)
![10308c61c4db4845dacb371c9facd0b9.png](https://i-blog.csdnimg.cn/blog_migrate/e9397ad4be627a31c0ab3a6e72e6036f.jpeg)
![6d85526022158bb105aa0c46913e44cb.png](https://i-blog.csdnimg.cn/blog_migrate/7eac6c8e818b78d2b5b0052312915e46.png)
![a3c497673eaf137b63531838da0fc6b7.png](https://i-blog.csdnimg.cn/blog_migrate/ebc4a019b1afe317b493342ac2faef45.png)
radio 单选框 n个单选框共同有1个name这样才能是单选框,没有同一个name的话就可以点很多(不推荐)
![0e1726e6a6280fc36bdf76e7ffadfdb9.png](https://i-blog.csdnimg.cn/blog_migrate/0d704dd7eb27a9710f7d9b9d591b532a.jpeg)
![3c10b61bd19bacfd9d0f1b1b0083bc29.png](https://i-blog.csdnimg.cn/blog_migrate/c321d343ab32068c231c5581482e05f5.png)
下拉列表
select(挑选)option(选项)disabled(失去,不能选中)selected(默认选中)
mltiple(多选,可以选中多个选项)
![cab435f96cefba18eeb113111d3cd0d0.png](https://i-blog.csdnimg.cn/blog_migrate/7c610f50731b2e8bfcebedac96ec570f.jpeg)
![bb500625790bdae08c3116dc28d7dba6.png](https://i-blog.csdnimg.cn/blog_migrate/5d74e14d8fe77f050fcc4b8622922d7e.jpeg)
textarea
文本域,cols列 控制宽 rows行 控制高 一般用css控制宽高
![5820f89dee5b9c9785dbd0e65bcb44b3.png](https://i-blog.csdnimg.cn/blog_migrate/ab4e09c3235aeae28d5ef19e39e17ee1.jpeg)
![91699cbe4713f706b3d4c88ff3501353.png](https://i-blog.csdnimg.cn/blog_migrate/153ac4ebb7fce5856efecf5e963cf5af.jpeg)
table
![e8b45690a5730a76eb094daf2ee2cc0e.png](https://i-blog.csdnimg.cn/blog_migrate/e7c53f2b708b093ec5fae396cb514b95.jpeg)
![c814e763c2af22094f3c62108b944c58.png](https://i-blog.csdnimg.cn/blog_migrate/bf379b967d3c6ed0e4e72d708eca0cb1.jpeg)
加上colgroup表格列属性 col表示每一列的属性
![28b377f1a11c70652ec55ae0acfb8acc.png](https://i-blog.csdnimg.cn/blog_migrate/498eb2577a4ee2c66d9a64074e321a2f.jpeg)
![94399e11ad8f87fcbeb6e9cb741d680b.png](https://i-blog.csdnimg.cn/blog_migrate/c7adfeba059359368677e11f55ceefee.jpeg)