注册
登录
前言：在各类网站论坛上,没有找到与工作比较贴切的技能,所以特此写一些对刚步入工作或者工作中没有重视的技能与问题,各位大牛请及时关闭文章. 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标签 结尾总结:
|
| 本文出处： http://www.toutiao.com/a6405904226492743938/ |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
