HTML 标签小细节

时间:2022-04-05 02:58:33

简书地址:https://www.jianshu.com/p/03a23aa28a34

今天重新学习了一下HTML中标签的用法,补充并记录一下自己新学到的知识。

a中的href

href Contains a URL or a URL fragment that the hyperlink points to.

URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, file:ftp:, and mailto: work in most browsers.

href属性的值是URL,虽然我们一般用URL做基于http协议的网页的跳转,但它的写法上还有一些小细节。

<a href="http://www.qq.com">QQ1</a>
<a href="www.qq.com">QQ2</a>
<a href="//www.qq.com">QQ3</a>

上面是一个指向www.qq.com的a标签的三种写法,那么它们的效果有什么不一样呢?

第一条是最常规的方法,基于http协议,点击即可进入http://www.qq.com的页面。

HTML 标签小细节

第二条点击进去却不行了,显示文件不存在?

HTML 标签小细节

观察一下它打开的url发现是

HTML 标签小细节

也就是说浏览器把www.qq.com当成了当前目录下的文件打开了,而我的电脑上当前目录并不存在www.qq.com的文件,所以才会显示文件不存在。

打开第三个链接时出现了这个file文件的界面

HTML 标签小细节

观察一下打开的url

HTML 标签小细节

这是因为当href的url以//开头时,将使用当前页面的协议打开文件(因为根目录/不存在www.qq.com所以还是显示根目录的file文件)

HTML 标签小细节

当打开http-server后再试一下第三个链接

HTML 标签小细节

成功通过http://127.0.0.1:8083的http协议打开了//qq.com

再试一下第二个链接...

HTML 标签小细节

href还可以给url构造参数查询。

<a href="?name=hello">hello</a>

点击后会跳转到当前url后多了一个?name=hello的url并且生成了一个get请求

HTML 标签小细节

href还可以应用于JavaScript伪协议javascript:

 <a href="javasript:;">Click</a>

作用是生成一个什么事情也不做也没有请求产生的链接。(大雾

之所以不用href="#"是因为虽然它不会产生请求,但是会使页面跳动。不用href=""是因为他会生成get请求刷新页面。


##form标签
> The HTML element represents a document section that contains interactive controls for submitting information to a web server.

form标签主要是用来给服务器发送POST请求的,form里面至少需要一个submit才能发送请求。

form只支持发送POST和GET请求。如果没有更改method的话,它默认还是发送POST请求。

POST

form发送的POST请求中,Content-Type为x-www-form-urlencoded,它表示发送的POST请求的第四部分以键值对&相连的方式存储发送

username=123&password=asd
username=%E7%94%A8%E6%88%B7&password=%E5%AF%86%E7%A0%81

遇到中文后,会把汉字转为16位utf-8编码的3个字节每个字节间&相隔的方式存储。

GET

GET请求对于form来说无意义,当用form发送GET请求时,表单的内容将会作为查询参数发送GET请求。(可以给POST的action构造参数来发送查询参数请求)

HTML 标签小细节

submit和button的提交

一个form必须要有一个发送POST请求的按钮,主要的用法是下面三种

    <input type="submit" value="submit">
<button type="submit">submit</button>
<button>submit</button>

label

form中我们一般使用label搭配别标签使用以实现点击文子既可以激活。

    <input type="text" name="username" id="us">
<label for="us">用户</label>
<input type="checkbox" id="wm" name="fruit">
<label for="wm">西瓜</label>

HTML 标签小细节

这样点击用户即可开始输入,点击西瓜即可勾选。不过一般都是嵌套使用,节省了写id的烦恼

    <label>用户<input type="text" name="username"></label>
<label><input type="checkbox" name="fruit" value="wm">西瓜</label>