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

您当前位于:HTML5入门准备 ——> HTML5代码书写习惯、代码练习、HTML5案例 - 01

HTML5代码书写习惯、代码练习、HTML5案例 - 01

2015/07/15 13:57:30 | 作者:HTML5学堂(码匠) | 分类:HTML5入门准备 | 关键词:HTML5,代码案例,代码编写

HTML5基本代码习惯与代码练习

HTML5学堂:在书写代码时,代码规范很重要,在本文当中,讲解了基本的代码规范,并提供了代码范例,在初入HTML5时,如果打字速度不够,我们推荐敲代码实例来练习打字。

“最”基本的代码书写顺序

我们练习敲代码必须先把网页文档的基本组成部分写好,再写其他,网页文档部分如图:
一个网页文件的第一步

基本书写规范

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

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

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

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

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

代码实例 - 可以用这个来打字哦~

HTML5 代码练习 - 01
HTML5 代码练习 - 02
HTML5 代码练习 - 03
HTML5 代码练习 - 04
HTML5 代码练习 - 05
HTML5 代码练习 - 06

代码完成后的效果图:

代码效果图

欢迎沟通交流~HTML5学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端