7.7 html学习小结

1.

CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。

<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

2.

代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

<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">
</map>

3.

矩形：左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2)

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

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

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

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

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

　4.HTML表格

4.1

表格三要素 table、tr、td 缺一不可。

<table> 标签常用属性：

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

<tr> 标签的常用属性:

bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

<td>、<th> 标签的常用属性:

width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)

引号里的数字和颜色代码均可以更改。

4.2

表格结构语义标签：

•  1.<table>：表格根元素。
•  2.<thead>：表格头。
•  3.<tbody>：表格体。
•  4.<tfoot>：表格尾，一般可忽略该结构。
•  5.<tr>：表格行。

表格内容标签：

•  1.<th>：表头单元格。
•  2.<td>：表体单元格。

跨列：colspan

跨行：rowspan

单元格内边距：cellpadding

单元格外边距：cellspacing

col 和 colgroup 用于便捷定义表格指定列的样式。

5.HTML列表

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）

6.HTML区块、布局

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）。