《精通HTML-语义、标准和样式》读书笔记

时间：2011-03-31 来源：∮沙头№2

下面是读书笔记，若有错误，欢迎指出。一起交流，共同进步：http://www.cnblogs.com/chemandy/

比较有用的两章书：

第3章精通表格 ◇表格顶部的标题行（head）被单独划出来（th标签），以指出表格的各列，这使得可访问性大大提高。也有利于样式的控制。 ◇使用<caption>元素的方式为整个表格设定标题，让表格更清晰。<caption>元素内部可以包含行内元素，不能包含块级元素。 ◇为<table>标签添加一个summary属性，增强可访问性。 ◇通过<thead>、<tfoot>、<tbody>划分表格结构。其中<thead>要放在<caption>之后（如果有caption的话），<tfoot>标签必须位于<tbody>之前。 ◇小心使用<tfoot>标签。这个元素会重复出现在多个页面，最好设置为跟<thead>重复的内容。 ◇可以使用<colgroup>标签指定表格中存在多少组表格列，并通过span属性和一个数字值来指定每组中所包含的表格列的数目。此标签放在table起始标签之后（如有caption、thead、tfoot则colgroup放于其后），并只能包含可选的<col>标签。 ◇<col>元素是一个自结束元素，也有一个span属性，用来指定<colgroup>中的所包含的表格列的数目。三种方式：①<colgroup><col /><col /><col /></colgroup>②<colgroup><col span="3" /></colgroup>③<colgroup span="3"></colgroup>。指定列<colgroup>和<col>有利于表格列的样式化。 ◇可以使用<scope>使数据与标题关联起来。scope接受的属性值为：col、row、colgroup、rowgroup。 ◇也可以使用id和headers属性关联，但表格会变得很臃肿，不推荐使用。 ◇axis属性，目前不需要了解。 ◇表头缩写，在<th>标签内部可以使用abbr属性提供<th>内容的缩写。 ◇css中border-collapse属性指定表格应该使用哪种边框模型。取值可以为collapse（折叠边框模型）：相邻的单元格彼此共享边框。separate（独立边框模型）：相邻单元格保留各自的边框。 ◇列样式化：对<colgroup>和<col>元素只有4种CSS属性（border、background、width、visibility）。 -------------------------------------------------------------------------------- 第4章精通表单 ◇表单由一个<form>容器以及该容器内部包含的任意数量的表单控件组成。 ◇尽管<form>是一个块级元素，但为了通过有效性验证，必须将单个表单控件包含在外层的块级元素中（div或p中）。 ◇<form>元素属性： ·action：提交表单后对表单内容的处理，一般提交到表单处理程序。 ·method：提醒用户采用哪种形式将表单数据传送给表单处理程序。get：采用字符串提交，url可见。post：url中找不到这些表单数据，如果表单提交是主动的话应该用post。 ·enctype：指定哪种MIME类型对表单数据进行编码。默认application/x-www-form-urlencoded，使用文件上传控件则应改为：multipart/form-data。 ·accept：使用文件上传控件才用到，可以接受一个有逗号隔开的MIME类型列表，这些类型是能够接受上传到服务器的文件的类型。 ·accept-charset：是与accept属性有关的属性，指定允许使用那些字符集。 ·name：标识表单，以便用于样式表和脚本程序。 ◇<input>元素的type取值：text、password、file、checkbox、radio、hidden、reset、submit和button等。如果无指定则默认为text。 ·text：文本输入框，maxlength属性可以指定允许输入串的最大长度，value属性可以提供文本输入预设值，readonly属性保持文本框初始值不被修改。 ·password：密码输入框，与文本输入框功能属性一样。 ·file：文件上传控件，可以用value预设文件路径表单域，accept属性限制允许上传的文件类型。 ·checkbox：复选框，用checked属性预设复选状态。 ·radio：单选按钮输入控件，相同一组单选项需要设置相同的name属性值，可以使用checked属性预设单选按钮状态。 ·hidden：隐藏输入，在表单包含额外元素，对用户不可见，随表单数据一起提交。 ·reset：重置按钮，将同一个表单中的所有表单控件的值重置为各自的初值。 ·submit：提交按钮，将所有表单数据提交到表单的action属性所指定的文件。 ·img：自定义图片提交按钮，可以使用src属性设置按钮图像，此时应设置alt属性。 ·button：按钮，生成一个没有默认事件的按钮。 ◇<textarea>：多行文本输入框，使用cols和rows控制尺寸。其本身为一个容器，预定义内容在容器中。 ◇<select>：一个容器，可以包含任意数量的<option>或者<optgroup>标签，有三个属性。name（必选）。如果设了multiple属性，<select>菜单便成为可以选择多个选项，通过size属性设置显示详述。 ◇<option>：selected属性标识默认选中，value属性可使提交值与标签内容不同，label属性提供另一种专用于显示的文本标签。 ◇<optgroup>元素将意义相近的<option>元素划分成若干组，用label属性显示分组名。 ◇<fieldset>元素将元素根据相关性划分为若干部分。用<legend>为其标识名字。 ◇表单样式化tips：属性选择符，:focus伪类，鼠标cursor:pointer; ◇表单控件都有一个disabled属性，设置了属性则不能使用该控件。可利用来防止重复提交。