做网页的时候经常要实现一些类似于标签的标识，这时很多人会使用图片去实现，当然这是一种做法，还有另外一种做法就是利用CSS3的属性来实现该效果！下面看看效果图：

要实现该效果原理就是右边定位一个三角形，然后下面的夹角也是定位一个小三角形就可以实现如图所描述的效果！

下面来看看简要的代码：

html:

主要CSS：

主要通过css伪类来添加2个三角形的效果，实现标签效果！

文章介绍了html标签里的input标签和label标签的美化效果！效果图如下：

用在复选框中选择，个性化了复选框的默认样式，增强用户体验！

实现方法也非常简单

下面看看代码

html:

css:

篇文章继续为大家介绍html常用修饰标签介绍。我们今天主要说下样式标签<span>、内容修饰标签<b><i>等的语法以及使用技巧。

1）样式标签<span>

使用语法：<span>文章内容</span>

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。如果现在我们想要修改一篇文章中的几个字字体效果，为它设置和其它文字不同的样式，所以这样情况下就可以用到<span>标签了。比如我们设置字体颜色为蓝色，并设置字号大小为30px，代码如下图所示：

代码在浏览器中显示的效果就如下图所示：我们可以清楚的看到被span标签包裹的文字内容已经变成了蓝色，字体大小也变成了30px；

2）内容修饰标签

内容修饰标签有很多，这里我们简单的来列举一下标签的名称以及标签的作用。

文字斜体标签： <i></i>、<em></em>

文字加粗标签： <b></b>、<strong></strong>

文字下标标签： 

文字上标标签： 

文字下划线标签： <ins></ins>

文字删除线标签： <del></del>

具体的代码如下所示：

代码在浏览器中显示的效果就如下图所示：每个被标签包裹的内容都赋予了其独立的效果。

好了以上就是我们所说的修饰标签，每个标签都有单独的意义，在以后练习的时候可以自己多实践一下，只有自己亲自动手去写了才能明白其中的含义以及效果。

附赠一句经典语录：每一天，都要尽心尽力的工作，每一件小事情，都力争高效的完成，不是为了看到老板的笑脸，而是为了自身不断的进步。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。