码迷,mamicode.com
首页 > Web开发 > 详细

HTML 学习总结 6

时间:2015-03-28 18:36:31      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

1、下面是我们应该知道的主要的语义标记符:

  <header>定义网页片头后其他头部信息。通常王章所有网页的头部都是相同的

  <footer>定义网页底部的文字,例如版权信息或联系方式等。通常,网站上的所有网页的底部应该具有相同的信息;

  <arcticle>第一一篇文章、故事或者消息的一块文字,文章可以区别于其他文本,它们从逻辑上来说是独立的,例如,在一个新闻网站,每篇故事都是一篇文章

  <aside >定义主题之外的文字,像注释、提示或者警告。aside有别于其他文本,他们可以从主要文件中抽取出来并删除,而不影响主要文档。

  <section>定义普通的内容或应用区域,比如是书中章节或者一篇论文的各部分,网站首页可以分文几个区域,例如:介绍、新闻、联系方式等。区域以例如<h1>这样的标记符                     开始后面跟着内容,如果要定义的区域包含文章或者网页的纲要,就是用<section>标记符,这是一种基本规则。

2、 创建区域:

  我们可以使用id属性为一个区域命名,就像这样:<div id="masthead">,每个ID在一个文件中必须是唯一的,但是多个文件可以使用同样的区域名,这样的重复使用实际上  非常有好处,因为你可以定义一个样式表来定义多个文件的格式。

3、创建HTML5语义布局

  可以根据文本的用途来选择合适标记符,从概念上讲,这和使用具有id属性的<div>标记符一样,但是标记符本身提供了文本含义。例如:你可以使用<header>标记符来代替

  <div  id="masthead">将相应的结束符改为</header>

4、区域定位

  有两种方法可以给区域定位   悬浮样式规则(float style rule)或者使用定位样式规则。

  例如,为了使导航栏悬浮在主题 文本的左边,你可以将导航栏区域设为特定的宽度(150像素),然后像下面这样将它悬浮于主题的左边:

   <div id="topnav" style="width:150px;float:left">

   在样式表中,需要在区域这样的唯一元素名字前面加一个井号#,就像下面这样:

   #topnav{width:150px;float:left}

5、在网页中定位区域:

  如果将一个区域放在网页中的特定位置,可以使用定位(position)格式规则,它有三个可选值:

  Position:absolute   这个值定义了父元素的固定位置。父元素通常是<body>标记符,除非元素存在于其他标记符中,在这种情况下,该元素相对于网页上左上角的位置是固             定的

   Position:relative    这个值定义了相对于元素自然位置的偏移值,即使新的位置造成了元素重叠,网页其他元素也不会受到影响。

   Position:fixed       这个值定义了浏览器窗口中的固定位置,即使显示结果或者向下滚动,这个位置也不便变,微软的IE浏览器不支持这个设置。

  例如:如果想将一个main区域准确定位在距离上面100像素,左边200像素的位置,可以创建下面的格式规则:

  #main{position:absolute;top:100px;left:200px}

  如果用<nav>标记符,可以向下面这样,

  nav{position:absolute;top: 100px;width:150px}

  定位样式规则在定位的时候考虑到网页中的其他元素,这样可能会造成元素重叠而影响网页的美观,不过也可以右移这样做来创建重叠元素,例如可以用这个功能将文本重叠在  图像上

6、

 

HTML 学习总结 6

标签:

原文地址:http://www.cnblogs.com/MyBlog-Richard/p/4374513.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!