博客地址：http://www.globm.top/blog/1/detail/36

a 标签在点击之后会聚焦自动出现虚线框？
解决方法：

1.css 处理方式
a{
    outline:none;
}

2.添加监听事件，自动失去焦点（不推荐）
<a href="#" onfocus="this.blur();"></a>

3.行内处理样式
<a hidefocus="true" href="#"></a>

标签在新的选项卡中打开链接
<a target="value">





值
描述




_blank
在新窗口中打开被链接文档


_self 	默认
在相同的框架中打开被链接文档


_parent
在父框架集中打开被链接文档


_top
在整个窗口中打开被链接文档


framename
在指定的框架中打开被链接文档


vue打开新页面：
 let routes = this.$router.resolve(
 	{
 		 path: '/position/recruit/job/desc',
 		 query: { id: row.id }
    }
 )
 window.open(routes.href, '_blank')

由于需求需要在a标签里面再嵌套一层a标签：
<a href="javascript:;">
    father tag A
    <a href="javascript:;">Child tag A</a>
</a>

结果样式乱了套，一看，耶？明明是父子关系，浏览器解析的结果却是：



一番查阅：a标签嵌套a标签，浏览器会自动添加结束符号。

而HTML的嵌套规范里就有一条：a标签不能嵌套a，查看更多嵌套规范

解决办法：

换标签

hhhhh~，简单粗暴。
我就想用a标签，不能接受换标签

（1）使用object标签进行嵌套

<a href="javascript:;">
   father tag A
  <object><a href="javascript:;">Child tag A</a></object>
</a>

定义一个嵌入的对象，浏览器解析结果：



<object>浏览器支持：



IE8及以下不支持object标签。

（2）蠢办法

父元素设置display: block;或display: inline-block;并设置宽高和position: absolute，调整内外a标签的样式，调整层级关系。如此只能达到满足效果，浏览器解析依然不是嵌套关系。

又要坚持a标签又要兼容IE8还要是嵌套关系，无法了(▼ヘ▼#)~~~

在控制台中可以看出img的宽度是22*22,a标签的宽度是22*16。 

(1)那么为什么a标签嵌套img标签，结果a标签不能被img标签撑开？？ 

答案1：img标签放在了a标签(inline模型)内部，由于inline不是用来包含内容的，因此这需要将a标签display改为inline-block或者block，a标签就可以包含img标签了，此时会引起问题（2）；

(2)还有a标签嵌套img标签，a标签比img标签高？?

答案2： 

img标签放在了a标签(inline模型)内部，由于inline不是用来包含内容的，因此这需要将a标签display改为inline-block或者block； 

但是仅仅改变display并不能解决问题，因为img在a中垂直对齐方式也就是vertical-align默认值为baseline，所以img最垂直对齐时是按照a的基线对齐而不是底线； 

该问题产生的关键就是垂直对齐方式，基线与底线间存在空白，如何消除空白

解决办法

1.a{ display:inline-block或者block; line-height:0px或者font-size:0; }

注：line-height的值默认是按照font-size的值乘以一定比例计算得来

line-height设置为0时，基线与底线间距离为0，空白消除

2.img{ vertical-align:bottom }

对齐方式设为底线，而不以基线对齐，也消除了空白

作者：LOVE小狼 

链接：http://www.jianshu.com/p/e337d07bc101 

來源：简书 

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Input标签和a标签

开发工具与关键技术：DW  前端：HTML （input标签和a标签）

作者：何秋萍

撰写时间：2019年1月17日


input 标签不同的类型可以有不同的效果，使用input标签和使用a标签设置同样的效果时，input标签更加法方便，而且代码简便，而使用a标签时，需要敲打的代码比较多，而且得到的效果也会比较差，下面是input标签常用的类型：
input

type=“text” ：代表的是文本输入框    input

type=“submit” ：代表的是提交按钮
input

type=“file” : 代表的是文件类型        input

type=“checkbox” ：代表的是多选input
input

type=“radio”：代表的是单选，前提是要同名. 下面举一个例子来看看它们哪个更方便:
要求：点击时实现单选效果
input点击时实现单选效果，则需要选用input type=“radio”：如果想要点击字体就能够实现选择的效果，则需要在该字的标签中加上for="按钮 对应的id "。如下图1：



图1
a标签点击时实现单选效果，则需要javascript或者jQurey来实现，下面将会使用JavaScript来实现效果.   a标签的HTML代码如图2；JavaScript代码如图3：



图2



图3