前端学习笔记

HTML学习

1.文本显示为单行，超过部分隐藏并使用省略号，实例:
html代码：

<div> 
  文本显示为单行,超过部分隐藏并使用省略号
  修改 width 属性查看效果。
</div>

css代码：

div {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:120px;
}

显示效果：

2.使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)，实例:
html代码：

<div> 
  文本显示为两行,超过部分隐藏并使用省略号
  修改 width 属性查看效果。
</div>

css代码：

div {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  width:100px;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

显示效果：

3.图片引用
a.*.html 文件跟 *.jpg 文件(f盘)在不同目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>

b.*.html 文件跟 *.jpg 图片在相同目录下：

<img src="*.jpg" width="300" height="120"/>

c.*.html 文件跟 *.jpg 图片在不同目录下：

• 图片 .jpg 在 image 文件夹中，.html 跟 image 在同一目录下：

<img src="image/*.jpg/"width="300" height="120"/>

• 图片 .jpg 在 image 文件夹中，.html 在 connage 文件夹中，image 跟 connage 在同一目录下：

<img src="../image/*.jpg/"width="300" height="120"/>

• 如果图片来源于网络，那么写绝对路径：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

4.无下划线的链接

<a href="///" style="text-decoration:none;">此链接无下划线</a>

5.创建图像映射
示例

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

注：该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
a.矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

b.圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

c.多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML5学习

1.canvas学习
学习 HTML5 Canvas 这一篇文章就够了：详细内容