关于HTML的四个标签之<iframe><a><form><table>

一.iframe标签

该标签是在页面中通过一个小窗口再显示一个页面

1.frameborder="0"  去掉边框

2.name="xxx"跟a标签结合用,在a标签中的target属性填入xxx,则点击超链接后,再ifame框中来显示新页面

3.现代很少使用

二.a标签

即超链接

      1.target属性

            target="_blank"  在新网页打开

            target="self"  在所在页面打开

            target="parent"    结合iframe标签使用 

            target="top"  结合iframe标签使用 

      2.download属性

      3.href属性

            A.a标签的无协议绝对地址,自动继承协议:

href中填写qq.com,点击超链接不会跳转到QQ界面,因为不知道是什么协议,因此我们在命令行里输入npm i -g http-server然后再输入http-server,得到的IP地址输入到浏览器中加上/文件名,就可在浏览器中预览该文件,且href中填写//qq.com也可正常跳转到QQ网页,因为命令行中输入的就是让它按照当前协议的来。

            B.a标签的相对路径:./xxx.html

               #sss  锚点 页面内的跳转 所以不会发起请求即GET

               ?name=zhousil

            C.javascript伪协议:javascript:;    用a标签,但是点击后不想让它跳转和任何反应:如果是#号的话页面会动,比如跳转到页面顶部,因此只能写成javascript:;     即伪协议

               javascript:alert(1);       点击超链接后直接跳转js

三.form标签

与<a>标签的不同:<a>标签发起的是GET请求即获取内容,form标签发起的是POST请求即上传内容

        1.<form>需要设置一个按钮(type="submit"),否则无法提交;

        2.主要是用来发起POST请求的,响应暂时不管。 (file协议不支持POST),如下:

     (如果method写成GET,  会默认将查询参数写在地址栏里,账号密码都会直接显示出来)

代码

        3.name会被带到第四部分编程key


Form Data里显示

        4.target属性的使用与a标签一摸一样,也可以跟<iframe>的name联合使用

        5.action 属性用来指定请求路径

        6.input:(没有给name属性的<input>,都不会传给服务器)

            A.<input>标签中可搭配<label>标签使用,则点击到文字上就可激活该项,如:

           <input type="checkbox" id="aaa"><label for="aaa">爱我</label>

            但老司机不按照此常规来写,即不用指定id和for来匹配,直接用<label>标签将<input>标签包起来,即:

           <label>用户名<input type="text" name="username"></label>

            B.<button>标签不写type,会默认升级为提交按钮,且该标签可以有子元素,<input>不能有

            C.<input>中的type="button",则只是一个按钮,不能提交,submit才能提交

            D.用户名和密码需要用上name属性,如下:

没有给name属性的<input>,都不会传给服务器

            没有给name属性的<input>,都不会传给服务器

            E.radio : 单选框,必须设定name属性,且设置的值要一致,不然单选框会都选中

            F.select:  下拉列表,其中disabled表示满了不能选了,selected则是默认选择。如下:

代码

             G.<textarea>  是 一个可输入多行文字的文本框,如果要固定框的大小,需要用到css的resize:none

四,<table>标签

        1.<tr> 即table row,代表每行

        2.<th>即table header ,是表头,如姓名,班级,年龄等;<td>即table data,是填写表里的具体数据,如小明,2班,16岁

代码

      <tfoot>可省略,省略后则会依照写的顺序显示

        3.table默认有个边框且很宽,如果不想要,如果用css的border-collapse:collapse;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335