Questions:
- 为什么要重置标签？
- 为了增强页面的兼容性，让更多的浏览器显示的效果一致；
- 因为不同的浏览器都有一套内置的CSS样式表，目的是为了正常显示不具有样式表的页面；
- 提高我们制作的页面兼容浏览器的性能。
- 最普通的CSS Reset
*{margin: 0; padding: 0;}
- 最常用的CSS Reset
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
img {border: 0;}
ol,ul{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}
- 在H1标签的重置代码中，“font-size:100%;”起到的作用是什么？
- 知识点补充：
- CSS Table属性
属性 描述 border-collapse 设置是否把表格合并为单一的边框。 border-spacing 设置分割单元框边框的距离。
指定的两个长度中，第一个是水平间隔，第二个是垂直间隔。除非collapse被设置为separate，否则将忽略这个属性。
值：length length 水平间隔 垂直间隔
inherit 规定应该从父元素border-spacing属性caption-side 设置表格标题的位置。 empty-cells 设置是否显示表格中的空单元格。 table-layout 设置显示单元、行和列的算法。 - automatic 自动表格布局，默认。列宽度由单元格内容设定。列的宽度由列单元格中没有折行的最宽的内容设定的。此苏散发有时会慢，这是由于它需要确定最终的布局之前访问表格中所有的内容。
- fixed 固定表格布局。列宽由表格宽度和列宽度设定。允许浏览器更快的对表格进行布局。水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
- inherit 规定应该从父元素继承table-layout属性的值。
- border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示。
| 值 | 描述 |
| separate | 默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。 |
| inherit | 规定应该从父元素继承border-collapse属性的值。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
caption-side: bottom;
}
</style>
</head>
<body>
<table width="500" border="1" bordercolor="#FF0000" cellspacing="0" cellpadding="0">
<tbody>
<caption>这是一个表格</caption>
<tr>
<th>1</th>
<th>1</th>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>