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

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标签

结尾总结:

1. 由浅入深的理解与熟悉小编列出的所有常用标签,如有缺失,请留言评论

2. 认真琢磨各标签的应用场景,而非全部使用div与span(这样才不枉费小编的辛苦总结,哈哈)