HTML基础-------HTML标签(3)

HTML标签(3)

表格

作用:制作一个表格

属性:

标签;table>tr>td(或者th)

语义; table:一个表格

tr:一行

td:一个单元格

th:单元格的表头

caption:表格的名字

代码实现一个表格:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>表格练习</title>

    <style type="text/css">

        tr,th,td{

            width: 100px;

        }

    </style>

</head>

<body>

    <table border="1" >

           <tr>

               <th>1</th>

               <th>2</th>

               <th>3</th>

               <th>4</th>

               <th>5</th>

           </tr>

           <tr>

               <td>6</td>

               <td>7</td>

               <td>8</td>

               <td>9</td>

               <td>10</td>

           </tr>

                      <tr>

               <td>11</td>

               <td>12</td>

               <td>13</td>

               <td>14</td>

               <td>15</td>

           </tr>

                      <tr>

               <td>16</td>

               <td>17</td>

               <td>18</td>

               <td>19</td>

               <td>20</td>

           </tr>

    </table>

</body>

</html>

效果图

代码实现合并一个单元格(目标图如下)

我心中的目标图是如上这样的,但是我发现仅通过tr,td,th这些工具有些事是无法做到的,并且我出于初学阶段,可能还有其他方法去解决我的问题吧。

问题如下:可以看出我是准备把一行的长度设置为5的,但是却无法完成,结果图如下,大家可以对比一下看

构造出来的骨架一行只有四格,我的代码如下,我的代码里是想要构造出一行有5格的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>表格练习</title>

    <style type="text/css">

        tr,th,td{

            width: 100px;

        }

    </style>

</head>

<body>

    <table border="1" >

           <tr>

               <th rowspan="2">1</th>

               <th>2</th>

               <th rowspan="2" colspan="2">3</th>

               <th>4</th>

           </tr>

           <tr>

               <th>5</th>

               <th>6</th>

           </tr>

            <tr>

               <td>7</td>

               <td>8</td>

               <td>9</td>

               <td colspan="2" rowspan="2">10</td>

           </tr>

               <tr>

               <td>11</td>

               <td colspan="2">12</td>

           </tr>

    </table>

</body>

</html>

所以我在想是不是我需要一个完整的5行来撑起整个结构,所以就试了一下,好像还真是这样,效果图与代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>表格1</title>

    <style type="text/css">

        tr,td,th{

            width: 100px;

        }

    </style>

</head>

<body>

    <table border="1" >

        <tr>

            <th rowspan="2">1</th>

            <th>2</th>

            <th  colspan="2" rowspan="2">3</th>

            <th>4</th>

        </tr>

         <tr>

             <th>5</th>

             <th>6</th>

         </tr>

             <td>7</td>

             <td>8</td>

             <td>9</td>

             <td>10</td>

             <td>11</td>

         </tr>

         <tr>

             <td>12</td>

             <td>13</td>

             <td>14</td>

             <td rowspan="2" colspan="2">15</td>

         </tr>

             <td>16</td>

             <td colspan="2">17</td>

         </tr>

    </table>

</body>

</html>

感觉这样想是对的,因为本来每一个单元格的长短是随着里面内容的多少在变化的。

表单元素

表单这里的内容较多,暂时只学习了最基础的,所以可能会缺一些,慢慢会补充的,先记自己已经学到的吧。

表单：网页上可以提供用户输入和选择的控件。

form:所有的表单元素写在form标签内部.不是一个结构标签而是一个功能标签

功能:规定我们提交的数据发送到哪里,发送的方法是哪种。

文本框

作用:允许用户输入文本。

标签: input

使用方式:通过属性type所对应的属性值的不同来实现不同功能。

用代码来完成下列效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>表单元素</title>

</head>

<body>

    <form >

        <p>*手机号码<input type="text" />@163.com</p>

      <p>*图片验证码<input type="text" /><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=496740924,3861938915&fm=26&gp=0.jpg" width="70px"/></p>

      <p><input type="button" value="免费领取验证码" /></p>

      <p>*短信验证码<input type="text" /></p>

      <p>*密码<input type="password" /></p>

      <p>*确认密码<input type="password" /></p>

      <p><input type="checkbox" id="1"/><label for="1">同意服务条款和用户须知,隐私权相关政策</label></p>

      <!--上面的labor  for是用来绑定标签的一个方法,可以解决用户点不到小方框,这样用户点击字也行-->

      <p><input type="submit"  value="确认注册"/></p>

    </form>

</body>

</html>

代码实现下列效果图

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>表单元素2</title>

</head>

