注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

【引用】自己动手熟悉HTML5新标签(1)  

2011-10-12 17:39:37|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
自己动手熟悉HTML5新标签(1) - 新松 - 新松
 
来自:懒猪儿(猪儿不懒)

说起来我也是刚开始学习HTML5,都从最简单的入手,在网上找了半天资料,发现都是理论性的多,上次好不容易找到个结合例子讲解的,现在却找不到了。那还是自己看别人网站代码结合资料布局一个超简单的!(就是把几个图切出来,其实上没用到文字!自己动手熟悉HTML5新标签(1) - 新松 - 新松),希望有兴趣的朋友一起讨论,学习!在HTML5方面我也是初学者,希望多多指教!

自己动手熟悉HTML5新标签(1) - 新松 - 新松另外,和我一样的新手们,请记住,我们现在是HTML5 请你不要拿IE6 7 8 来看,如果是用IE请使用9以上版本,另外在国内的话,推荐还是用FF和Google Chrome最新版本查看效果!

在下载文件之前,请安装DW CS5和HTML5+CSS3的扩展!当然啦,想使用其他HTML5编辑器,我也不反对!那么开始吧,先下载文件:http://vdisk.weibo.com/s/MBrD

下载解压后,打开HTML文件。现在我们开始查看代码!如果觉得太简单的,你别喷,这样子做对于入门学习有好处的!

请看head以上部分!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5练习</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
有没有发现头上部分代码比以前少了好多,这个我也不多讲了,只要你在DW中新建HTML5就会自动弄好啦!我们最关心的就是body部分!

我还是使用盒子布局方式,一个套一个的。

<div class="wrapper">外围控制整体布局宽度!div就不说了,你懂的!

<header>HTML5中的新标签。定义页头内容!比如LOGO,和主菜单之类的!

<nav>HTML5中的新标签。定义导航内容!比如菜单与所浏览页面的导航!

<section>HTML5中的新标签。定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分!
<section>和<aside><article>有联系!但是这里我没有使用到后边两个,等以后再写吧!想了解的同学可以看看

<footer>HTML5中的新标签。定义页面的脚部信息!就是大家伙以前做在网页最底部的一些信息,就像版权这类的!

这个例子真的是非常简单,代码也非常少,这样子大家看着也方便点,不用找来找去的。

这个就算结束啦!这真的是非常非常入门的东西,也不知道我写得有没有不对的地方,请高手多指点。要喷的请你轻点!

总结:其实HTML5就是在常使用的HTML4进行了加强,大家别觉得太难,我们就是在原来基本上再增加一些知识!一步一步的慢慢学!一起进步,还有别光看,一定要自己动手练习才能明白的!
  评论这张
 
阅读(107)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017