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& ...
随机推荐
- Java实现Http请求的常用方式
一.使用Java自带的java.io和java.net包. 实现方式如下: public class HttpClient { //1.doGet方法 public static String doG ...
- 【Android Studio安装部署系列】四十一、Android Studio安装Alibaba Java Coding Guidelines插件（检查代码规范）
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 该插件主要是对今年发布的<阿里巴巴 Java 开发规约>的一个延伸,它以一个 IDE 的插件存在,可以自动对手册中的 J ...
- Sublime Text 3下载安装以及安装HTML-CSS-JS Prettify代码格式化插件
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Sublime Text的安装以及安装插件步骤. 下载Sublime Text 官网地址:http://www.sublimetex ...
- 微信小程序开发02-小程序基本介绍
前言 前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来: [组件化开发]前端进阶篇之如何编写可维 ...
- .Net Core 根据配置文件动态发布至服务器
前言 一个软件的开发周期需要经历开发.测试.上线三个基本的阶段,同理我们在开发过程中会需要经常切换不同的运行环境..NetCore可以通过配置文件以及写入系统环境变量来自动识别站点的运行环境,保证了数 ...
- Centos7+nginx+keepalived集群及双主架构案例
目录简介 一.简介 二.部署nginx+keepalived 集群 三.部署nginx+keepalived双主架构 四.高可用之调用辅助脚本进行资源监控,并根据监控的结果状态实现动态调整 一.简介 ...
- PyTorch入门（一）向量
什么是PyTorch? PyTorch是Facebook人工智能团队开发的一个机器学习和深度学习工具,用于处理大规模图像分析,包括物体检测,分割与分类.但是它的功能不仅限于此.它与其它深度学习框架 ...
- 粮草先行——Android折叠屏开发技术点（一）
最近有关折叠屏产品的新闻层出不穷,各家手机厂商也分别慢慢地亮出了自家的产品.然而市场上的一些APP仍然没有很好地适配这样的设备,显示不正常和应用重启的状况时有发生.因此,我会用接下来的几篇文章来点出有 ...
- 图片与Base64相互转换 jar包
1.右键项目 -->Properties -->Java Bulid Path-> Libraries -->JRE System Library-->Access ru ...
- javascript函数调用中的方法调用模式
最近想起来之前看过的一种js语法,感觉很实用,但是又想不起来具体的写法.然后在网上浏览了一段时间,终于成功的再现了记忆中的那种语法,嗯~,还是那个熟悉的味道! 代码如下: <script> ...