HTML标签（下）

一、表格标签

1.1表格的主要作用

主要用于显示、展示数据

1.2表格的基本语法

单元格中的文字

如果是表头单元格的话，eg:姓名，年龄 姓名（th是table head）;

作用：表头会加粗居中

 1.3表格属性（不常用）

目的：1.记住英语单词

           2.更能直观的感受表格的外观形态

 理解：cellpadding是指文字与单元格之间的距离

 cellspacing是指单元格与单元格之间的距离，eg:cellspacing ="0",那么就没有空隙。

1.4小说排行榜

1.5表格的结构标签

表头部分，里边必须有,再里边有

表格的主体部分

1.6合并单元格

1.合并单元格的方式

1°跨行合并：rowspan="合并单元格的个数"

2°跨列合并:   colspan="合并单元格的个数"

2.目标单元格

简记：如果是同一行，那就是跨列合并

           如果是同一列，那就是跨行合并

3.合并单元格的步骤

1°先分析是跨行还是跨列

2°如果是跨列，那就先找到最左边的单元格是第几行的（跨几列数字就填多少），

（如果是跨行，那就先找到最上边的单元格是第几行的）

然后就是 单元格的内容。

 3°删除多余的单元格，如果说是跨列，第二个和第三个需要合并，那就是

        单元格内容

        单元格内容

 跨行：

 二、列表标签

表格用来展示数据，那么列表就是用来布局的

列表的特点是整齐、整洁、有序，它作为布局会更加自由和方便。

2.1无序列表（重点）

        

• 内容随意

        

•    

                   

  123

          

        

注：

里边可以放任何东西，但是

里边只能有

2.2有序列表 （理解）

        

1. 列表一

        

2. 列表二

        

3. 列表三

有序列表与无序列表基本一致，但是它要求列表一二三有顺序要求，eg:排行榜

 2.3自定义列表（重点）

使用场景：

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

以下图为例

        

关于我们

        

新浪微博

       

官方微信

        

联系我们

2.4列表总结

三、表单标签

表单包括表单域、表单控件（也可以称之为表单元素）和提示信息

3.1表单域

表单域是一个包含表单元素的区域。

标签用于定义表单域，会把它范围内的表单元素信息提交给服务器。

        各种表单元素控件

谨记两点：

1°在写表单元素之前，应该有个表单域把他们进行包含。

2°表单域是form标签。

3.2表单控件（元素）

3.2.1输入表单元素

表单元素中标签用于收集用户信息。

标签中，包含一个type属性，根据不同的type属性，选择文本字段或者按钮等控件。

为单标签

在单选按钮和复选框中，name和value是必须写的，主要是给后台人员看的。单选按钮和复选框的name值都是一样的。value主要是给后台一个信息用户到底选择了哪一个。  

（checked="checked"是指一打开页面就会有一个默认选项）

补：写name的必要性

如果单选按钮不写相同的name值，那么最后所有的选项都会被选择。只有这样，才能真正实现多选一。 

 （重点）label标签

标签为input元素定义标注标签。

用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

男

核心：标签的for属性应与相关元素的id属性相同。

3.2.2select下拉表单元素

比如：

                籍贯：

                               

选项一

                                

选项二

                        

             

3.2.3textarea文本域元素

四、综合案例