HTML的功能元素

1.功能元素

1.1 列表标签

1.1.1 列表分类

• 无序列表
• 有序列表
• 定义列表

1.1.2 无序列表

无序列表的意思是给数据添加列表的语义，但是这些数据没有先后之分，例如中国的城市

<!-- 快捷生成方式：ul>li*3 -->
    <!-- 无序列表 -->
	<!-- 无序列表的样式通过type修改  实心圆（默认值）：disc（value） 空心圆：circle 实心方块：square -->
    <ul type="square">
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>

注意点

• ul标签和li标签是成对出现的，不会单独使用其中的一个标签
• 在ul标签不推荐写其他标签，若需要包含其他标签可以li标签内写

1.1.3 有序列表

有序列表的意思是给数据添加列表的语义，且这些数据有先后之分，例如奥运会的排行榜

<!-- 有序列表 -->
<!-- 
	有序列表的样式通过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）
-->
    <ol type="I">
        <li>中国</li>
        <li>美国</li>
        <li>日本</li>
    </ol>

注意点

• ol标签和li标签是成对出现的，不会单独使用其中的一个标签
• 在ol标签不推荐写其他标签，若需要包含其他标签可以li标签内写

1.1.4 定义列表

定义列表的意思是给数据添加列表的语义，再通过dt标签定义列表标题，通过dd标签给标题添加描述信息

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

注意点

• dl标签和dt标签，dt标签也是成对出现的，不会单独使用其中的一个标签
• 在dl标签不推荐写其他标签，若需要包含其他标签可以dt标签或者dd标签内写
• dt标签内可以没有dd标签，也可以有多个dd标签，即标题可以没有描述，也可以有多个描述

1.2 表格标签

表格标签用来给数据添加表格语义，将数据清晰的展现给用户

1.2.1 表格标签的基本格式

  <!-- table标签默认边框属性border=0，因此我们看不到边框，需要给他设置值才看得到 -->
<table border="2" align="center" width="600" height="200" cellspacing="5" cellpadding="20">
        <!-- tr标签就是一行 -->
        <tr>
            <!-- th标签：表头 默认文字加粗，水平垂直居中显示 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
        </tr>
        <tr align="center" valign="bottom">
            <!-- td标签是一行中的一个单元格或者一列 -->
            <td width="300" align="left" valign="top">张三</td>
            <td>22</td>
            <td>1.83m</td>
        </tr>
    </table>

1.2.2 表格的完整结构

表格区分为4个基本结构：标题（caption标签）、表头信息（thead标签）、主体信息（tbody标签）、页尾信息（tfoot标签）

制作细线表格

• 给table标签设置bgcolor=“black”，cellspacing = “1px”
• 给tr标签设置bgcolor=“white”

注意点

• 我们一般使用表格的基本结构，若要设置表头等信息可以通过css样式
• 若我们没有编写tbody标签，系统会自动给我们添加tbody标签，但是不会添加thead和tfoot标签
• thead和tfoot标签有默认高度，修改表格高度时，在谷歌下会随着表格高度的变化而变化，但是在火狐下不会变化

1.2.3 属性

表格属性

表格属性	意义	基本使用
weight	给整个表格设置宽度	<table width="600"></table>
height	给整个表格设置高度	<table height="200"></table>
align	控制整个表格相对于父元素水平方向的对齐方式，属性值有left，center，right	<table align="center"></table>
valign	控制整个表格相对于父元素垂直方向的对齐方式，属性值有top，mid，bottom	<table valign="mid"></table>
cellspacing	外边距，单元格和单元格之间的距离，默认2px	<table cellspacing="5"></table>
cellpadding	内边距，单元格和文字之间的间隙。默认1px	<table cellpadding="20"></table>
bgcolor	背景颜色	<table bgcolor="pink"></table>

tr标签属性

tr标签属性	意义	基本使用
align	控制当前行中所有单元格内容的水平方向的对齐方式，属性值：left，center，right	<tr align="right">张三</tr>
valign	控制当前行中所有单元格内容的垂直方向的对齐方式，属性值：top，mid，bottom	<tr valign="mid">张三</tr>
bgcolor	背景颜色	<tr bgcolor="pink">张三</tr>

