HTML知识点（下）

1.表格标签

表格主要用于显示、展示数据

1.表格的基本语法

<table>
   <tr>
      <td>单元格内的文字</td>
       …
    <tr>
    …
 </table>

1.<table> </table>是用于定义表格的标签；
2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中；
2.<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中；
4.字母td指表格数据（table data)，即数据单位的内容；

2.表头单元格标签

<th>标签表示HTML表格的表头部分（table head的缩写）

<table>
    <tr>
       <th>姓名</th>
       …
     </tr>
     …
</table>

3.表格属性

• align  规定表格相对周围元素的对齐方式
• border 规定表格单元是否拥有边框，默认为”“，表示没有边框
• cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
• cellspacing 规定单元格之间的空白，默认2像素
• width 规定表格的宽度

4.表格结构标签

1. <thead> </thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签，一般是位于第一行
2. <tbody></tbody>:用于定义表格的主体，主要用于放数据本体
3. 以上两个标签都是放在<table></table>中

5.合并单元格

合并单元格方式：

• 跨行合并：rowspan=”合并单元格的个数“
• 跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

• 跨行：最上侧单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码

6.列表标签：

1. 无序列表
2. 有序列表
3. 自定义列表

1）无序列表标签：<ul><li>

基本语法格式：

<ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
       …
  </ul>

注意：

1.无序列表的各个列表项之间没有顺序级别之分，是并列的
2.<ul> </ul>中只能嵌套 <li> </li>，直接在<ul> </ul>标签中输入其他标签或者文字的做法是不被允许的
3.<li>与</li>之间相当于一个容器，可以容纳所有元素
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置

2）有序列表：

在HTML标签中，<ol> <li>表示有序列表
基本语法格式：

<ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
       …
  </ol>

3）自定义列表：

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字）和<dd>(描述每一个项目/名字）一起使用。
基本语法:

<dl>
     <dt>名词1</dt>
     <dd>名词1解释1</dd>
     <dd>名词1解释2</dd>
 </dl>

7.表单

概念：收集用户信息
表单的组成：表单域、表单控件（表单元素）、提示信息

1）表单域

概念：包含表单元素的区域 <form>标签

<form action="url地址" method="提交方式" name="表单域名称">
            各种表单元素控件
</form>

• action:用于指定接收并处理表单数据的服务器程序的url地址 
• method：用于设置表单数据的提交方式，其取值为get或post
• name：用于指定表单的名称，以区分同一个页面中的多个表单域

2）表单控件（表单元素）

1.input输入表单元素      用于收集用户信息

<input type="属性值"   />
<input />标签为单标签

type属性设置不同的属性值用来指定不同的控件类型：

1. 文本框：text 
2. 密码框：password
3. 单选按钮：radio
4. 复选框：checkbox  可以实现多选

2.select下拉表单元素
3.textarea 文本域元素
4.name 定义input元素的名称
5.value 规定input元素的值

• name和value是每个表单元素都有点属性值，主要给后台人员 使用
• name表单元素的名字，要求 单选按钮和复选框要有相同的name值
• checked 规定此input元素首次加载时应当被选中
• 标签为checked="checked";

maxlength 规定输入字段中的字符的最大长度

submit 提交按钮，会把表单数据发送到服务器
reset 重置按钮 ，会清除表单中的所有数据
file 文件域 上传文件使用的

8.<lable>标签 

1.input元素定义的标签

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

<lable for="sex">男</lable>
<input type="radio" name="sex"  id="sex"/>

核心：<lable>标签的for属性应当与该相关元素的id属性相同 

2.<select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
基本语法：

<select>
       <option>选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       …
</select>

1.<select>中至少包含一对<option>
2.在<option>中定义selected = ”selected“时，当前项即为默认选中项

3.文本域表单元素：<textarea>

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签，在表单元素中，<textarea>标签是用于文本定义多行输入的控件
语法：

<textarea row="3"  cols="20">
     文本内容
</textarea>

1.通过<textarea>标签可以轻松地创建多行文本输入框
2.cols=”每行中的字符数“，  rows=”显示的行数“，我们在实际开发中不会使用，都是用css来改变大小