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

HTML 学习总结 5

时间:2015-03-28 17:03:30      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

1、创建导航机制

  创建导航栏之前先要设计一个图表,画出网站的结构。这是设计网站的好习惯。

2、创建文本导航栏,是最基本的最简单的导航栏。

  文本导航栏,通常放在网页上的同一水平线上。

3、HTML5中包含一个<nav>标记符,它是一个双标记符。人们可以选择在里面放置导航栏代码,<nav>标记符帮助浏览器和样式表将一组链接识别为导航元素,从而妥善处理。

4、HTML语言忽略多个空格,所以你想在词语空间插入多个空格,同时又不想插入表格或其机构化容器,你需要插入不间断空格码(&nbsp);

    比如:<p>Home &nbsp; Tips and Tricks &nbsp; Problem-solving &nbsp; Projects &nbsp;About our store &nbsop;Contact us</p>

     给导航栏罗哥条目加上超文本链接:

  <nav>

  <hr>

  <p style="margin:0px">

  <a href="index.htm">Home</a>&nbsp;

  <a href="tips.htm">Tips and Tricks</a>&nbsp;

  <a href="problems.htm">Problem-solving</a>

  <a href="prducts.htm">Products</a>

  <a href="about.htm">About Out Store</a>&nbsp;

  <a href="contact.htm">Contact Us</a>

  <hr>

  </nav>

5、创建图形导航栏

  例如:

  <nav>

  <hr>
  <p style="margin:0px">

 技术分享

 

  结果如图所示:

  技术分享

  5、创建图像映射:

   图像映射是将图片的某些区域(热点区域)分配分配超文本链接的分布布局,热点区域可以是长方形,圆形和不规则图形;

   (1)长方形热点区域可以通过两个点来定义:该区域左上角的点和右下角的点,每个点都有一个对数字表示,这对数字代表的是该点到图形左上角的水平和垂直距离(以像                  素来表示;

      例如:

      <area  shape="rect"  coords="284,170,352,314" href="enter.htm">

   (2) 要定义一个圆形区域,需要使用三个坐标,两个是原点坐标(水平和垂直),一个是圆的直径;

      <area shape="circle" coords="270,364,144" href="index.htm">

    (3)要定义一个不规则图形的热点区域,你需要使用多个坐标定义出该图像的所有顶点,不规则区域可以有所有定义的相邻点之间直线连接而成,

      <area shape="poly" coords="287,71,413,286,314,446,188,267“ href=“index.htm">

   (4)要建立一个图像映射,以<map>双标记符开始,在其中加上名字(name)和标识(ID)属性,名字和标识可以相同,名字是在图像映射本身中进行的,需要的话可以通    过图像本身来引用图像。

    例如:

      <map name="moth" id="moth">

        <area shape=""poly" coords="287,71,413,286,314,446,188,267" href="index.html">

      </map>

      和超文本链接一样你可以在<area>标记符中加上title属性,这样,当用用户鼠标停留在上面是,就可以显示屏幕的信息,当区域中没有文本时,这个方法很有帮助,

      例如:

      <map name="moth” id=“moth”>

      <area shape="poly" coords="287,71,413,286,314,446,188,267" href="index.htm" title="Home Page">

      </map>

     最后在<img>标记符中使用usemap属性,为图像引用图像映射的名字,这里在映射名字前必须有一个#号,就像下面这样:

    <img src="moth.jpg" usemap"#moth" style="border:mone">

6、自动跳转到另一个网页:

  通过在网页<head>区域给<meta>标记符添加一个属性,来实现网页跳转。你必须为这个操作创建一个新的<meta>标记符,而不能在文档中已经存在的标记符<meta>标记  符中添加这个属性。例如:要在5秒后将网页跳转到support.microsoft.com,使用下面的代码即可:

  <meta http-equiv="refresh" content="5;url=http://support.microsoft.com">

 

      

     

 

HTML 学习总结 5

标签:

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

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