HTML 标签小细节

简书地址：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的页面。

二

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

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

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

三

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

观察一下打开的url

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

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

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

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

四

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

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

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

五

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构造参数来发送查询参数请求）

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>

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

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

    <label><input type="checkbox" name="fruit" value="wm">西瓜</label>