博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
a jquery 标签点击不跳转_html常用标签
阅读量:6359 次
发布时间:2019-06-23

本文共 1395 字,大约阅读时间需要 4 分钟。

a标签(HTTP GET(获取) 请求)

1,target 目标 _self当前 在当前窗口打开内容
2,_blank空白 在新的窗口打开内容
3,_parent 在父亲窗口打开内容 如嵌套2层 在最外面嵌套中打开
4,_top在顶层窗口打开,嵌套N层,在最外面嵌套中打开
3和4 结合ifarme标签理解
1, qq   2, qq   3, qq   4, qq

a标签下载属性

加入download下载html网页,

8da15be32cd25b6f6ecdd702c05377c6.png

a标签href属性,超链接

第一个/的意思是协议,当前页面是HTTP协议,点击链接就是HTTP协议,如果当前页面是本地file协议,点击链接就是file协议链接,1和2的写法实现效果一样

1,qq2,qq

3,href="#" 页面内跳转不发请求

3,qq

4,href里面不是#号,会发起请求,如下图

4,qq

5,href里面写js代码可以执行,写一个a标签不想它跳转可以写成 <a href="javascript:;">qq</a>这样a标签不会跳转也不会跳转到页面开头伪协议

5,qq  qq

a76eb9c5e7ededa3d8009976bb08a42a.png

48d5bca833538cfde18b5d50bc9cd5ca.png

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标签也可以发生请求

cc1f62f9ddd308fd5466d4f13f132f23.png

677ea420a8bf27bb3c269dbad4c440ac.png

input标签

如果form里面buttom标签不写type值,那么button标签会当做提交按钮(submit)

3869b85d7081383a91c8589d5f643a48.png

form里面input type button 这个只是普通按钮不会当做提交按钮

403d38b4e49f102634511b648994a2ba.png

form里面input type submit 这个才是提交按钮。点击会发生post请求

32177715c1c7ea999b79eaba08979e43.png

checkbox

多选框 此时点击网页小方框会打勾勾,但是点击你好文字不会打勾,体验比较差,

f9a1afa8b4b113d899a99732bea4507f.png

a3e5d9823e340b00ed327a6e6bf1d325.png

修改代码加上lable标签写上属性,在input里添加id对应lable属性,此时点击你好文字会打上勾

87bc052f408d0f8f43a22ee40c8e735b.png

9d8caec1a5ecb2c156e30b8ed3daae22.png

还可以设置文本框,这样点击用户名,文本框会聚焦

3798c61d88a009685419da1c6ff00a1b.png

3c0af52f43b410369f73334d8a84a39e.png

优化写法,直接用label标签把input标签包裹

ef07629173d313b93b50cd6f6c06ddb7.png

input标签必须要写上name值,这样提交上去才会有保存,GET提交就到输入栏里面(不推荐)

f8e50ba7554c35df17326c98caa271dd.png

1b8d331312a31b68aa1a4cce1adcbfaa.png

7b0be5974df9ea873c40afb9fc7aca39.png

radio 单选框 n个单选框共同有1个name这样才能是单选框,没有同一个name的话就可以点很多(不推荐)

68bcf1cb8f3012ef341f512d4ecaaa1b.png

5a7b65a5ae31920cf9122f13af9b7b98.png

下拉列表

select(挑选)option(选项)disabled(失去,不能选中)selected(默认选中)

mltiple(多选,可以选中多个选项)

c36cd9f4ab680152816fbbdcf63c1e38.png

14e5e506393bceb5177f2f2eadb6af86.png

textarea

文本域,cols列 控制宽 rows行 控制高 一般用css控制宽高

506df4ba9bb202cf6e064113c7e8944d.png

e0f918b6939cdbd5acb178dbe5b4973a.png

table

ca84a6f5473acf1d2adaa44dd017192c.png

3fba39e6ed5310aa5d0ea4d8e7fdb8b6.png

加上colgroup表格列属性 col表示每一列的属性

74b2ab1ab08782076642ca39768c9de4.png

e2a690087206d1600b945d1b38b4ddfd.png

转载地址:http://kzfma.baihongyu.com/

你可能感兴趣的文章
18年秋季学习总结
查看>>
Effective前端1:能使用html/css解决的问题就不要使用JS
查看>>
网络攻防 实验一
查看>>
由莫名其妙的错误开始---浅谈jquery的dom节点创建
查看>>
磨刀-CodeWarrior11生成的Makefile解析
查看>>
String StringBuffer StringBuilder对比
查看>>
bootstrap随笔点击增加
查看>>
oracle 中proc和oci操作对缓存不同处理
查看>>
[LeetCode] Spiral Matrix 解题报告
查看>>
60906磁悬浮动力系统应用研究与模型搭建
查看>>
指纹获取 Fingerprint2
查看>>
面试题目3:智能指针
查看>>
flask ORM: Flask-SQLAlchemy【单表】增删改查
查看>>
vim 常用指令
查看>>
nodejs 获取自己的ip
查看>>
你好,C++(16)用表达式表达我们的设计意图——4.1 用操作符对数据进行运算...
查看>>
18.3 redis 的安装
查看>>
jdbc 简单连接
查看>>
Activiti 实战篇 小试牛刀
查看>>
java中的Static class
查看>>