怎么在DIV加链接？

1.通过window.open函数

<div onclick="window.open('www.baidu.com')">在新窗口跳转至百度</div>

<div onclick="window.open('www.baidu.com','_self')">在当前窗口跳转至百度</div>

2.通过window.location.href函数

<div onclick="window.location.href= 'www.baidu.com'return false">在当前窗口跳转至百度</div>

现在做网页，通常用 div 当作容器。这里可以把一个 div 理解为一个 delphi 的 TPanel。

在 Delphi 里面，可以用 Panel 套 Panel 的方式来布局，然后设置各个 Panel 的 Align 属性。

现在 html5 的网页开发，是拿 div 套 div 来布局。然后用 css 来定义 div 该怎么摆。因此，这里就是多层 div 嵌套。

假设要对某一层 div 做一个链接，点击后会导航到另外一个链接地址。这时候，不能给 div 外面写 <a href="xxxxx">这种代码。如果这样写，会破坏 div 的嵌套框架，搞乱页面布局。

1、强制不换行，同时以省略号结尾。

<div style="width:100pxoverflow:hiddenwhite-space:nowraptext-overflow:ellipsis" >

你好朋友朋友朋友我为什么不能看到效果啊

</div>

2、css自动换行

div{ word-wrap: break-wordword-break: normal}

3、css强制英文单词断行

div{word-break:break-all}

若是div嵌套，要使内层div根据内容自动换行，则可只设置外层的div宽，和 white-spance:nowrap即可。

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行

它们的区别就在于：

1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

大部分html标签都是有＃语义＃的，例如<p>表示这是一个段落，<strong>表示强调，<ul>表示是无序列表。

<div>和<span>是2个无语意的标签，也就是说，他们可以当作一个容器，里面放别的东西。

<div>默认是块级元素，<span>默认是inline元素。

因此，当你需要为一个<ul>加一个父元素以方便更好地布局或者js *** 作，就可以用<div>将其包含起来。

在html5以前，由于没有 header/footer/section/article 这样的语义标签，所以都是用div来布局，以区分不同的页面内容模块。

例如导航：

<div class='main-nav'>

<ul>这里是实际的导航条内容....</ul>

</div>

这样对于写css有一定的便利。特别是万恶的ie7-年代，为了圆角、阴影等效果，可能要嵌套n层的div才能实现。

而随着html5/css3的普及，已经不用这样嵌套了。

所以，如果你开始学习制作网页，挑选教材就很重要了。不要再学那些几年前的理念了。

---