前端技术分享-码匠 极客编程技术分享

您当前位于:HTML5入门准备 ——> HTML5代码打字练习、HTML5案例 - 02

HTML5代码打字练习、HTML5案例 - 02

2015/07/16 14:05:38 | 作者:HTML5学堂(码匠) | 分类:HTML5入门准备 | 关键词:HTML5,代码案例,代码编写

HTML5代码打字练习2

HTML5学堂:在书写代码时,代码规范很重要,在本文当中,提供了代码范例,希望初入HTML5的孩纸们,如果打字速度不够,可以通过敲代码实例来练习打字。一方面能够提升打字速度,另一方面也能够更熟悉代码规范。

基本书写规范

标签有开有关,成对出现。例如<div></div>,表示的是一个div标签,<div>表示div标签的开,而</div>则表示一个标签的关。

在HTML5当中,也存在单标签,即有开无关的标签,但是大家使用到单标签的种类并不多,主要包括<meta><link><img><input><hr>等。

代码部分的中英文选择方面,需要使用英文,并且均为小写。

标签和标签时存在一定的关系的,有些标签是父子关系(此处就是我们说的嵌套),有些是兄弟关系。在HTML当中为了表示层级关系,每个级别的标签都要比上一个级别的标签缩进一个tab的距离(一个tab ——> 按下一下tab键),注:每个tab键是4个空格宽度。

在书写代码时,还需要注意行号,由于编辑器的宽度原因,有些代码会被挤下去,但是根据行号显示,还是同一行。

合理书写注释。

代码的显示效果

横向 圆环

纵向 圆环

代码实例贴图

CSS3圆环 代码段01
CSS3圆环 代码段02
CSS3圆环 代码段03
PS:96行为空行,截图时没有截好,不好意思。
CSS3圆环 代码段04
CSS3圆环 代码段05

在完成代码之后,各位也可以根据JS函数中的具体注释,来调整参数值试试看,能够有很不错的效果哦~另外,拖拽浏览器窗口也能够让圆环发生变化。PS:请使用谷歌浏览器,IE浏览器由于不支持三维变形,因此这个效果在IE浏览器下是不行的。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端