HTML的入门学习(二)

本篇文章主要记录的是自己学习的 HTML 常用的标签。

1、iframe 标签——嵌套页面

iframe这个标签目前用的很少,但是如果有五年前的遗留项目可能就会看到这个标签,主要就是在一个界面里面嵌套一个界面。关于iframe的详细内容有可以参考如下两个网站:

iframe 相关问题:https://www.zhihu.com/question/20653055 。

阅读 iframe MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe 。

一下是我自己关于iframe的学习记录。

 

iframe标签在页面中显示的时候,默认的宽度是100px,高度是50px,也可以在CSS中进行设置宽度和高度。

iframe其中的frameborder表示的边框的样式,默认的样式是带有三维效果的框,不怎么好看,所以一般都会设置为frameborder="0"。

iframe的src属性一般会填写网址 ,表示所嵌套的网页是什么网页,比如src="http://qq.com",那么此时嵌套界面处显示的就是QQ的主页,如果src=”#”,那么这时嵌套界面是一个空的页面,什么都不包含在其中,src还可以是相对路径,比如所编写的网页文档在同一目录下的文件,src="./index2.html",这时嵌套界面显示的就是编辑的index2.html的界面内容。

iframe的name属性和a标签结合起来使用,关于a标签的详细说明在下面进行讲解。

QQ

百度

这就是如何使用iframe和a配合使用的情况,这时在界面出现的QQ,点击后嵌套的界面就会跳转到QQ的页面上。点击百度,嵌套的界面就会跳转到百度的主页。


2、a 标签

跳转页面(HTTP GET 请求)

属性见 MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

2.1 展示界面

对于a标签来说,最为常用的功能就是使用来打开一个界面。

blank_QQ

点击blank_QQ在一个新界面直接打开连接

self_QQ

点击self_QQ在当前界面的一个规定的区域打开链接

parant_QQ

点击parant_QQ在所嵌套的那个区域打开链接

top_QQ

点击top_QQ在最顶层的界面中打开链接,也可以说是在最原始的网页中打开。

2.2 下载

a标签可以用来设置下载功能,比如

浏览器是否能进行相应下载请求,看http相应的Content-type为application/octet-stream时,服务器就会以下载的形式去接收这个请求,而不是展示。如果Content-type为text/html时,想要用户能进行下载,那么就是用a标签进行强制下载。下载,这时,点击界面上的下载按钮就能就行下载了,这时下载的是当前界面的html文件。可以设置为下载安装包等功能。

2.3 a标签的href的相关内容

QQ    href的内容中的”//”表示当前什么协议访问的链接就是什么协议

QQ 此时点击QQ后会跳转到一个相对路径

QQ  href的内容是一个锚点的话,点击之后不会进行跳转。是在当前页面,不发起请求

QQ 此时会发出一个GET请求,但是并没有跳转

href可以写一段伪协议。比如href="javascript:xxx"

警告,点击“警告”就会直接执行js代码

QQ 此时表示的是一个伪协议,点击的时候页面什么都不会动,实现这样的需求的话,如果使用的是QQ命令的话,点击之后页面将会有跳转的情况,a标签必须有herf,不能没有herf,href如果是“ ”也是不行,相当于界面会进行刷新,所以满足这种需求的时候就可以使用href="javascript:;"。

3、form 标签

跳转页面(HTTP POST 请求)

属性见 MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

如果form的表单里面没有提交按钮,将无法提交form,所以form一般都会和input等标签一起使用,form一般都是进行POST请求的。

 

  //method一般都是POST,大小写都可以,

 

 

  //此处就是提交按钮了

 

会出现这样的一个页面布局

除此之外HTML就没有其他的提交方法上传内容,点击提交后此时点开所在网页界面的netbook在第四部分出现的form data上可以看到密码的明文,输入框中的内容如果是英文字母或者键盘上的特殊符号之外的将会出现一个utf-8转码的结果。


需要注意的是file协议是不支持POST的。

//此时会将输入的参数放到查询参数中

比如点击提交按钮后网址输入栏里面将会出现http://127.0.0.1:8080/index2.html?xxx=xxx&sss=qqqq

//这样设置后也可以进行查询参数了,http://127.0.0.1:8080/users?zzz=3

form标签也有target,同a标签的用法一样

比如

 

 

 

 

 

 

这样就可以将提交的内容放到一个嵌入的网页中,也可以正常的使用前面说讲的a标签的target的设置内容。

4、input / button

区别:是否为「空标签」

input 的属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

button 的属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

标签规定了用户可以在其中输入数据的输入字段

    1、 元素在

元素中使用,用来声明允许用户输入数据的 input 控件;

    2、输入字段可通过多种方式改变,取决于 type 属性

这里主要介绍一下label标签。通过以上的form标签进行举例子

 

 

 

 

 

 

如果form表单里面的button标签没有指定type,那么点击按钮之后将会实现的是submit的功能,当使用input标签的时候指定了type之后,定义的按钮就可以进行提交了。Submit是唯一能进行提交form的方式。

哎呀   出现的是一个勾选框,框后面是“哎呀”,点击“哎呀”勾选框就会被选中。

此处另外引出一个label标签的使用方法,具体为:    这样写就可以不用写id,两者就能直接连接起来。


Input的checkbox和radio

checkbox是多选框:

喜欢的水果

这个时候由于name是相同的,所以就可以进行多项选择

radio是单选框:

好吗

此时由于name是相同的,所以只能选择一个,要么Yes要么No,

两者都在form的表单里面时,当进行提交的时候选择的内容就会随着提交的按钮上传到服务器上。

比如

喜欢的水果

好吗

Select标签是进行分组的,和分组标签共同使用的得有option,

没有multiple的时候只能进行单选,有multiple时,就可以多选,按下Ctrl键,进行多选,选择的内容是option标签里面的内容,如果option的中有disable的时候表示不能进行选择,当option中有selected的时候是该选项已经被选中,为空就是value=””.


textarea标签是对于文字进行编辑的一个输入框

来设置长和宽,此处的框是通过列数和行数的大小来确定框的,默认的方法并不准确。

5、table 标签示例

用于展示数据

属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

table标签主要是用来添加表格的。例子如下:

//添加border=1就能显示出表格线

   

      //但是比较生僻,比较少用

     

                         //设置第一列的宽度

     

    //设置第二列的背景颜色和宽度

     

                         //第三列

     

                         //第四列

   

 

   

    

     

   

   

 

 

   

     

   

   

     

   

 

 

   

     

   

   

     

   

 

 

项目姓名班级武力值
张三丰188
秦始皇266
平均分77
总分154

画出来的效果如下:



HTML规定table标签有三个元素,分别是指的是表头、指的是表的主体、指的是表的脚,三者的顺序在代码中可以不分前后,但是将三个元素的表头都删掉了之后,代码中写的是什么顺序,显示的就会是什么顺序。(table row)表示在表中写一行,td(table data)表示写入的内容是数据,th(table header)表示写入的内容是表的标题,写入的内容为空时,就直接留空.

由于以上的表格线之间存在着一定的间隙,可以通过CSS消除间隙,如下所示


到此就结束了本文的学习记录,HTML并非想象中的那么简单,里面的内容还有很多都是需要慢慢学习的,今后的学习过程中还得慢慢积累这方面的知识。

你可能感兴趣的:(HTML的入门学习(二))