html标签

最新推荐文章于 2023-07-14 18:04:08 发布

XTY00

最新推荐文章于 2023-07-14 18:04:08 发布

阅读量117

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/XTY00/article/details/88716885

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.input标签

1）规定用户可输入数据的输入字段；

2）根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

3）type属性：

button
checkbox
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
submit
text
time
url
week

4）Value属性：会显示在前端页面

对于按钮：规定按钮上的文本

对于图像按钮：传递到脚本的字段的符号结果

对于复选框和单选按钮：定义 input 元素被点击时的结果。

对于隐藏、密码和文本字段：规定元素的默认值。

注释：不能与 type="file" 一同使用。

注释：对于 type="checkbox" 以及 type="radio"，是必需的

5）name属性：

规定 input 元素的名称。name 属性用于在提交表单时搜集字段的值。

2.link标签：链接到外部样式文件

引入外部CSS的链接： <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head>

1）rel属性：必需。定义当前文档与被链接文档之间的关系。

2）href属性：定义被链接文档的位置。

2.link标签：链接一个外部样式表

语法：

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

属性：1）rel ：规定当前文档与被链接文档之间的关系。

2）href：规定被链接文档的位置。

3）type：规定被链接文档的 MIME 类型。（可不写）

3.table标签：定义一个表格

简单表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）

复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)

如：
<table width="400" border="1">
<caption>表格的标题</caption>
<col align="left"/>
<col align="left"/>
<col align="left" />
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
<td>脚注2</td>
</tr>
</tfoot>

如：

<table id="" class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>ID</th>
        <th>学生姓名</th>
        <th>所属班级</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for row in result %}
    <tr>
        <td>{{ row.id }}</td>
        <td>{{ row.s_name }}</td>
        <td cls_id="{{ row.classID }}">{{ row.cid }}</td>
        <td><a class="btn-edit">对话框编辑</a>|
        <a>删除</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

jquery为其赋值：

    $('.btn-edit').click(function () {
        $('#shadow,#editModal').removeClass('hide');
        /*
        获取当前数据信息$(this)
         */
        var tds = $(this).parent().prevAll();
        var studentId = $(tds[2]).text();
        var studentName = $(tds[1]).text();
        var classId = $(tds[0]).attr('cls_id');
        console.log(studentId,studentName,classId);
        /*
        赋值
         */
        $('#edit_id').val(studentId);
        $('#edit_name').val(studentName);
        $('#add_classId').val(classId);
    });

4.select标签：复选框

<option>标签：

1）value值用于提交后台，后台如何接收数据呢？通过select标签的name属性给后台传值，传值的形式是通过name值作为key，value值作为value，发送给后台，；例如：用户在前端选择2，那么state作为key，2作为value传给后台。

2）一对option标签间的值显示在前端页面

XTY00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html标签

1.input标签1）规定用户可输入数据的输入字段；2）根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等3）type属性： button checkbox date datetime datetime-local email file hidden im...
复制链接

扫一扫