Head First HTML & CSS chapter 13，14 ：表格和列表，XHTML表单

最新推荐文章于 2025-12-11 20:14:34 发布

原创最新推荐文章于 2025-12-11 20:14:34 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

html

9 篇文章

订阅专栏

本文探讨了HTML表格与CSS显示表格式的区别及联系，详细介绍了如何使用CSS表格式显示来改进HTML表格布局，包括使用caption标签、nth-child伪类等技巧，并提供了input控件的多种类型及其属性介绍。

1、html表格与css表格显示联系：html表格可以让你使用html标记制定表格的结构，而css表格显示（display：table，table-row，table-cell）则提供了一种方法，可以用一种类似表格的表现方式显示块级元素。HTML表格可以使用css来指定样式。另外，建立布局的古老方法可以使用表格建立布局，该方法很难建立正确的布局，而且还很难维护，实际上使用css表格显示会好很多，故建立布局建议采用html加css的方法。

2、html表格中可以添加<caption>标签来制定表格的title。

3、盒模型与表格的属性对比：盒模型和表格属性中均有内边距和边框，但是不同点是，与盒模型中的外边距不同的是，表格中使用border-spacing来表示边框边距的，定义该值是设置整个表格中边框之间的距离，注意不能为单个表格单元设置外边距。除了设置border-spacing外，还可以设置border-collapse值，该属性是折叠俩个相邻的cell。

4、CSS nth-child伪类，它用来设置奇偶数行的颜色。

tr:nth-child(odd){
  background-color: #fcba7a;
}

上述代码意思是奇数行的背景色为#fcba7a

5、input 的type为“number”会创建一个只能是数字的单行文本输入控件

6、input 的type为“range”会创建一个滑动控件数字输入

7、input 的type为“email”、“url”、“tel”类型会创建单行文本输入，在移动浏览器上会出现定制键盘。

8、由于表单有一个表格结构，通常会采用CSS表格显示表单布局

9、html 可以使用<fieldset>元素组织表单元素

10、<label>元素是一种有助于提高可访问性的方式关联标签与表单元素，for值通常是控件的id相同。

11、input控件中placeholder 属性提供内容的提示值

12、input控件中required 属性表示输入域是必填的。否则不能提交到服务器上。

13、input控件中type为radio 或者checkbox 时，可能会有checked，它表示默认勾选值。

工程代码：https://github.com/tamir2017/starbuzz