td标签属性

td标签属性	意义	基本使用
weight)	给当前单元格设置宽度	<td width="300">张三</td>
height	给当前单元格设置高度	<td height="300">张三</td>
align	控制当前单元格内容的水平方向的对齐方式，属性值：left，center，right	<td align="left">张三</td>
valign	控制当前单元格内容的垂直方向的对齐方式，属性值：top，mid，bottom	<td valign="top">张三</td>
bgcolor	背景颜色	<td bgcolor="pink">张三</td>
colspan	将当前行的两个单元格向右合并成一个单元格	<td colspan="2"></td>
rowspan	将当前列的两个单元格向下合并成一个单元格	<td rowspan="2"></td>

1.3 表单标签

​ 用于收集用户信息

1.3.1 表单的基本格式

<!-- 
	把表单中的数据提交到远程服务器,需要具备两个条件：
      1.需要action属性, 通过action属性指定需要提交到的服务器地址
      2.需要name属性，确定我们提交的表单名字，后台才能确定是哪个表单-->
<form action="提交的服务器接口地址" name="">
    <表单元素>
</form>

1.3.2 常见的表单元素

input标签的部分属性

• type：有很多类型的取值，取值的不同就决定了input标签的功能和外观的不同

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

• placeholder：在input框中给用户一些提示

• value：设置默认值

• checked：在多选框和单选框中使用，表示默认选中当前元素

• src：在图片中使用，设置图片的url

 -明文输入框 
	<input type="text" name="account" placeholder="请输入用户名">
-暗文输入框 
	<input type="password" name="password" placeholder="请输入密码">
-单选框 
	<!--默认情况下每个单选按钮都可被选中，那么若想有互斥效果需要给每个单选框设置同一个name属性值，提交表单时提交的是value值 -->
	<input type="radio" name="gender" value="male">男
	<input type="radio" name="gender" value="female">女
-多选框 
	<!-- checked表示当前多选框默认被选中-->
	<input type="checkbox" name="xxx" value="xxx" checked>
-附件上传 
<!--若有附件上传，则需要在表单标签中加上下面两个属性，否则提交不成功
		method="POST"
        enctype="multipart/form-data"
-->
	<input type="file">
-提交按钮 
	<input type="submit" value="">
-普通按钮 
	<input type="button" value="xxx">
-图片按钮 
	<input type="image" src="">	
-重置按钮 
	<input type="reset" value="xx">
-隐藏域 
	<!--该标签在页面中看不到，用于配合提交按钮将一些数据默默的提交到服务器-->
	<input type="hidden" name="xx" value="xxx">
-select标签
<!--用于定义下拉列表-->
  <select>
<!--通过给option标签中的selected属性来指定列表的默认值
  通过给option标签包裹optgroup标签来给下拉列表中的数据分类-->
      <optgroup label="分组名称">
          <option>列表数据</option>
      </optgroup>
  </select>
-textarea标签
<!--定义一个多行输入框，默认可以无限换行，可以手动拉伸宽高，可以通过cols和rows属性指定输入框的宽高，但是还是可以无限换行-->
  <textarea>
  </textarea>
-fieldset组件
<!--用于在一个web表单中对多个控件和标签进行分组-->
  <form action="">
      <fieldset>
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
        <input type="submit">
      </fieldset>
  </form>

HTML5新增表单元素

• datalist标签

  作用：给输入框绑定待选项

<!-- input的list值和datalist的id值需一致，input显示datalist中的选项--> 
<input type="text" list="qqq">
    <datalist id="qqq">
        <option>xxx</option>
    </datalist>

• progress标签

  作用：表示任务的完成情况，常用于进度条

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

• input标签类型

<!-- 自动进行简单的检验，看是否符合邮箱格式，但是只校验是否又@符及@符后是否还有字符，因此我们还是需要自定义邮箱校验的-->
-邮箱<input type="email">

<!-- 自动校验输入的内容是否是URL地址-->
-域名 <input type="url">

<!-- 输入框中只能输入数字 -->
-数字 <input type="number">

<!-- 可以通过日历来选择时间 -->
-时间 <input type="date">
    
<!-- 可以通过取色板来选择颜色 -->
-颜色 <input type="color">