HTML列表&表单&表格

发表于 | 分类于 | 热度: ℃ |
字数统计: 1,563字 | 阅读时长 ≈ 7分钟

概述

我们在写页面的时候经常会使用列表标签，用来布局文章的标题列表、菜单等，在前端页面中, 往往用表单来制作用户的注册, 登录等功能，本章会讲解列表标签和表单标签的简单如何，以及相关样式

一. 列表 标签

前端中列表分为两种:

  • 有序列表
  • 无序列表

1. 无序列表

无序列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：

1
2
3
4
5
6
7
8
使用方式:         ul>li{列表标题}*3


<ul>
    <li>列表标题</li>
    <li>列表标题</li>
    <li>列表标题</li>
</ul>

列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：

1
2
3
4
5
6
7
ul>(li>a[href=#]{列表标题 $})*3

<ul>
    <li><a href="#">列表标题 1</a></li>
    <li><a href="#">列表标题 2</a></li>
    <li><a href="#">列表标题 3</a></li>
</ul>

显示效果:

Snipaste_2018-08-09_21-05-12.png

2. 有序列表

1
2
3
4
5
6
7
使用方式:         ol>li{列表标题}*3

<ol>
    <li>列表标题</li>
    <li>列表标题</li>
    <li>列表标题</li>
</ol>

显示效果:

Snipaste_2018-08-09_21-05-32.png

请进行如下的 emmet 语法练习: 

1
.box>.box1+.box2
1
#page>div.logo+ul#navigation>li*5>a{Item $}
1
div#header+div.page+div#footer.class1.class2.class3

总结:

  • 我们在写页面的时候经常会使用列表标签

  • 写列表标签的时候, 我们可以去掉前面的点或者是序号: 

    • 1
      2
      3
      4
      5
      <style>
      	li {
              list-style:none; /* 取消列表前面的序号或者是点 */
      	}
      </style>

  • 写所有 html 页面的时候, 都可以使用 emmet 语法

二. HTML表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

action属性 定义表单数据提交地址

method属性 定义表单提交的方式，一般有“get”方式和“post”方式

1
2
3
4
5
使用方式:

<form action="" method="">
	
</form>

2、<label>标签 为表单元素定义文字标注

label 的 for 属性值可以和 input 的 id 名书写一致, 使 label 的点击也能够触发 input 的聚焦

1
2
3
4
5
6
7
label的使用方式:
<label for="">Male</label>
<label for="">Female</label>

label的for属性设置: 
<label for="male">用户名:
<input type="text" id="male">

3、<input>标签 定义通用的表单元素

  • type属性
    • type=”text” 定义单行文本输入框
    • type=”password” 定义密码输入框
    • type=”radio” 定义单选框
    • type=”checkbox” 定义复选框
    • type=”file” 定义上传文件
    • type=”submit” 定义提交按钮
    • type=”reset” 定义重置按钮
    • type=”button” 定义一个普通按钮
  • value属性 定义表单元素的值
  • name属性 定义表单元素的名称，此名称是提交数据时的键名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用方法:

<input type="text" name="username" placeholder="请您输入姓名">

<input type="password" name="password">

<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="0"> 女

<input type="checkbox" name="hobby" value="1"> 唱歌

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

<input type="submit">
<input type="reset">
<input type="button" value="按钮1">

4、<textarea>标签 定义多行文本输入框

1
2
3
4
使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
	textarea的使用
</textarea>

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

1
2
3
4
5
6
7
8
9
使用方法: 

创建带有 4 个选项的选择列表：
<select name="province" id="">
    <option value="1">北京</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
    <option value="4">湖北</option>
</select>

练习:

Snipaste_2018-08-09_21-03-37.png

注册表单实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<form action="http://www..." method="get">
        <p>
            <label>姓名：</label>
            <input type="text" name="username" />
        </p>
        <p>
            <label>密码：</label>
            <input type="password" name="password" />
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="gender" value="0" /> 男
            <input type="radio" name="gender" value="1" /> 女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox" name="like" value="sing" /> 唱歌
            <input type="checkbox" name="like" value="run" /> 跑步
            <input type="checkbox" name="like" value="swiming" /> 游泳
        </p>
        <p>
            <label>照片：</label>
            <input type="file" name="person_pic">
        </p>
        <p>
            <label>个人描述：</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" name="" value="提交">
            <input type="reset" name="" value="重置">
        </p>
</form>

单行文本框文字提示

  • placeholder 设置input输入框的默认提示文字。

总结:

  • 在前端页面中, 我们往往用表单来制作用户的注册, 登录等功能.
  • 表单包含很多内容, 例如:
    • 单选: radio
    • 多选: checkbox
    • 密码: password
    • 文本: text
    • 按钮: reset, submit, file
    • 多行文本输入: textarea
    • 下拉菜单: select option
  • 表单( form )可以直接提交: 提交方法包含 get post
    • action: 提交的服务器地址
    • method: 提交的方法

三. 表格元素及相关样式

1、<table>标签

声明一个表格

2、<tr>标签

定义表格中的行

3、<td>和<th>标签

定义列以及列中的标题

td代表列，th表示列中的标题部分(加粗)

它们的常用属性如下：

  • colspan 设置单元格水平合并，设置值是数值
  • rowspan 设置单元格垂直合并，设置值是数值

表格相关样式属性

  • border-collapse 设置表格的边线合并，如：border-collapse:collapse;
  • border=’1’ 可以设置table的边框大小
  • text-align 可以设置对齐方式: left right center

总结:

  • 在网页中, 表格用一般用 table 标签来做
  • 表格中分为 行 和 列
  • 表格中的行为 tr 标签
  • 表格中的列为 td 标签
    • 其中每一列都可以有一个标题, 我们可以使用 th 标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <th>标题一</th>
        <th>标题二</th>
        <th>标题三</th>
        <th>标题四</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
------ 本文结束------
坚持原创技术分享，您的支持将鼓励我继续创作！
0%