day47---前端之HTML二

1. HTML标签之列表

无序列表<ul></ul>

• 描述：无序列表不是数据无序，而是按照特殊符号排列起来的数据

• 标签说明：

  • <li></li>：列表内容

• 属性：无序列表有一个type属性，它的值表示无序列表不同的特殊符号

• type属性值的类型：

  • disc(默认值)：实心圆点

  • circle：空心圆圈

  • square：实心方块

  • none：无样式

• 语法

<ul type="">
	<li></li>
	<li></li>
	<li></li>
</ul>

有序列表<ol></ol>

• 描述：按照指定的数序排列数据

• 属性：有序列表有type和start两个属性，type属性指定排序的方式，start指定排序的开始数字

• 标签说明：

  • <li></li>：列表内容

• type属性值的类型：

  • 1(默认值)：数字列表

  • A：大写字母列表

  • a：小写字母列表

  • I：大写罗马数字列表

  • i：小写罗马数字列表

• 语法

<ol type="" start="">
	<li></li>
	<li></li>
	<li></li>
</ol>

标题列表<dl></dl>

• 描述：使用标题和内容的形式显示数据

• 标签说明：

  • <dt></dt>：标题信息

  • <dd></dd>：内容信息

• 语法：

<dl>
	<dt>标题a</dt>
	<dd>内容a1</dd>
	<dd>内容a2</dd>
	<dt>标题b</dt>
	<dd>内容b1</dd>
	<dd>内容b2</dd>
</dl>

2. HTML标签之table表格

• 描述：表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容

• 表格最重要的目的是显示表格类数据

• 表格类数据是指最适合组织为表格格式(即按行和列组织)的数据

• 标签说明：

  • <thead></thead>：表格的标题信息

  • <tbody></tbody>：表格的内容信息

  • <tr></tr>：表格的行

  • <th></th>：表格中标题的列，区别于td标签，字体会有简单的样式

  • <td></td>：表格中内容的列

• 属性：

  • border：表格边框大小

  • cellpadding：内边距(文件内容与单元格之间的距离)

  • cellspacing：外边距(表格内部每行每列单元格上下左右的距离)

  • width：表格的宽度(一般使用CSS样式来设置)

  • rowspan：单元格竖跨的行数(上下单元格占用的数量，类似合并单元格)，常用于td标签中

  • colspan：单元格横跨的列数(左右单元格占用的数量，类似合并单元格)，常用于td标签中

• 结构：

<table>
    <thead>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容a1</td>
            <td>内容a2</td>
            <td>内容a3</td>
        </tr>
        <tr>
            <td>内容b1</td>
            <td>内容b2</td>
            <td>内容b3</td>
        </tr>
    </tbody>
</table>

3. HTML标签之form表单

• 描述：表单用于向服务器传输数据，从而实现用户与Web服务器的交互。表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label标签

• action属性：指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身

• method属性：将表单数据提交到http服务器的方法(get或post)，默认为get

• enctype属性：指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencode对所有字符进行编码。如果表单包含用于文件上传的控件（input type="file"）,那么这个属性值必须设置为multipart/form-data，不对字符进行编码

• 表单元素：HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息

• 表单工作原理：访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

4. 表单之input标签

• 说明：<input>标签没有结束标记，属于内联标签；如果input需要把数据提交到后端，需要配置name属性

• 类型说明：

  • text：文本输入框

  <input type="text" />
  

  • password：密码输入框

  <input type="password" />
  

  • checkbox：复选框(多选按钮)

  <input type="checkbox" checked="checked" />
  

  • radio：单选框(单选按钮)

  <input type="radio" checked="checked" />
  

  • file：文本选择框(上传文件按钮)，提交文件 form表单需要加上enctype="multipart/form-data"，method="post"

  <input type="file" />
  

  • submit：提交按钮

  <input type="submit" value="提交" />
  

  • reset：重置按钮

  <input type="reset" value="重置" />
  

  • button：普通按钮，可点击的按钮，没有任何行为，一般配合JS使用

  <input type="button" value="普通按钮" />
  

  • hidden：隐藏按钮，对用户不可见，通常用于修改某条数据时，记录数据的id值

  <input type="hidden" value="隐藏按钮" />
  

• 属性说明

  • name：表单提交时的"键"

    • name属性和id属性的区别：

      • name属性是和服务器通信时使用的名称

      • id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

  • value：表单提交时对应项的值

    • type="button","reset","submit"时，定义按钮上显示的文本内容

    • type="text","password","hidden"时，定义定义输入框的初始值

    • type="checkbox","radio","file"，定义输入相关联的值

  • checked：radio和checkbox默认被选中的项

  • readonly：text和password设置文本框只读

  • disabled：禁用input元素的功能，所有input均适用

5. 表单之select标签

• 描述：<select>标签有开始和结束标记，主要用做下拉列表

• 属性说明：

  • value：定义提交时的选项值

  • selected：设置后默认选中的该项

  • multiple：布尔属性，设置后为多选，否则默认单选

  • disabled：禁用

• <option>：指定下拉列表的内容

• <optgroup>：给下拉列表的内容分组

• 使用语法：

<select name="">
    <option value="">内容a1</option>
    <option selected="selected" value="">内容a2</option>
    <option value="">内容a3</option>
    <option value="">内容a4</option>
    <optgroup lable="组名">
        <option value="">内容b1</option>
        <option selected="selected" value="">内容b2</option>
        <option value="">内容b3</option>
        <option value="">内容b4</option>
    </optgroup>
    <option value="">内容c1</option>
    <option selected="selected" value="">内容c2</option>
    <option value="">内容c3</option>
    <option value="">内容c4</option>
</select>

6. 表单之textarea标签

• 描述：<textarea>标签有开始和结束标记，主要用做多行文本输入

• 属性说明：

  • name：名称

  • cols：列数

  • rows：行数

  • disabled：禁用

• 使用语法：

<textarea name="" clos="" rows=""></textarea>

7. 表单之label标签

• 描述：<label>标签有开始和结束标记，主要是为input标签定义标注和标记

• 说明：

  • 标签不会呈现任何特殊效果

  • 标签的for属性值应当与相关元素的id属性值相同

• 使用语法：

<input id="yy" type="" name="" />
<label for="yy">标注信息</label>