前端必备技能（一）-常用html标签介绍

言：在各类网站论坛上,没有找到与工作比较贴切的技能,所以特此写一些对刚步入工作或者工作中没有重视的技能与问题,各位大牛请及时关闭文章.

ps：即使你是一个后端工程师,前端必备技能的学习一样很重要,虽然我不是特别牛逼的前端,但常用的前端知识还是略懂一二的,我的文章内容是希望让已经步入工作但尚未"修炼升仙"的同学们得到一些帮助,纯属个人原创见解,若不正确,请各位批评指正.

HTML4常用标签

标题图

为什么不介绍HTML5标签呢,因为呢,我们现在工作中所做的项目还需考虑兼容性问题,目前还没有完全普及HTML5,所以我们还是把HTML4中的常用标签熟悉起来才是重中之重

下面我根据功能分类介绍常用的标签(我只介绍没有兼容性问题的并且十分常用的标签,非常用标签一律不介绍,我相信工作中你也用不到)

1.基础标签

基础标签示例

上图代码的效果图如下:

效果图

总结基础标签:

html:我们页面的总包商

head:头部定义一些总体内容,比如浏览器标题,编码格式,样式文件引用

title:定义浏览器标题

meta:定义关于 HTML 文档的元信息,诸如例子中的编码格式,IE渲染模式(可以解决大部分IE兼容问题)

link:链接外部资源,如上图中链接浏览器标题旁的小图标,也经常用来链接css样式文件

style:在标签内定义css样式

body:我们肉眼看到的内容显示区域

script:在标签内定义js代码

br:换行符

h1~h6:不同字体大小的标题标签(块元素,什么是块元素?下篇文章详细介绍)

p:段落标签(块元素)

hr:水平分割线(块元素)

了解了基本元素,你就已经可以画一个简单网页了,但网页可能很单调,所以请继续阅读

2.格式标签

格式标签

上图代码的效果图如下:

效果图

总结格式标签:

b:字体加粗(行元素,什么是行元素?下篇文章详细介绍)

strong:字体加粗,同b标签(行元素)

blockquote:引用标签,如果你的页面中需要引用一些文章内容时,使用该标签(块元素,细心的同学已经发现了块元素与行元素的一点区别了)

del:删除标签,标记废除的内容,通常用来标记原价,而优惠价则正常显示(行元素)

ins:下划线填写标签,标记可变的内容,或需要输入的内容(行元素)

em:斜体标签,用来强调(行元素)

i:斜体标签,同em(行元素)

看到这里,说明你确实想好好学习html,小编已经将工作常用的标签都罗列了出来,所以你不再需要通篇的阅读w3c中的内容,有了对格式标签的了解,你就可以编写一个携带样式的网页了,但你的网页可能缺少与用户的交互,那么请继续坚持阅读下去吧

表单标签

上图代码效果图如下:

效果图

总结表单标签:

form:表单包裹标签,里面的内容一般都是表单元素,通常结合table一并使用(块元素)

table:表格标签(table比较特殊,单独属于table元素,效果与块元素差不多)

thead:表格头部

tbody:表格主体内容部分

tr:表格行

th:表格单元格,一般用于显示标题,默认加粗样式

td:表格单元格,一般用于存放信息或输入框

input:各类表单输入元素,如上图中的输入框,单选框,复选框,隐藏的输入框以及按钮(行元素)

select:下拉框,比如用于选择省市区,民族等(行元素)

textarea:多行输入框,一般提供给用户输入简介,理由,多行文本等(行元素)

label:表单的提示信息,一般还用于包裹单选框,复选框使用,让用户点击文字也能实现勾选,即点击上图中的男,女文字一样可以勾选文字前面的勾选框(行元素)

学会了表单元素,我们就可以与用户互动了,让用户能够在我们网页中输入信息以及点击按钮,但我们的网页还不够丰富,我们继续介绍其他常用的标签

图像,链接,列表,通用标签

下面我们把其他常用的标签一并进行介绍

其他标签示例

上图代码效果图如下:

效果图

1.图像

img:图片标签,这个很简单,就是引用一个图片资源进行展示,如上图展示百度的图片(行元素)

2.链接

a:超链接标签,点击a标签包裹的内容,即可跳转到我们事先定义的网络路径,如上图中点击百度图片则可跳转到百度的网址(行元素)

3.列表

ul:无序列表标签,内部只能是li标签(块元素)

li:列表项内容标签,包裹在ul中

dl:全称definition list,定义列表,即有一个标题,有一些解释信息的标签,如上图中的北京是标题,下面两行是解释(块元素)

dt:结合dl标签,一般用于显示标题

dd:结合dl标签,一般位于dt下面,用于解释dt包裹的标题内容

可能有同学会问:还有个有序列表呢,我想说:有序列表实在太丑,已经被淘汰,所以小编只介绍我们工作中可能用到的标签,不常用以及不推荐使用的标签不作为本文重点

ul与dl的应用场景区别:

总的来说:

ul适合样式类似的列表,如导航栏,新闻列表等场景,如下图:

ul场景

dl适合有一个标题的列表场景,如下图:

dl场景

4.通用标签

div:最典型并常用的块元素

