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& ...
随机推荐
- 「技巧」如何将Sketch改为深色模式
之前Sketch只能根据mac系统的外观设置变更皮肤.在更新了版本54之后,可以脱离操作系统,在自己的偏好设置中更改外观了. 准备 Sketch 54 更多工具:whose.design 第一步:打开 ...
- PyQt5 api 帮助文档
学习PyQt5的帮助文档是通过,使用help(PyQt5 class)的方式在console端输出帮助内容,常用的方法和属性查找起来不是很方便,现在放在网上以方便大家使用. QWidget Qt QM ...
- java EE中的hello1.java及Annotation(注解)
一.Annotation(注解) 注解(Annotation)很重要,未来的开发模式都需要注解,注解是java.lang.annotation包,Annotation是从java5引入的,它提供一些不 ...
- 模式识别笔记4-集成学习之AdaBoost
目前集成学习(Ensemble Learning) 分为两类: 个体学习器间存在强依赖关系.必须串行化生成的序列化方法:Boosting 个体学习器间不存在强依赖关系,可同时生成的并行化方法:Bagg ...
- python进程和线程（六）
协程 协程,又称微线程,纤程.英文名Coroutine.顾名思义,协程是协作式的,也就是非抢占式的程序(线程是抢占式的).协程的关键字是yield,一看到这个就想到了生成器对不对?那就顺便回顾一下生成 ...
- [Abp vNext 源码分析] - 3. 依赖注入与拦截器
一.简要说明 ABP vNext 框架在使用依赖注入服务的时候,是直接使用的微软提供的 Microsoft.Extensions.DependencyInjection 包.这里与原来的 ABP 框架 ...
- ASP.NET Core Middleware 抽丝剥茧
一. 宏观概念 ASP.NET Core Middleware是在应用程序处理管道pipeline中用于处理请求和操作响应的组件. 每个组件是pipeline 中的一环. 自行决定是否将请求传递给下一 ...
- Python + PyQt5 实现美剧爬虫可视工具（二）
美剧<权力的游戏>终于开播最后一季了,在上周写了个简单的可视化美剧的爬虫软件来爬取美剧,链接:https://www.cnblogs.com/weijiutao/p/10614694.ht ...
- C#版[击败99.69%的提交] - Leetcode 242. 有效的同构异形词 - 题解
C#版 - Leetcode 242. 有效的同构异形词 - 题解 Leetcode 242.Valid Anagram 在线提交: https://leetcode.com/problems/val ...
- java~使用自己的maven本地仓库
本地仓库 主要是一种缓存,当你使用远程仓库中下载组件后,它下一次会优先从本地进行加载,一般位于USER_HOME/.m2目录下,我们自己也可以建立公用的包,把包发布到本地仓库,自己在其它项目里直接可以 ...