学前端的第6天

1.图像

图像由空标签<img>定义，它没有闭合标签，要在页面上显示图像，还要使用src属性

<img src="URL" alt="some text">

URL指图像存储的位置
之前的之所以显示不出来是因为没有带具体的位置（路径还是很重要的，如果没有正确的路径，图片无法显示）

<img src="pulpit.jpg" alt="pulpit.rock"> 无法显示
<img src="http://www.runoob.com/images/'pulpit.jpg" alt="pulpit.rock"> 可以显示

alt属性：为图像定义一个可预备替换的文本，如果无法显示图像，替换文本就会告知使用者图片的信息，浏览器此时显示的是替换文本而不是图像
宽度：width
高度：height
插入图片的时候要记得设置宽度与高度，页面加载时就会保留原始的尺寸，如果没有指定图片的大小，加载页面时有可能破坏html的布局.

创建图片链接

<a href=""><img src="URL" alt="" width="" height=""></a>

一幅图像中点击某些区域可以跳转新链接

<img  src="plantes.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>

map：定义图像地图
area：定义可以点击的区域（嵌套在map的内部）
shape：形状
coords：链接区域在图片中的坐标

rect：矩形 (x1,y1,x2,y2)	左上角(x1,y1) 右下角(x2,y2)
circle：圆形 (x1,y1,r)	圆心(x1,y1) 半径r
poly：多边形 (x1,y1,x2,y2…)	各顶点坐标(x1,y1) (x2,y2)

2.表格

1.整个表格：table
行：tr；每个数据：td；表头：th

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1,cell 1</td>
        <td>row 1,cell 2</td>
    </tr>
    <tr>
        <td>row 2,cell 1</td>
        <td>row 2,cell 2</td>
    </tr>
</table>

Header 1	Header 2
row 1,cell 1	row 1,cell 2
row 2,cell 1	row 2,cell 2

2.border是边框，如果不定义边框属性或者设置border=“0”，表格没有边框。
3.带标题的表格

<table border="1">
<caption>标题</caption>
</table>

4.单元格跨行和跨列

一些bug

①实时显示代码结果的open with live server
在代码页面右键选择，或者点击软件右下角“go live”
②打完内容跳过关闭标签的到下一行：ctrl+enter
③删除整行：ctrl+x
④输入的中文突然繁体了：ctrl+p，选择configure display language，选择en，选择这个重新打开一次就正常了
⑤