HTML权威指南知识笔记（二）

落日映苍穹つ 2022-07-14 07:49 215阅读 0赞

# HTML权威指南知识笔记（二） #

本次笔记主要包括表格元素表单元素。

*  表格元素  
    \-**表格三要素**：table tr和td。table是表，tr是表格里的行，td是表格里的列。  
    \-**th**：表格的单元头，用来区分数据和对数据的说明。  
    tbody：构成表格主体的全体行，不包括表头行和表脚行（他们分别是thead和tfoot）。

![jieguo][]  
thead:红色；tbody:黄色；tfoot:蓝色。  
\-**制作不规则表格**：td和th元素的colspan和rowspan属性。***想要一个单元格纵跨多行，使用rowspan，属性值即为跨行数；同理，一个列跨多行使用colspan。***

colspan:

![colspan][]  
rowspan:

![rowspan][]

*  表单  
    \-**表单三元素**：form、input和button。  
    \-**form配置http方法属性**：get和post。***get请求用于安全交互，同一请求可以发起任意多次而不会产生额外作用；post请求用于不安全交互，提交数据的行为会导致一些状态的改变。一般而言，get请求应该用于只读信息，post用于会改变程序状态的各种操作。***  
    \-entype属性：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>application/x-www-form-urlencoded</td> 
   <td align="center">这是未设置enctype属性是使用的默认编码方式。他不能用来将文件上传至服务器。</td> 
  </tr> 
  <tr> 
   <td>multipart/form-data</td> 
   <td align="center">用于将文件上传至服务器</td> 
  </tr> 
  <tr> 
   <td>text/plain</td> 
   <td align="center">因服务器而异，谨慎使用</td> 
  </tr> 
 </tbody> 
</table>

\-***input—自动聚焦到某个input***：autofocus属性。

\-**对表单元素编组**：fieldset元素。  
\-**添加说明标签**：legend元素，但必须是fieldset的第一个元素。

![结果][20161202204709009]

#### 关于的type属性不在一一总结。 ####

*  值得一提的是：H5引入了输入验证。

\-required属性：检测用户是否输入了一个值。  
\-确保输入值位于某个范围：min和max用来确保输入的**\* 数值和日期 \*** 处于指定范围。

\-**确保输入值与指定模式匹配**：pattern属性可以用来确保输入值与一个正则表达式匹配。  
\-**确保输入值是邮箱或地址者URL**：把pattern属性和对应的input元素结合，进一步限制用户输入的值。

\*\*注解：\*\*required属性确保用户提供一个输入值；pattern确保输入的电子邮箱属于指定域（qq.com）.

[jieguo]: /images/20220714/ba0276fc305f441fac48543790dc465f.png
[colspan]: /images/20220714/0af13c3073c84e1cabb5221d7fbf41ea.png
[rowspan]: /images/20220714/197bef04099648dc9be0ba6dd47d9008.png
[20161202204709009]: /images/20220714/69ee01f4cf264d38b34aa16b270ba6ea.png