<body>

    <form >

        <p>最喜欢的水果</p>

        <p><input type="radio"/  name="1">1.苹果</p>

        <p><input type="radio"/ name="1">1.西瓜</p>

        <p><input type="radio"/ name="1">1.香蕉</p>

        <!--这里只有把名字全设置成一样的才能实现单选-->

    </form>

</body>

</html>

文本域

标签:textarea

属性：rows控制文本框高度 cols控制文本长度

下拉菜单

是组标签,必须同时出现,有嵌套关系

select>option

用代码实现下列效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>表单元素3</title>

</head>

<body>

    <form >

        <p>您对于我们公司的看法是：</p>

        <p><textarea name="" rows="10" cols="30"></textarea></p>

        <p>

            您的学历是

            <select >

                <option >大学</option>

                <option >高中</option>

                <option >初中</option>

                <option >小学</option>

                <option >幼儿园</option>

            </select>

        </p>

    </form>

</body>

</html>

HTML杂项

注释

感觉这玩意在任何语言中都存在,格式()

字符实体

有一些特殊符号,并不能在文本内容中直接写。

HTML提供了一套书写特殊字符的替代符号,就是字符实体,或叫转义字符。

常用:

废弃标签

一些已经废弃,但还依旧被程序员使用的标签。

HTML基础-------HTML标签(3)的更多相关文章

C#基础---Attribute(标签）和 reflect（反射) 应用二
以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...
[转] Git 基础 - 打标签
2.6 Git 基础 - 打标签打标签同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列 ...
h5标签基础 meta标签
<meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/> ,//u ...
js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
HTML&CSS基础-html标签的实体
HTML&CSS基础-html标签的实体作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...
HTML&CSS基础-meta标签
HTML&CSS基础-meta标签作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...
HTML基础 img标签做一个图库
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
前端基础小标签3 H5新标签
第二部分H5的新标签一.<!-- mark标签 1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样 2.浏览器通常会用黄色显示m ...
html 基础--一般标签
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

随机推荐

SQLServer之附加数据库
附加数据库注意事项必须首先分离数据库. 尝试附加未分离的数据库将返回错误. 附加数据库时,所有数据文件(MDF 文件和 LDF 文件)都必须可用. 如果任何数据文件的路径不同于首次创建数据库或上次附 ...
nginx之location配置详解及案例
语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码, ...
Android 开发之v4库冲突问题解决方案说明
问题背景 Android Studio 开发时使用到了 GSYVideoPlayer 开源的播放器框架,配置信息如下: implementation 'com.shuyu:GSYVideoPlayer ...
免费申请使用IBM Cloud Lite(轻量套餐) 续
之前尝试申请了IBM的轻量套餐,过程很简单,操作起来也比较方便,就是能够用到的地方不多,虽说几乎是无限流量且永久免费,我能做的也只是做个小网站免费用户默认的是轻量应用服务,如果需要功能更多更全的应用 ...
跟我一起学opencv 第二课之图像的掩膜操作
1.掩膜(mask)概念用选定的图像,图形或物体,对处理的图像(全部或局部)进行遮挡,来控制图像处理的区域或处理过程.用于覆盖的特定图像或物体称为掩模或模板.光学图像处理中,掩模可以足胶片,滤光片等 ...
VS Code实用技能1 - 代码折叠、面包屑
VS Code实用技能 VS Code实用技能1 - 代码折叠.面包屑一.代码折叠 ubuntu ctrl + shift + { ctrl + shift + } ctrl + k , ctrl ...
使用 Moq 测试.NET Core 应用 - Why Moq?
什么是Mock 当对代码进行测试的时候, 我们经常需要用到一些模拟(mock)技术. 绿色的是需要被测试的类, 黄色是它的依赖项, 灰色的无关的类在一个项目里, 我们经常需要把某一部分程序独立出来以 ...
RomUtil【Android判断手机ROM，用于判断手机机型】
参考资料 Android判断手机ROM 正文有时候需要判断手机系统的ROM,检测ROM是MIUI.EMUI还是Flyme,可以使用getprop命令,去系统build.prop文件查找是否有对应属性 ...
目标检测 IOU（交并比）理解笔记
交并比(Intersection-over-Union,IoU): 目标检测中使用的一个概念是产生的候选框(candidate bound)与原标记框(ground truth bound)的交叠率 ...
FastDFS分布式文件系统&Nginx负载均衡最小环境安装配置［超级详解］
1.背景 FastDFS 是一款开源的.分布式文件系统(Distributed File System),由淘宝开发平台部资深架构师余庆开发.该开源项目的主页是 http://code.google. ...

HTML基础-------HTML标签(3)

HTML基础-------HTML标签(3)的更多相关文章

随机推荐

热门专题