HTML的功能元素

1.1.列表标签

列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

- HTML中列表标签的分类

无序列表(ul)

​ 有序列表(ol)

​ 定义列表(dl)

1.1.1.无序列表:

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

- 无序列表格式:

<ul>
  <li>内容</li>
</ul>

- 无序列表样式

type=" "

disc    默认值 实心圆
circle  空心圆
square  实心方块

1.1.2.有序列表

有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

格式：

<ol>
    <li></li>
</ol>

其它用法和ul（无序列表）都差不多, 也就是应用场景/注意点都和ul差不多

- 有序列表样式

<ol type=" "></ol>
1   默认值。数字有序列表。（1、2、3、4）
a   按字母顺序排列的有序列表，小写。（a、b、c、d）
A   按字母顺序排列的有序列表，大写。（A、B、C、D）
i   罗马字母，小写。（i, ii, iii, iv）
I   罗马字母，大写。（I, II, III, IV）

1.1.3.定义列表

给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息

定义列表的格式:

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

其中dt用来定义标题，dd用来定义标题的描述，dt可以有多个dd

1.2.表格标签

现在，多用于数据的展示

- 什么是表格标签?

表格标签作用: 用来给一堆数据添加表格语义 ​ 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

表格标签格式：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>身高</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>19</td>
    <td>1.78</td>
  </tr>
</table>

其中table代表一个表格 tr代表表格中的一行 td则代表一个单元（td可以用th替代来展示居中的粗体文本）。

表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框。

- 宽度和高度的属性

不能设置给tr（行）标签

水平对齐和垂直对齐的属性

其中水平对齐 align 可以给table标签和tr标签和td标签使用.

垂直对齐 valign 只能给tr标签和td标签使用.

align: left center right（左 水平居中中 右）

valign: top mid bottom（上 垂直居中 下）

1.2.1外边距和内边距的属性

只能给table标签使用

• cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距 默认情况下单元格和单元格之间的外边距的距离是2px

• cellpadding内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距 默认情况下内边距是1细线表格

1.2.2细线表格

细线表格的制作方式:

1.给table标签设置bgcolor="black"，cellspacing = "1px"

2.给tr标签设置bgcolor="white"

注意点: table标签和tr标签以及td标签都支持bgcolor属性

1.2.3单元格合并

1.合并水平单元格

<td colspan="2"></td>

2.合并垂直方向单元格

<td rowspan="2"></td>

1.3.from表单

格式：

<form action="提交的服务器接口地址">
    <表单元素>
</form>

表单元素：表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能。

常见的表单元素：input标签，input标签中的type属性有多种取值，取值不同决定了input标签的功能和外观的不同

input标签
	
    -明文输入框 
		<input type="text" name="account" placeholder="请输入用户名">
		name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构
		placeholder:提示
    -暗文输入框 
		<input type="password" name="password" placeholder="请输入密码">

    -输入框设置默认值 
		<input type="xxx" value="xxx">

    -单选框 
		<input type="radio" name="xx" value="xxx">
      注意点:
      1.要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 
        然后name属性还必须设置相同的值。
      2.要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性。
	  3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。

    -多选框 
		<input type="checkbox" name="xxx" value="xxx">
       多选框默认选中 checked

    -提交按钮 
		<input type="submit">
      作用: 将表单中已经填写好的数据, 提交到远程服务器
    -普通按钮 
		<input type="button" value="xxx">
      可以通过value属性来给按钮指定标题
      作用: 配合JS完成一些操作

    -图片按钮 
		<input type="image" src="">
       作用: 配合JS完成一些操作
	
    -重置按钮 
		<input type="reset" value="xx">
      作用: 用于清空表单中已经填写好的数据
      注意点:
      如果想想改重置按钮默认的按钮标题可以通过value属性来修改

    -隐藏域 
		<input type="hidden" name="xx" value="xxx">
        隐藏域
        作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器