首页 前端知识 html 无序标签有序标签及表单

html 无序标签有序标签及表单

2024-11-10 09:11:24 前端知识 前端哥 150 325 我要收藏

## 列表标签

### 1、无序列表`<ul>`,无序列表中的每一项是`<li>`

```html

<ul>

    <li>默认1</li>

    <li>默认2</li>

    <li>默认3</li>

</ul>

```

**属性:**

 - `type="属性值"`。属性值: `disc`(实心原点,默认),`square`(实心方点),`circle`(空心圆)。

列表之间是可以**嵌套**的。代码:

```html

  <ul>

    <li><b>北京市</b>

        <ul>

            <li>海淀区</li>

        </ul>

    </li>

  </ul>

```

**li里面什么都能放,甚至可以再放一个ul**。

```css

list-style-position: inside   /* 给 ul 设置这个属性后,将小圆点包含在 li 元素的内部 */

```

### 2、有序列表`<ol>`

**属性:**

 - `type="属性值"`。属性值:1(阿拉伯数字,默认)、a、A、i、I。结合`start`属性表示`从几开始`。

```html

<ol type="1">

    <li>呵呵</li>

</ol>

<ol type="i" start="4">

    <li>哈哈</li>

</ol>

```

### 3、定义列表`<dl>`

备注:dt、dd只能在dl里面

```html

<dl>

    <dt>购物指南</dt>

    <dd>

        <a href="#">购物流程</a>

        <a href="#">会员介绍</a>

        <a href="#">生活旅行</a>

    </dd>

</dl>

```

## 表格标签:`<table>`表示。

一个表格`<table>`是由每行`<tr>`组成的,每行是由每个单元格`<td>`组成的。

```html

<table>

    <tr>

        <td></td>

        <td></td>

    </tr>

</table>

```

例如,3行4列的单元格:3个tr  4个td


 

**`<table>`的属性:** (记觉得重要的)

 - `border`:边框。像素为单位。

 - `style="border-collapse:collapse;"`:单元格的线和表格的边框线合并(表格的两边框合并为一条)

 - `bordercolor`:表格的边框颜色。

 - `cellpadding`:单元格内容到边的距离,像素为单位。设置属性`dir="rtl"`,指的是内容到右边那条线的距离。

 - `cellspacing`:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0

 - `bgcolor="#99cc66"`:表格的背景颜色。

 - `background="路径src/..."`:背景图片。

 - `bordercolorlight`:表格的上、左边框,以及单元格的右、下边框的颜色

 - `bordercolordark`:表格的右、下边框,以及单元格的上、左的边框的颜色

 - `dir`:公有属性,单元格内容的排列方式(direction)。 可以 取值:`ltr`:从左到右(left to right,默认),`rtl`:从右到左(right to left)

单元格带边框的效果:

```css

style="border-collapse:collapse;"

```


 

### `<tr>`:行

**属性:**

 - `dir`:公有属性,设置这一行单元格内容的排列方式。可以取值:

    - `ltr`:从左到右(left to right,默认)

    - `rtl`:从右到左(right to left)

 - `align="center"`:一行的内容水平居中显示,取值:left、center、right

 - `valign="center"`:一行的内容垂直居中,取值:top、middle、bottom

### `<td>`:单元格

**属性:**

 - `align`:内容的横向对齐方式。属性值:left right center。

 - `valign`:内容的纵向对齐方式。属性值:top middle bottom

 - `background`:设置这个单元格的背景图片。

### 单元格的合并

单元格的属性:

- `colspan`:横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。

- `rowspan`:纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。


 

### `<th>`:加粗的单元格。相当于`<td>` + `<b>`

### `<caption>`:表格的标题。使用时和`tr`标签并列

 - 属性:`align`,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom


 

## 表单标签:`<form>`表示,用于与服务器的交互。

**属性:**

 - `name`:表单的名称,用于JS来操作或控制表单时使用;

 - `id`:表单的名称,用于JS来操作或控制表单时使用;

 - `action`:指定表单数据的处理程序,一般是PHP,如:action=“login.php”

 - `method`:表单数据的提交方式,一般取值:get(默认)和post

注意:表单和表格嵌套时,是在`<form>`标记中套`<table>`标记。


 

### `<input>`:输入标签(文本框)'用于接收用户输入。

```html

<input type="text" />

```

**属性:**

- **`type="属性值"`**:文本类型。属性值可以是:

    - `text`(默认)

    - `password`:密码类型

    - `radio`:单选按钮,如果想互斥,必须要有相同的name属性。

    - `checkbox`:多选按钮,**name 属性值相同的按钮**作为一组进行选择。

    - `checked`:将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时,可以用这个属性。

    - `hidden`:隐藏框,在表单中包含不希望用户看见的信息

    - `button`:普通按钮,结合js代码进行使用。

    - `submit`:提交按钮,传送当前表单的数据给服务器或其他程序处理。

    - `reset`:重置按钮,清空当前表单的内容,并设置为最初的默认值

    - `image`:图片按钮。

    - `file`:文件选择框。

 - **`value="内容"`**:文本框里的默认内容(已经被填好了的)

 - `size="50"`:表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。

注意**size属性值的单位不是像素哦**。

 - `readonly`:文本框只读,不能编辑。

 - `disabled`:文本框只读,不能编辑,光标点不进去。属性值可以不写。


 

```html

    <form>

        姓名:<input value="呵呵" >逗比<br>

        昵称:<input value="哈哈" readonly=""><br>

        名字:<input type="text" value="name" disabled=""><br>

        密码:<input type="password" value="pwd" size="50"><br>

        性别:<input type="radio" name="gender" id="radio1" value="male" checked="">男

              <input type="radio" name="gender" id="radio2" value="female" >女<br>

        爱好:<input type="checkbox" name="love" value="eat">吃饭

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

        <input type="image" value="图片按钮1"><br>

        <input type="image" src="1.jpg" width="800" value="图片按钮2"><br>

        <input type="file" value="文件选择框">

    </form>

```

### `<select>`:下拉列表标签

**属性:**

- `multiple`:可以对下拉列表中的选项进行多选。可以写成 `multiple=""`,`multiple="multiple"`。

- `size="3"`:如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。

- `<option>`标签的属性:`selected`:预选中。没有属性值。

```html

    <form>

        <select>

            <option>小学</option>

            <option selected="">研究生</option>

        </select>

        <br><br><br>

        <select size="3">

            <option>高中</option>

            <option>研究生</option>

        </select>

        <br><br><br>

        <select multiple="">

            <option>小学</option>

            <option selected="">大学</option>

            <option>研究生</option>

        </select>

        <br><br><br>

    </form>

```

### `<textarea>`标签:多行文本输入框

**属性:**

 - `rows="4"`:指定文本区域的行数。

 - `cols="20"`:指定文本区域的列数。

 - `readonly`:只读。

```html

    <form>

        <textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>

    </form>

```

### `<label>`标签

```html

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>

<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

```

```html

<input type="checkbox" id="kk" />

<label for="kk">10天内免登陆</label>

```




 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20172.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!