HTML 学习总结 6
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、
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。