span:最典型并常用的行元素

这两个最常见的元素,小编最后才介绍是有深意的,正因为他们经常用,所以我们更需要了解其他的标签,而不是一味的使用这两个标签实现所有的页面展示效果,我们应该使用最合适的标签展示对应的效果,这也是为什么上面着重介绍了ul与dl标签

结尾总结:

由浅入深的理解与熟悉小编列出的所有常用标签,如有缺失,请留言评论
认真琢磨各标签的应用场景,而非全部使用div与span(这样才不枉费小编的辛苦总结,哈哈)

次我们展示多个图标动画特效！上次有人在问，为什么不写 font-family，就调用不了图标。很简单，你在 @font-face 中，指定 font-family 名字为 'FishC-icon';

@font-face {

font-family:'FishC-icon';

src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');

}

那么在伪元素中就要告诉脚本，劳资就用'FishC-icon'里的图标！

这次因为有多个动画对象，所以用延迟参数形成动画序列，先写 5 个 div 吧

<!DOCTYPE html>

<head>

@font-face {

font-family:'FishC-icon';

src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');

}

.icon{

display: inline-block;

margin-right: 33px;

}

.android::before{

content: "\e65f";

font-size: 66px;

font-family: 'FishC-icon';

}

.app::before{

content: "\e660";

font-size: 66px;

font-family: 'FishC-icon';

}

.page::before{

content: "\e64d";

font-size: 66px;

font-family: 'FishC-icon';

}

.show::before{

content: "\e647";

font-size: 66px;

font-family: 'FishC-icon';

}

.victor::before{

content: "\e648";

font-size: 66px;

font-family: 'FishC-icon';

}

</style>

</head>

<body>

<div class="android icon">Android</div>

<div class="app icon">Apple</div>

<div class="victor icon">Victor</div>

</body>

</html>

效果图：

此时由于没有隐藏文字，这是上一讲的点睛之笔，有兴趣自己去找。但不同之处在于此处的图标都设置为“inline-block”，使之能够横向排列。现在修改样式

.icon{

display: inline-block;

cursor: help;

width: 111px;

height: 111px;

font-size: 0px;

line-height: 100px;

border-radius: 50%;/*圆框*/

background:#7FE;

color: #000;

text-align: center;

animation:move 1s

}

效果图：

例如，使图标位置向下偏移 -100%。

然后在向上移动回到初始位置，此过程中让图标从完全透明化变为完全不透明。

@keyframes move{

from{

opacity: 0;

transform: translateY(100%);

}

to{

opacity: 1;

transform: translateY(0%);

}

效果图：

利用 transform 属性的 translateY 方法来实现图标的向下偏移。

然后使用 opacity 属性设置图标的透明度，0.0 （完全透明）到 1.0（完全不透明）。

由于未设置单个图标的延迟，所以一下子 5 个同时出现。

既然提到了延迟，那就设置一下咯～

使用 animation-delay 属性设置延迟：

.android{

animation-delay: 0s;

}

.app{

animation-delay: .3s;

}

.page{

animation-delay: .6s;

}

.show{

animation-delay: 1.2s;

}

.victor{

animation-delay: 1.5s;

}

效果图：

光这么直棱棱也不好玩。

然后我们自己设置贝塞尔（cubic-bezier）速度曲线，达到不同速率节奏效果 ～

假设你穿越成功，会看到：

拖动粉点（起始点），蓝点（终点）即可以生成坐标。

生成的结果为 cubic-bezier(.86,.15,.18,.9)。

.icon{

animation-fill-mode: both;

animation: move 2s cubic-bezier(.86,.15,.18,.9);

}

效果图：

其中 animation-fill-mode 属性用来属性规定动画在播放之前或之后，其动画效果是否可见。。

设置完成后，防止图标闪现。

学习HTML5开发培训，到重庆千锋教育，千锋重庆HTML5开发培训怎么样？千锋提供两周免费试听课程，欢迎你来试听。

果图：

我这里用的是图标代替，图片也是一样的。
最关键的是：:render-header=“renderHeader” ，他是将列标题替换为其他内容。
话不多说，代码来了！
HTML：

   <el-table-column 
	   prop="xxx" 
	   :render-header="renderHeader" 
	   label="锁" 
	   width="55" 
	   fixed="left"
   ></el-table-column>

JS：

methods:{
    renderHeader() {
      return(
        <i class="el-icon-lock"></i>
      )
    }

注释：

prop=“xxx” 是字段名

:render-header=“renderHeader” 将列标题替换为其他内容

label=“锁” 列标题，加了上面那行代码这行可以不加

width=“55” 列宽

fixed=“left” 固定定位，当表格有很多列时，出现x轴滚动条，往右滑，这列会固定在最左侧，不会被页面遮住。

如果想要换成图片，return里面换成图片就可以了。

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点点关注点点赞收藏 ?留言呐~，谢谢 ~ ~

在线咨询

上一篇：如何将WinCC报警消息通过语音进行播报
下一篇：什么是a站、b站、c站、d站、e站、f站、g站 …z

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端必备技能（一）-常用html标签介绍

1.基础标签

2.格式标签

表单标签

图像,链接,列表,通用标签

您的项目需求