那些你不知道的HTML标签
原文链接： 那些你不知道的HTML标签
有人说HTML很简单，都不能称得上是一门语言，以前我也这么认为的，不就是一堆标签按一定规则组合嵌套摆放，后来工作一年多才发现HTML还有很多细节需要经验积累后才知道，如何将h5的新标签以更符合语义化的形式替换万年DIV也需要写过很多页面才能理解。且配合css的样式产生的若干种布局方式，居中方式，以及配合js产生的HTTP通信方式、跨域方法、DOM操作等功能，才发现HTML其实很强大。放下偏见的心态，仔细回顾HTML的很多东西，发现很多需要记录保存的东西，特地整理了这么一篇博客。
1. 你不知道的iframe标签
首先在HTML规范中，iframe标签主要用在需要独立的浏览器上下文时，因此iframe具有完全隔离的css 和 js 的功能, 但又可以使用 contentWindow和parent 来通信，松耦合又不失灵活。且配合a标签的target属性，可以实现用父级控制子级窗口内容的切换：
百度一下
12
另外神奇的iframe还可以解决跨域问题，且有两种办法，这里不多赘述，可以直接点击链接查看具体的实现方式和原理：
在实际工作中，常见的iframe主要用在：
沙箱隔离，如jsbin这类代码展示应用。
引用第三方内容，例如在网站中展示第三方广告。
独立的带有交互的内容，比如幻灯片。
需要保持独立焦点和历史管理的子窗口，如复杂的Web应用，例如qq邮箱。
2. 你不知道的a标签
a标签作为html最核心的一个标签，承担着页面跳转的作用，其中a标签的属性target除了上面说到的可以控制iframe的内容跳转，它还具备四个属性：
_self target属性的默认值，即在当前页面加载href指向的内容。
_blank 在新窗口打开。
_parent 这个属性如果没有parent框架或者浏览上下文，此选项的行为方式和_self相同，而在iframe中使用，则在当前页面的父级页面打开新内容。
_top 这个属性和_parent类似，但在多层iframe嵌套时，无论多少层都会在最顶级的页面打开新页面。
除此之外，a标签还有一个是很多人都没有用到过的h5属性download：
下载文件
1
这个属性的作用就是让浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。一般在网站中具有下载文件功能的链接或链接按钮上使用。一般后端会在需要让用户下载的文件链接上加一个http响应头Content-type: appliction/octet-stream，这样无论a标签有没有download属性都会下载文件。
另外，在a标签中，最重要的href属性也有很多细节需要注意：
除了相对路径以外，href属性都要给定链接的协议，如http://、file://、ftp://、mailto://、phon://等，这样浏览器就会按各自协议的方式打开，如果不加协议，浏览器就会当做相对地址来打开：
无协议链接
1
href也可以使用自适应协议//www.baidu.com，这样浏览器就会自动根据链接所在页面的协议打开，这个操作常用在升级https的网站上
在使用相对路径时，href只以目录为参考，忽略文件
在href使用#锚点时不会发起请求，只滚动页面
另外除了常用的协议以外，还可以使用伪协议，如可以让a标签不做任何操作的伪协议：javascript:;
3. 你不知道的form标签
form标签是日常开发中很常用的一种标签通常要喝若干种表单元素配合使用，来收集用户的信息到服务器。
而在和服务器交互的过程中，有很多点是以前没注意到的：
form标签内容如果没有submit类型的input或者没有submit类型的button，表单是无法被action到指定url的。还有一个细节是假如两个都没有，只有一个什么type 都不指定的button时就会自动提升为submit类型的button，且点击时会进行action动作。
点击a标签浏览器默认会发起GET请求，而在form标签中，通常使用POST来进行和服务交互。
GET请求的form会将参数以URL参数拼接，POST会在请求的第四部分即空行后面添加并发送。
http默认都是以明文传输的，除非使用SSL进行https传输。
如果不设置form表单的enctype属性，那么fform表单的数据就会以Content-Type：application/x-www-form-urlencoded的方式提交数据。请求体的内容就会变成，中文会变成Unicode转义字符，每个字符以%分割：
POST http://www.example.com HTTP/1.1Content-Type: application/x-www-form-urlencoded;charset=utf-8title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
1234
method方法仅支持GET和POST，不支持PUT、DELETE等方法
在写表单的时候经常会出现需要点击文字的时候响应表单，一般都会使用lable加for属性来绑定input上的id，但老司机会省去绑定的这一步，直接在label中包裹input，浏览器会自动绑定：
男
123
textarea标签是默认可随意拖动大小的，可以给css属性禁用拖动大小：
textarea{resize: none;}
123
4. 你不知道的table标签
在前端还没有正式火起来的08年以前，页面最常用的布局方式就是Table布局，但是随着div+css的火热及自身本来就存在很多问题，已经逐渐被淘汰，到现在为止，table在前端开发中，只用来做数据表的展示。
而在h5中，table有了更加符合语义化的子标签：
111
12345678910111213141516171819202122
thead/tbody/tfoot这三个标签在table中顺序可以随便写，但是浏览器解析的时候会自动按head、body、foot的顺序渲染，如果有一个没写，浏览器会帮你补上
colgroup 这个标签很多前端都没听过，每个col代表一列，在这个标签上加的样式会自动按顺序复用在表格的每一列上，如width
如果给表格一个border，表格的边框间会有一定空隙，可以给表格一个css样式，让空隙消失：
table{border-collapse: collapse;}
123
5. 参考文章
网友评论