表格、表单、HTML标记语言以及使用canvas来画图 input新属性

三

 内容大纲

今天讲的内容大致为表格、表单、HTML标记语言以及使用canvas来画图，表格中用table标签来书写，其中包含tr、th、td元素来构建表格，还可使用colspan来进行行合并，用rowspan进行列合并，header、nav、footer、article、section、audio、video为标记语言，直接写入方便浏览器解析。Canvas编辑画布，画出实心、空心、线条等图形。

笔记

表格

1. 表格是最初的网页布局方式 table标签

table标签定义了HTML表格

一个HTML表格包括<table>元素，一个或多个<tr>、<th>以及<td>元素，<tr>元素定义表格行，<th>定义表头，相对于<td>来说具有文字居中、加粗效果，<td>定义表格单元，更复杂的HTML表格也可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素

1. 使用border属性显示边框
2. cellpadding 内边到内容的间距
3. cellspacing 内边到外边的距离，语法格式 table→tr→td
4. colspan 为行合并，数字为多少，合并多少单元格
5. rowspan 为列合并，数字为多少，合并几列
6. caption为表格标题
7. colgroup 为列排版，span后面数字为多少，就选择多少列
8. 边框样式 border-collapse:collapse（折叠边框）把内外边框合成一个

表单

1. form 收集信息的表单
   • action [URL] 路径，规定当提交表单时向何处发送数据
   • method 规定用于发送表单数据的http方法（get 请求数据 post 提交数据）
   • title 标题，鼠标停留时显示的文本
   • name 与服务器通信时使用的id，是浏览器端的名字
2. label 标签为input元素定义标注

label元素不会向用户呈现任何特殊效果，但是点击时label会触发绑定的控件

label元素的for属性应该与相关元素id属性相同

1. 文本域

定义多行文本输入的控件（textarea）

文本域通过cols rows属性来规定大小

1. 下拉框

select 定义下拉框，内部每一个option都是一项

默认打开网页时显示的那一项是 selected = “selected”

HTML5 新元素

1. 元素

采用HTML语义标签（用哪些标签，取决于设计目标）