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& ...
随机推荐
- 用samba来创建windows下的文件共享
前言 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,而SMB是Server Message Block的缩写,即为服务器消息块 ,SMB主要是作为Microsoft的网络 ...
- IconFont的iOS使用
IconFont的使用 Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具. https:// ...
- C# Npoi 实现Excel与数据库相互导入
十年河东,十年河西,莫欺少年穷! NPOI支持对 Word 和 Excel 文件的操作! 针对 Word 的操作一般用于打印技术!说白了就是利用 Word 文件作为模板,生成各种不同的打印!具体用到的 ...
- 深入理解 call，apply 和 bind
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- SpringBoot 2.X集成Hive-jdbc 3.1.1
最近公司有一个需求,需求的内容是根据用户页面选择的参数条件查询Hive,数量量大致是300万以内,要求3秒响应.使用的其它的技术就不要说了,先说说SpingBoot集成Hive-jdbc吧,网上虽然有 ...
- 用ASP.NET Core 2.1 建立规范的 REST API -- 缓存和并发
本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314 ...
- 使用 Moq 测试.NET Core 应用 -- Mock 行为
第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html 第二篇文章, 关于方法Mock的介绍: https://www.cnbl ...
- 『集群』002 Slithice 集群配置工具 的使用
Slithice 集群配置工具 的使用 Slithice集群配置工具 主界面 在测试 Slithice 的 Demo 中,我配置了 7个服务端: 一个 WCF 的 中央服务端: 两个 WCF 的 成员 ...
- VC6.0打开或添加工程时崩溃的解决方法
官方解决办法(英文):http://support.microsoft.com/kb/241396/en-us 网友解决(中文):http://blog.163.com/wjatnx@yeah/blo ...
- 2.2Bind建立配置文件和实体的映射「深入浅出ASP.NET Core系列」
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 新建MVC项目 这次我们没有使用控制台项目,而是使用mvc来测试. 如下图所示,选择空的项目,建完后,记得把项目设 ...