02-功能元素

1 功能元素

1.1 列表标签

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

分类：无序列表(最多)、有序列表（一般）、自定义列表（最少）

1.1.1 无序列表

一个没有特定顺序的列表项的集合(新闻列表、商品列表、导航栏)

<!--格式-->
<ul>
    <li>列表项</li>
</ul>

样式：

• ul无序列表 标签 的type类型属性 的属性值

属性值	样式
disc（默认值）	实心 圆
circle	空心 圆
square	实心 方块

注意：

• ul,li是一个整体，成对出现，不会单独地使用一个ul标签或li标签
• 由于ul、li是一个组合，不建议ul标签里嵌套li标签之外的标签，可在li标签里嵌套其他标签（ul相当于为li提供容器）

1.1.2 有序列表

有顺序的列表,有一定时间、先后、高低等顺序(如时间、热度)

<!--格式-->
<ol>
    <li>列表项</li>
</ol>

样式：

• ol 有序列表 标签 的type`类型属性 的属性值

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 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

一般用于图文混排或自定义尾部等

<!--格式-->
<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>
<!-- dt用来定义列表中的标题 -->
<!-- dd用来定义标题对应的描述的 -->

无序、有序、自定义列表的区别：

• 一组 数据: 三者 都代表 一组数据
• 顺序有意义: ol有序列表元素中的顺序是很重要的,比如 成绩排名,比赛排名 等.
• 前缀的不同，有序的是有大写字母和小写字母、数字、罗马数字等，而无序列表是实心圆、空心圆、实心正方形，而自定义列表无前缀，且有缩进

示例：

<!-- 无序列表 -->
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>榴莲</li>
</ul>

<!-- 有序列表 -->
<ol type="I">
    <li>中国</li>
    <li>美国</li>
    <li>日本</li>
</ol>

<!-- 定义列表 -->
<dl>
    <!-- 标题 -->
    <dt>windows</dt>
    <!-- 针对标题的一个描述 -->
    <dd>微软公司推出的系统</dd>
    <dt>ios</dt>
    <dd>苹果公司推出的系统</dd>
</dl>

1.2 表格标签

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!-- 注意：table、tr、td要么一起出现，要么不出现，不能单独出现 -->
<!-- 如果不定义边框属性，表格将不显示边框，默认border为0 -->
<table border="1">
    <!-- 每一个tr标签就是一行 -->
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
    </tr>
    <tr>
        <!-- 每一个td就是一行中的一个单元格或一列 -->
        <td>张三</td>
        <td>19</td>
        <td>1.78</td>h
    </tr>
</table>

补充：

tr与th搭配表示表头，字体为加粗的居中文本
tr与td搭配表示表体，字体为左对齐的普通文本

属性：

（1）设置宽高：width/height

• 给表格设置宽高：通过给table标签设置
• 给单元格设置宽高：通过给td、th标签设置

补充：table、td、th都属于块级元素，可设置宽高

（2）水平与垂直对齐：

水平对齐：（table、tr、td）

• 给table设置align属性
• 给tr设置align属性
• 给td设置align属性（如果tr也设置了，就近原则，选择td中设置的align对齐方式）

垂直对齐：(table标签不可设置)

• 给tr标签设置valign属性

• 给td标签设置valign属性（如果tr也设置了，就近原则，选择td中设置的valign对齐方式）

（3）外边距和内边距：(只能给table设置)

cellspacing 外边距：单元格和单元格之间的距离（默认是2px）

cellspadding 内边距：单元格的边框和文字之间的间隙（默认是1px）

（通过设置cellspacing=“0”,cellspadding="0"可以将单元格之间的间隙取消，实际上还是两个单元格的边框合在了一起）

<!-- table标签就是一个表格 -->
<table border="1" width="500" height="200" align="center" cellspacing="10" cellpadding="10">
    <!-- 每一个tr标签就是一行 -->
    <tr>
        <!-- th标签 文字加粗，居中显示  -->
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
    </tr>
    <tr align="center">
        <!-- 每一个td就是一行中的一个单元格或一列 -->
        <td width="200" align="left" valign="top">张三</td>
        <td>19</td>
        <td>1.78</td>
    </tr>
</table>

（4）单元格合并

<table border="1">
    <tr>
        <!-- 水平方向上的单元格合并可以给td标签添加一个colspan属性指定合并列数 -->
        <td colspan="2">姓名</td>
        <!-- 垂直方向上的单元格合并可以给td标签设置一个rowspan属性指定合并行数 -->
        <td rowspan="2">年龄</td>
        <!-- <td>身高</td> -->
    </tr>
    <tr>
        <td>张三</td>
        <td>19</td>
        <!-- <td>1.78</td> -->
    </tr>
</table>

表格的完整结构

<!-- 完整的表格结构 -->
<!-- 表格的标题+表头信息+主体信息+表尾信息 -->

<table border="1" height="200" width="200">
    <!-- 表格的标题 -->
    <caption>个人信息</caption>
    <!-- 表头 -->
    <!-- thead有自己固定的高度，并不受表格高度的影响（在火狐下会受到影响） -->
    <thead>
        <!-- 千万不要忘记tr!!!! -->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <!-- 表体 -->
    <tbody>
        <tr>
            <td>张三</td>
            <td>19</td>
            <td>1.78</td>
        </tr>
    </tbody>
    <!-- 表尾 -->
    <tfoot></tfoot>
</table>

1.3 form表单

标签用于为用户输入创建 HTML 表单。

• 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

• 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

• 表单用于向服务器传输数据

表单样式：

<form action="url">
    <表单元素>
</form>
<!-- url规定当提交表单时向何处发送表单数据 -->   

表单元素：

（1）input标签

type：决定了input标签的功能和样式

name：表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构

placeholder：文字提示（在输入框中常用）

<!-- 常见input标签的使用 -->
<form action="test.php">
    <!-- 明文输入框 -->
    账号：<input type="text" name="account" value="jack"><br>
    
    <!-- 暗文输入框 -->
    密码：<input type="password" name="pwd"><br>
    
    <!-- 单选按钮 -->
    <!--  
		1.单选框默认不互斥，互斥效果需给单选框添加name属性且互斥的name属性相同
		2.单选框默认选中，给单选框添加checked属性
		3.value中的值为表单提交时传出的值，并不是html中显示的文本内容
	-->
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女<br>
    
    <!-- 文件选择器 -->
    <input type="file" name="file"><br>
    
    <!-- 提交按钮 -->
    <!-- 当我们点击submit按钮时 收集当前表单元素中所有表单的值 进行参数传递 传递给action中服务器接口地址 -->
    <input type="submit" value="提交">
    
    <!-- 重置按钮 -->
    <!--用于清空表单中已经填写好的数据-->
    <input type="reset" value="重置">
    
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">

    <!-- 隐藏域 -->
    <!-- 配合提交按钮将一些数据默默的悄悄的提交到服务器 -->
    <input type="hidden" name="userid" value="123456789qwers">
</form>

（2）label标签

使用户在填写表单的项目时有更好的体验

• 默认请况下点击label标签对应输入框没有聚焦，若需聚焦，需给label标签和输入框绑定进行绑定

• 给input标签添加属性 id=“xxx”

• 给label标签添加for=“xxx”

  <label for="account">账号:</label>
  <input type="text" id="account">
  

（3）select标签

用于定义下拉列表

<!-- 下拉列表 不可输入-->
<select>
    <!-- optgroup标签给下拉列表中的数据分类 label="类别" （该标签可省略）-->
    <optgroup label="水果">
        <option>苹果</option>
        <!-- selected属性来指定列表的默认值 -->
        <option selected>香蕉</option>
        <option>橘子</option>
    </optgroup>
</select>

（4）textarea标签

定义一个文本区域 (text-area) （一个多行的文本输入区域）

<textarea rows="3" cols="30">
这里是文本域中的文本 ... ... ... ...
</textarea>

注意：

• 文本区域具有无限行
• 可以通过row、col属性规定文本区内可见的行数和列数（默认是2行）
• 超过规定的文本区域后依旧可以继续输入
• 通过鼠标可以控制多行文本框的大小，手动拉伸

（5）fieldset组件

用于在一个web表单中对多个控件和标签进行分组（分组的内容有一个边框）

<form action="">
    <fieldset>
        <!-- 标题 -->
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
    </fieldset>
    <fieldset>
        <legend>请提交</legend>
        <input type="submit">
    </fieldset>
</form>

新增表单元素

（1）datalist标签

给输入框绑定待选列表（类似于模糊搜索）

• 搞一个输入框
• 搞一个datalist列表
• 给datalist列表标签添加一个id
• 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

<input type="text" list="xxx">
<datalist id="xxx">
    <option>zhangsan</option>
    <option>lisi</option>
    <option>wangwu</option>
</datalist>

（2）进度条

<progress value="70" max="100">70%</progress>
max 定义进度元素所要求的任务的工作量，默认值为1  
value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

（3）校验格式的元素：

input元素种类有：

• email
• url
• number
• range
• Date pickers(date, month, week, time, datetime, datetime-local)
• search
• color

<form action="">
    <!-- 1. 邮箱 -->
    <!-- 做了简单的表单验证 -->
    邮箱<input type="email" name="" id=""><br>
    <!-- 2. 域名 -->
    域名<input type="url"><br>
    <!-- 3. 数字 -->
    数字<input type="number"><br>
    <!-- 4. 时间 -->
    时间<input type="date" name="endtime"><br>
    <!-- 5. 颜色 -->
    颜色<input type="color"><br>
    <!-- 6. 搜索-->
    颜色<input type="search"><br>
	<!-- 7.自定义滑动条 -->
    滑动条<input type="range"><br>
    <input type="submit" value="提交"><br>
</form>