Web前端笔记|表格、＜div＞标签、＜span＞标签、列表、表单

目录

表格

简单表格

表格的样式

表格的合并

使用标签

< div>标签

< span>标签

无序列表

有序列表

定义列表

表单

文本框和密码框

单选按钮和复选框

按钮

普通按钮

提交按钮

重置按钮

图像域和文件域

文本域和列表

---

表格

简单表格

由表题、表头、单元格构成。

<!--<table>为表格标记-->
<table>
    <!--<caption>为表题标签-->
    <caption>表题</caption>
    <!--<tr>为行标签-->
    <tr>
        <!--<td>为表头标记-->
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <!--<td>为单元格-->
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

表格的样式

可以设置表格宽度、高度、对齐方式、插入图片等。如：

<table align="center" width="66%" height="480" align="center">

表格的合并

<td rowspan="跨的行数">
<td colspan="跨的列数">

跨的列数和行数的对象都是当前单元格。

使用<colgroup>标签

设置不同列的样式。如：

    <colgroup>
        <col style="background-color: #7ef5ff">
        <col style="background-color: #B8E0D2">
        <col style="background-color: #D6EADF">
        <col style="background-color: #EAC4D5">
    </colgroup>

< div>标签

<div>的首标签中的样式作用于首尾标签中的内容。

<div id="value" align="value" class="value" style="value">
</div>

id：等于<div>的名字，通常配合CSS使用。

align：用于控制<div>标签中元素的对齐方式，其值可以是left、center和right，分别用于设置元素的居左、居中和居右对齐。

class：用于设置<div>标签中元素的样式。其值为CSS样式中的class选择符。

style：用于设置<div>标签中元素的样式。其值为CSS属性值，各属性值应用分号分隔。

< span>标签

<span>标签是行内标签，语法格式同<div>。当其它行内元素都不合适时使用。

无序列表

<ul type=符号类型>
    <li>第一项</li>
    <li>第二项</li>
</ul>

符号类型：disc实心圆（默认）、circle：空心圆、square：实心正方形。可为ul标签或li添加type属性。

有序列表

<ol type=序号类型 start="起始排列数值">
    <li>第一项</li>
    <li>第二项</li>
</ol>

序号类型：1、a、A、i、I

定义列表

<dl>
        <dt>名词一</dt>
    <dd>解释一</dd>
    <dd>解释二</dd>
        <dt>名词二</dt>
    <dd>解释一</dd>
    <dd>解释二</dd>
</dl>

表单

文本框和密码框

表单是与用户交互的区域，比如登录界面。

<input type="text" name=" " size=" " maxlength=" " value=" ">

当type属性值是text时，输入可见。为password，则输入文本框中文字以星号“*”或圆点表示。

name：文本框的名称，用于和页面的其他控件加以区别；不能包含特殊字符。

size：定义文本框在页面中显示的长度，以字符为单位。

maxlength：定义文本框最多可以输入的文字数，以字符为单位。

value：定义文本框中的默认值。

单选按钮和复选框

<input type="radio" value="单选按钮的取值" name="单选按钮名称" checked="checked"/>

value：设置用户选中该项目后，传送到处理程序中的值。

name：单选按钮的名称。一组单选按钮选中，往往其名称相同，这样在传递时才能更好地对某一个选择内容的取值进行判断。

checked：表示这一单选按钮默认被选中，在一组单选按钮中只能友一项单选按钮被设置为checked。

<input type="checkbox" value="复选框的取值" name="名称" checked="checked"/>

在一组复选框中，可以设置多个复选框被默认选中，其他同单选按钮。

按钮

普通按钮

<input type="button" value="按钮上显示的文字" name="按钮名称" onclick="处理程序"/>

onclick：当鼠标点击按钮时进行的处理。

提交按钮

<input type="submit" value="按钮上显示的文字" name="按钮名称"/>

不需要设置onclick属性，在单击此类按钮时可实现表单内容的提交。

当没有设置value属性时，其值默认为“提交”。

重置按钮

<input type="reset" value="按钮上显示的文字" name="按钮名称"/>

不需要设置onclick属性，在单击此类按钮时可实现表单内容的清除，并恢复默认表单设定。

当没有设置value属性时，其值默认为“重置”。

定义按钮时，除了使用<input>标签以外，也可以使用<button>双标签。

图像域和文件域

图像域是指可以用在按钮位置上的图片，这幅图片具有按钮的功能。

<input type="image" src="" name=" "/>

name为所代表的按键，例如submit、button等。默认值为“button”。

文件域用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。

<input type="file" accept="" name=" "/>

accept：所接受的文件类别。参考：

http请求头中的Accept的用处和常用的值_请求头accept_good_good_xiu的博客-CSDN博客

name为控件的名称标识，用于与页面中其它控件区别。

文本域和列表

文本域可以添加多行文字，从而输入更多文本。在一些留言板中常见。

<textarea name="文本域名称" cols="列数" rows="行数"></textarea>

列表类的控件主要用来选择给定答案中的一种，它主要是出于节省页面空间的目的而设计的。

<select name="">
                        <option value="">选项显示内容</option>
                        <option value="">选项显示内容</option>
                    </select>

详见：<select> - HTML（超文本标记语言） | MDN (mozilla.org)

当声明multiple这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。