初识html5之基本html结构

原创 2016年08月29日 19:27:32

先上代码再说说学习的一点疑问

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<header role="banner">
<nav>
<ul>
<li><a href="#girl1">the first girl</a></li>
<li lang="es"><a href="#girl2">the second girl </a></li>
<li><a href="#girl3">the third girl</a></li>
</ul>
</nav>
<header>
</body>
</html>

这段代码就是复习了以下之前学习的li 记得是列表项 至于这个ul百度了以下说是无序列表感觉就和java里面的set 一样,应该也有一个有序的把,好吧这不是重点。

body里面的主体是<header>,这个就是一个顶部的标题栏(书上说是一个页眉)还有一个对应的footer与之相呼应。role是它的属性role="banner"书上说它显示的指出该页眉

为页面级的页眉,我去,感觉像没说一样,据说可以提高访问性,反正我是一脸蒙蔽。这个地方暂时先忽略把

 

<nav>是一个导航栏,上一篇里面的header,nav,article ,footer四大部分是分开的,没想到这里面header里面嵌套了一个nav,可想而知里面有很多的东西都是可以嵌套的。

补充一点<nav>这个元素不是随便乱用的,只有重要的连接群才会放在<nav>元素里面,在网站建设中应该将一组可以到达网站内部其他页面的链接加上nav,对就是这样的。                                      

<a href="#girl1">以前只是 见过这种写法<a  href=http://www.baidu.com></a> 里面是一个url 大家都知道,可是很显然这个#gril明显不是一个url 看了一下书籍后面的内容

有这样一组代码

<article id="girl1">the first girl is beatiful and clever ,but she don't like you .you like her</article>
<article id="girl2">the second girl is not so beautiful but you has many words say to her ,she like you ,but you like the first girl</article>
<article id="girl3">the third girl is not so beatiful ,and  you don't has the same words with her ,she is your wife.</article>

 

article里面的东西引用了上面的href里面的值,可以看出当点击链接的时候会跳转到这里,应该是文章内的一种内部链接把,这里再来详细说说<article>这个元素把,在我的理解中article就是一个网站的主体部分,内容部分,书上说:article 元素表示文档,页面,应用,或网站中一个独立的容器(它说是一个容器不就是div吗,是不是什么都可以放)原则上是可以独立分配或者再使用的,它就像聚合内容的各部分,它可以是一篇论文帖子,一篇杂志,或者一个交互式的小部件或者小工具(还可以是一个交互式的工具有点神啊)刚刚学习的时候还是有很多不明白的地方,不过不能专牛角尖,很多东西学到后面就能明白了。

后面还有一个<main>元素,不能将main 放置在article,aside,header,nav这些元素中,也就说它是独立存在的,是不能够被嵌套的。而且每一个页面只能显示一个main元素,类似Java的main函数一样,唯一性。                                         

后面还讲了一个section 元素我就不上代码了这些都是一些简单的语法 就是用于分类的。

还有一个<aside>元素是一个附注 栏,什么意思呢,就是与主题内容联系不大的,类似广告的那些东西把 aside元素一般都是在article元素的外面,提供一些附加的信息,不过也是可以放在artilce里面的,不过一般用的比较少,但是有一点aside元素是不可以不嵌套在address的元素中的,好了今天就写到这里面了,时间不早了,bye!                                                                                                                                                                                                                                                                                                                                                             

版权声明:本文为博主原创文章,未经博主允许不得转载。

初识+HTML5_IT168文库

  • 2012年10月27日 13:48
  • 824KB
  • 下载

初识HTML5(一)

初识html4计算机语言第一次h5的课,老师讲了这个计算机语言由简单的2进制到汇编再到现在的高级语言。包括C 、 C++、 PHP、 Java、 C#等 那我们现在使用的编程语言基本上都是基于Java...

2016.05.13初识HTML5-02

第二天~早上8点上课,12点放学,1点又继续上课。。。真是压缩的实实在在的5天啊,就像吃压缩饼干不喝水一样。哈哈,不过我觉得明天会更累。。因为后天是周天,我要去软件培训,学习Android开发,生产实...

2016.05.14初识HTML5-03

啊~要疯了,别人还要两天时间,而我却要在今天完成三天的任务,现在我正在做网页,一个是QQ邮箱的登录页面,还有一个是211-sun的首页。趁这会休息的功夫写一点日记。看来晚上要熬夜了... 今天所学的...

2016.05.12初识HTML5-01

啊呀~今天本来应该是和朋友出去游玩的,可是却变成了生产实习。。。今年的生产实习和以往有所不同,以往的都是老师带着学生到工厂里转一转糊弄糊弄就过去了。但这一次要改革了,由我们这的一家软件外包公司负责,来...

初识HTML5的WebSocket

众所周知,webSocket是HTML5连接性领域中的一种自然的全双工、双向、单套接字连接。而HTTP从根本上来讲,还是半双工的协议,也就是说,在同一时刻流量只能单向流动:客户端向服务器发送请求(单向...

Html5入门第二篇-初识css

css 是html开发中重要的一个部分,中文释义为层叠样式表,主要作用就是对页面进行渲染美化,通常意义上来讲,可以写一个. css后缀的文件,把对标签样式的设定以特定格式放到这个文件中,然后通过引用调...

【初识HTML5】(4) : 图像

HTML5提供了大量的方法来画图以及操作图像数据。直奔主题吧~1.画图方法的3种不同的参数var canvas = document.getElementById('canvas'), con...

【初识HTML5】(3) : 画布常用的API (1)

本文申明:为了节省时间,Sam偷了个小懒, 大部分例子来源网络,主要是为了方便演示。1.矩形相关clearRect(double x, double y, double w, double h) ...

【初识HTML5】(3) : 画布常用的API (2)

5.路径、描边、填充到目前为止,我们讨论过所见即所得的方法只有两个strokeRect() 和fillRect()。但是在实际的设计中,我们不可能都是一笔到底的,比如AI ,我们都是运用路径在作画,因...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初识html5之基本html结构
举报原因:
原因补充:

(最多只允许输入30个字)