5-[HTML]-body常用标签2

1.表格标签 table

表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table标签</title>

</head>

<body>

    <div class="table">

        <table border="1px" cellspacing="0">

            <!--表格头-->

            <thread>

                <tr>  <!--表格行row-->

                    <th>星期1</th>  <!--表格列 table-head，【注意】这里使用的是th-->

                    <th>星期2</th>

                    <th>星期3</th>

                    <th>星期4</th>

                </tr>

            </thread>

            <!--表格体-->

            <tbody>

                <tr>  <!--表格行row-->

                    <td>math</td>   <!--表格列 table-data，【注意】这里使用的是td-->

                    <td>chinese</td>

                    <td>physical</td>

                    <td>sports</td>

                </tr>

                <tr>

                    <td>math</td>

                    <td>chinese</td>

                    <td>physical</td>

                    <td>sports</td>

                </tr>

                <tr>

                    <td>math</td>

                    <td>chinese</td>

                    <td>physical</td>

                    <td>sports</td>

                </tr>

            </tbody>

        </table>

    </div>

    <hr>

    <hr>

    <div id="table">

        <table border="2px" cellspacing="0">

            <thead>

                <tr>

                    <th></th>

                    <th>星期3</th>

                    <th>星期1</th>

                    <th>星期2</th>

                    <th>星期2</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td rowspan="2">上午</td>   <!--rowspan 合并行(竖着合并)-->

                    <td>sports</td>

                    <td>math</td>

                    <td>chinese</td>

                    <td>chinese</td>

                </tr>

                <tr>

                    <td>sports</td>

                    <td>math</td>

                    <td>chinese</td>

                    <td>chinese</td>

                </tr>

                <tr>

                    <td rowspan="2">下午</td>

                    <td>sports</td>

                    <td>math</td>

                    <td>chinese</td>

                    <td>chinese</td>

                </tr>

                <tr>

                    <td>sports</td>

                    <td>math</td>

                    <td>chinese</td>

                    <td>chinese</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td colspan="5">备注：2018-01-02</td>  <!--colspan 合并列(横着合并)-->

                </tr>

            </tfoot>

        </table>

    </div>

</body>

</html>

2.表单标签 form

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）

表单的作用

表单用于显示、手机信息，并将信息提交给服务器

　　1.语法：

<form>允许出现表单控件</form>

　　（1）表单属性见下图：

　　（2）表单控件分类见下图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单控件</title>

</head>

<body>

    <div class="form">

        <!-- form标签是一个块级元素   被提交 -->

        <form action="https://www.baidu.com" method="get">

            <p>

                <!-- label标签行内元素  input是行内块元素-->

                <label for='user'>用户名:</label>

                <input type="text" name="username" id="user" placeholder="请输入用户名">

            </p>

            <p>

                <label for="password">密码：</label>

                <input type="password" name="password" id="password" placeholder="请输入密码">

            </p>

            <!-- 单选框  checked会被默认选中，产生互斥的效果 name值要相同-->

            <p>

                用户性别：

                <input type="radio" name="sex" value="男" checked="">男

                <input type="radio" name="sex" value="女">女

            </p>

            <!-- 复选框 -->

            <p>

                用户的爱好:

                <input type="checkbox" name="checkfav" value="吃" checked="check">吃

                <input type="checkbox" name="checkfav" value="喝">喝

                <input type="checkbox" name="checkfav" value="玩">玩

                <input type="checkbox" name="checkfav" value="乐">乐

            </p>

            <p>

                <!-- 文本域 -->

                自我介绍：

                <textarea cols="20" rows="5"  name="txt" placeholder="请做自我介绍"></textarea>

            </p>

            <p>

                <!-- 下拉列表 -->

                <select name="sel" size="3" multiple="">

                    <option value="深圳" selected>深圳</option>

                    <option value="北京">北京</option>

                    <option value="沙河">沙河</option>

                    <option value="山东">山东</option>

                    <option value="福建">福建</option>

                </select>

            </p>

            <p>

                <!-- 显示普通的按钮 -->

                <input type="button" name="btn" value="提交" disabled="disabled">

                <!-- 重置按钮 -->

                <input type="reset" name="">

                <!-- 提交form表单使用 type=submit按钮 -->

                <input type="submit" name="btn" value="submit">

            </p>

        </form>

        <button type="button">按钮</button>

        <!-- 文件上传 -->

        <form action="https://www.mi.com" enctype="multipart/form-data">

            <p>

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

            </p>

        </form>

    </div>

</body>

</html>

5-[HTML]-body常用标签2的更多相关文章

HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
html常用标签介绍
常用标签介绍文本最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
HTML常用标签总结
HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...
html新增一些常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
[刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲
MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...
CSS常用标签
CSS常用标签一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
HTML基础（一）——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
HTML-学习笔记（常用标签）
本篇博客讲一讲HTML中的标签 HTML 标题标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...
帝国CMS文章随机调用等一些常用标签
1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...
9月5日网页基础知识通用标签、属性（body属性、路径、格式控制）通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

随机推荐

springMVC入门-04
这一讲介绍springMVC使用rest风格添加数据的实现.在之前的一讲中添加一个链接跳转到add.jsp页面,对应代码如下所示: <%@ page language="java&qu ...
PSR规范学习笔记
PSR已经经历了5次变革,如今PSR4就是最新的标准,但是还是有必要了解下5个版本的内容的,于是去php-fig网站看了下英文原版: 大概看了遍,发现这规范很多的必须很多时候只是建议,但是PHP解析器 ...
Mysql 安装服务无法启动解决方案与使用的一般使用指令
问题描述: 在安装mysql 时,如果第一次没安装成功,第二次重装可能出现莫名奇妙的情况.通过一番尝试,发现,安装往上的教程还是无法成功安装的主要原因是第一次安装虽然未成功,但是mysql 默认的33 ...
T-SQL 标识符
在T-SQL语言中,对SQLServer数据库及其数据对象(比如表.索引.视图.存储过程.触发器等)需要以名称来进行命名并加以区分,这些名称就称为标识符. 通常情况下,SQLServer数据库.数据库 ...
Django之模板配置（template）
Django模板系统官方文档 jinja2模块中文 jinja2模块官方常用语法只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量在Djan ...
Hibernate三种状态；query查询；ResultTransformer转换为pojo对象；能够将query语句写在xml中；Criteria查询；ProjectionList总和/f分组等函数
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010026901/article/details/24256091 Session操作过程中的po ...
window7远程桌面到server不能复制粘贴解决的方法
用远程桌面登陆server不能在本机和远程server之间粘贴文本了,即不能从本机复制文本粘贴到server,也不能从server复制文本粘贴到本机. 下面是解决方法之中的一个,试了几次都非常管用户: ...
Raft一致性算法
所有的分布式系统,都面临的一个问题是多个节点之间的数据共享问题,这个和团队协作的道理是一样的,成员可以分头干活,但总是需要共享一些必须的信息,比如谁是 leader, 都有哪些成员,依赖任务之间的顺序 ...
P1439 【模板】最长公共子序列
题目描述给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最长公共子 ...
【转】说说Android中的style和theme
最近在做软件从2.3到4.0的改变的一些工作,其中涉及了一些style和theme相关的东西.上网上查了一些东西,这个一并说说.关于android中style和theme的基本使用,这里就不再赘述了, ...