HTML基础标签

一、表格 table（用来展示数据）

1.表格作用：表格是较为常用的一种标签，但不是用来布局，常用来展示表格式数据，因为它可以让数据显示的非常的规整，可读性非常好，特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。

2.创建表格

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

（1）table用于定义一个表格标签

（2）tr用于定义表格中的行

（3）td用于定义表格中的单元格（<td>必须嵌套在<tr>中）

（4）th用于定义表头单元格标签，默认内容居中加粗

3.表格属性（写在table里面）

（1）border：设置表格边框（默认border="0"无边框），值越大外侧的边框越宽，但是单元格的边框宽度不变。

（2）cellspacing：设置单元格与单元格边框之间的空白间距，一般写成0。

（3）cellpadding：设置单元格内容与单元格边框之间的空白间距。

（4）width：设置表格的宽度。

（5）height：设置表格的高度。

（6）align：设置表格在网页中的水平对齐方式。左、中、右（left、center、right）。

经常有个说法是三参为0指的是border、cellpadding、cellspacing。

4.表格标题 caption 里面可以嵌套<h1>~<h6>标签

（1）用法：

<table>
  <caption>我是表格标题</caption>
</table>

（2）注意： caption元素定义表格标题，通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。caption标签只存在表格里面才有意义。

5.合并单元格

（1）跨行合并：rowspan="合并单元格的个数"。

（2）跨列合并：colspan="合并单元格的个数"。

（3）合并的顺序我们按照先上后下，先左后右的顺序。

（4）合并单元格三步曲：先确定是跨行还是跨列合并，在找到目标单元格然后写上合并方式还有要合并的单元格数量，例如：<td colspan="3"></td>，删除多余的单元格单元格。

二、列表标签 （用来布局）

1.定义：容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。

2.特点：列表最大的特点就是整齐 、整洁、 有序，跟表格类似，但是他可组合自由度会更高。

3.无序列表 ul 

（1）无序列表的各个列表项之间没有顺序级别之分，是并列的。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  .........
</ul>

（2）<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

（3）<li>与</li>之间相当于一个容器，可以容纳所有元素。

（4）无序列表会带有自己的样式属性。

（<font size = " ">文字内容</font>）font代表文字大小

4.有序列表 ol 

（1）有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义。

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  .........
</ol>

（2）所有特性基本与ul 一致。  但是实际中比 无序列表 用的少很多。

5.自定义列表 dl

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

<dl>
  <dt>标题</dt>
  <dd>解释标题</dd>
  ...........
</dl>

（2）一般<dt>里面有好几个<dd>。

三、表单标签

1.作用：表单目的是为了收集用户信息。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

（1）表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

（2）提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

（3）表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

2.input 控件：

例：<input type ="属性值" value ="你好">

（1）input 是输入的意思 ， <input />标签为单标签，type属性设置不同的属性值用来指定不同的控件类型，除了type属性还有别的属性 。

（2）type属性（表单类型）：这个属性通过改变值，可以决定了你属于那种input表单

（前面的文字是提示文本，提示用户在输入框中输入什么样的信息）

普通文本（单行文本输入框）：<input type ="text">

密码输入框：<input type ="password">

单选按钮：<input type ="radio">

复选框（多选按钮）：<input type ="checkbox">

普通按钮：<input type ="button">

提交按钮：<input type ="submit">

重置按钮：<input type ="reset">

（3）value属性（表单值）：input控件中的默认文本值

（有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置）

<input type =" " value=" ">

（placeholder = "  "——>表示占位符，默认是灰色）

（4）name属性（表单名字）：控件名称

name属性用于区别不同的表单控件，name后面的值是我们自己定义的，如果想使用单选按钮，也需要name属性实现单选的目地。

（5）checked属性：表示默认选中的状态，常用于单选按钮和多选按钮

一般写成：<checked ="ck"> 或者 <checked ="true"> 。

（6）size属性： input控件在页面中显示的宽度，代表表单控件大小

一般写成：<input size = " ">

（7）maxlength属性： 表示控件允许输入的最多字符数

一般写成：<input maxlength = " ">

3.label标签：label 标签为 input 元素定义标注（标签）

（1）作用：用于提升用户体现，点击文字就能输入内容。用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

（2）第一种用法：用label直接包含input表单

例：<label><input type = " " name = " " value = " " ></label>

（3）第二种用法：用for属性给input起个id直接把文子放里面

例：<label for = "abc">男</label>

<input type = "radio" name = " " id = "abc">

4.textarea控件(文本域)

（1）作用：通过textarea控件可以轻松地创建多行文本输入框。

<textarea>文本内容</textarea>

（2）可以控制行数和列数 （cols="每行中的字符数" ，rows="显示的行数" ）

行数：<textarea rows = " "></textarea>

列数：<textarea cols = " "></textarea>

5.select下拉列表

<select>
  <option>选项</option>
</select>

（1）作用：如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。

（2）注意：<select>中至少包含一对option，在option中定义selected =" selected "时，当前项即为默认选中项。

6.form表单域 

<form action = " " method = " " name = " ">各种表单控件</form>

（1）作用：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

（2）action：提交的位置（url地址），用于指定接收并处理表单数据服务器程序的url地址。

（3）method：提交的方式，用于设置表单数据的提交方式，其取值为get/post。

（4）name：表单名称，用于指定表单的名称，以区同一个页面中的多个表单。