前端之旅：《Head First HTML & CSS》13-14章 学习笔记

July 20 2016

把这两天的学习笔记总结在了一起，如下。

第13章. 表格与列表

表格

  • <table>标记表格、<tr>标记表格行、<th>定义表头单元格（可以是顶部，也可以在左侧）、<td>定义表内容单元格，<caption>定义表格标题（caption-side 规则可以指定表格标题的显示位置）
  • HTML表格允许你使用HTML标记指定表格的结构，而CSS表格显示则提供了一种可以用类似表格的表现方式显示块级元素

  • 表格单元格没有外边距，单元格之间的空间叫做 border-spacing（边框间距），border-spacing为所有单元格设置一个共同的间距，也就是说它是针对整个表格，而不是为单独的单元格设置。
    border-spacing还可以在垂直方向和水平方向设置不同的边框间距

    1
    2
    3
    table {
       border-spacing: 10px 5px; /*10px的水平边框间距，5px的垂直边框间距*/
    }

  • border-collapse 规则可折叠表格边框，使单元格之间没有间距border-collapse:collapse;

  • nth-child 伪类可选择位于父元素下的第n个子元素，第0个代表没有选中，而且不限制于元素类型

    1
    2
    3
    4
    5
    6
    7
    8
    /*可以直接指定奇偶数段落*/
    p:nth-child(even) { /*odd是奇数*/
        background-color: red;
    }
    /*还可以使用简单的多项式指定*/
    p:nth-child(2n+1) {
        background-color: white;
    }

  • nth-of-type 伪类可指定位于父元素下的同类型的第n个元素，要限制元素类型（书上没有讲这个）

  • 表格可以嵌套
  • 可以给<td>添加rowspan 和colspan属性来指定跨行跨列

列表

  • list-style-type属性值可以更改列表标记：
    • disc：圆点
    • circle：空心圆
    • square：方块
    • none：无标记
  • list-style-image 指定图像代替列表标记
  • list-style-postion 可以指定列表标记的回绕方式：
    • inside：使列表标记包含在li元素文字内，换行的文字会在标记下面回绕
    • outside：默认值，使标记独立于文字，换行的文字不会在标记下面回绕

问题

当用 nth-child 为表格奇偶行指定不同颜色时，如果同时给 <td>添加了rowspan 属性的话，浏览器会将设置跨行的行计算在内来计算 td 位于 nth-child 的顺序，这样导致表格样式看起来很混乱，暂时没找到不使用js等技术的方法，除非不使用 nth-child，而改用类来手动指定。问题如下代码：

第14章. 表单

常见表单元素

  • text input 用于单行文本输入
  • submit input 用于创建提交表单的按钮，value属性可指定提交按钮的文字
  • radio input 用于创建单选框，同组的只能使用一个同一name，因为同一时刻只有一个被选中，checked 是布尔属性，可以为单选框和复选框标记默认值
  • checkbox input 用于创建复选框，checked 是布尔属性，可以为单选框和复选框标记默认值，同组的一次也只使用一个name，但是在后面加上[]便于服务器脚本识别多个值，如name="name[]"
  • textarea 创建多行文本输入区
  • select 结合 option 创建选择菜单，selected是布尔属性，可以为菜单选择提供默认值，布尔属性multiple可将这个菜单变成多选菜单，name属性是给select而不是option
  • input 是内联元素

html5新增表单元素

  • number input 创建文本输入框用于输入数字，可用min和max属性指定数字范围，如果超出范围提交表单会发出警告
  • range input 创建一个滑动条来选择范围
  • color input 创建一个颜色选择器提供颜色输入
  • date input 创建日期选择器
  • email input 提供邮件地址输入框，类似文本框
  • tel input 提供电话号码输入框，类似文本框
  • url input 提供url输入框，类似文本框
  • password input 提供密码输入框，会对输入的文本加掩码，当然这仅仅只是防止了输入密码时被别人看到，并不能保证数据传输的安全性
  • file input 提供文件上传控件

使用表单

  • action 属性指定表单提交的服务器脚本地址
  • method 提供提交的方法，有GET和POST两种
    • GET：会将你的表单变量追加到URL最后，然后请求服务器
    • POST：这种方式会打包你的表单变量，在后台把它们发送到服务器
  • fieldset+legend 可以对表单元素进行视觉上的分组
  • placeholder 属性为输入框提供提示文字，它不会作为表单的值提交
  • required 可用于任何表单控件，指示一个域是必须要提供值的
  • 合理使用<label>标记可增强页面的可访问性，可以提供页面结构的更多信息，使你更容易对标签设置样式，另外也有助于有视力障碍的用户使用屏幕阅读器更准确的标识表单元素

Demo：

附录. 没有谈到的十大主题

1. 更多CSS选择器

  • 伪元素：可以用来选择元素的某些部分，如p:first-letter会选择段落中的第一个字母
  • 属性选择器：通过元素的属性来匹配选择器，如img[width]会选择提供了width属性的img元素
  • 兄弟选择器：根据兄弟来选择一个元素，如h1+p会选择所有h1后面的p元素
  • 结合选择器：通过对各种已有选择器进行组合来选择元素

2. 开发商特定的CSS属性

通常是浏览器制造商为他们的浏览器增加新的功能来测试新特性，常见的几个特定属性如下表：

名称 浏览器
-moz- mozilla的firefox
-webkit- Safari和Chrome
-ms- 微软的IE浏览器
-o- Opera浏览器

使用方式是用上表的名称结合css相应属性

1
2
3
4
5
6
7
div {
    trasform: rotate(45deg);
    -moz-trasform: rotate(45deg); /*支持firefox*/
    -webkit-trasform: rotate(45deg); /*支持Chrome等*/
    -ms-trasform: rotate(45deg);/*支持IE*/
    -o-trasform: rotate(45deg);/*支持Opera*/
}

3. CSS变换与过渡

可以对元素做充分的2D和3D变换，Demo

虽然我写了针对ie的效果，但是ie好像不支持

4. 交互

5. HTML5 API和Web应用

6. 再谈Web字体

  • 有一些免费的字体服务可以使用
  • 浏览器下载字体时会有不同表现，有些浏览器会显示一个备份字体，另外一些可能会等待字体下载完毕后才显示文本
  • 一旦下载了字体，会由浏览器缓存，下次遇到该字体时不会再次下载
  • 所有现代浏览器（IE9+）都支持Web字体
  • 有很多免费字体可以使用
  • 使用Web字体可能会对你的页面性能产生一定影响
  • @font-face规则中的字体应当仅限于页面中真正使用的字体
  • 如果你有某个字体的许可证，要与你的开发商核对一下，他们可能在你的web上也可以使用
  • 与传统字体一样，一定要包含某个字体作为退路，以免你的字体不可用，或者获取、解码字体时遇到错误

7. 创建Web页面的工具

8. XHTML

  • 如果你需要验证文档或者把你的文档转换成xml，或者SVG，就需要使用XHTML
  • 所有元素都必须是良构的，良构是指，要结束所有元素，用引号包围属性值，合法嵌套元素等，所有void元素都必须在结束标签以前使用/
  • 页面应当指定application/xhtml+xml MIME类型
  • 确保html元素中包含XHTML命名空间

9. 服务器端脚本

10. 音频 Audio

HTML利用<audio>元素提供了一种标准方法在页面中播放音频，而无需使用插件

  • 与视频类似，音频也没有标准编码，目前有3种主流格式：MP3、WAV、Ogg Vorbis
  • audio元素及其javascript API提供了其他控制
avatar

神无

舍悟离迷，六尘不改。