03表格和表单标签的简单使用
表格和表单标签
一、表格
01、table标签
tr：表示一行
th（table head）：表示表头的单元格
td（table body）：表示单元格
border=“1” ：给table整体加上边框 并且 给每一个单元格加上了边框
align=“center” ：让表格整体在body中居中
cellspacing（cell本意是细胞的意思 cell也是单元格 spacing 空隙):单元格间距
cellpadding：内容与边框之间的距离
width=“800”：整个单元格的宽度
height=“300”：整个单元格的高度
02、img标签
相对路径和绝对路径:
- 绝对路径（电脑中的具体位置，从盘符开始算起）：F:\20200706\01-css\day01\代码\images\up.png
- 相对路径（以当前的文件的相对位置）：以 ./ 或者 …/打头，相对于本文件 ./images/up.jpg
./ 表示相当目录 本文件的当前 省略不写
…/ 上一级目录 本文件的上一级
03、tr标签
aligin=“center” ： 让单元格中的内容在单元格居中对齐
bgcolor=“skyblue” ：给一行加上背景颜色
04、td标签
- colspan：列跨度（合并单元格时需要合并的列数）
- rowspan：行跨度（合并单元格时需要合并的行数）
- valign=“top”:在表格内顶部对齐
05、例子
（1）代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>歌曲排行榜</title>
</head><body><h1 align="center">歌曲排行榜</h1><table border="1" cellspacing="0" width="800" height="300" align="center"><tr align="center" bgcolor="skyblue"><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr><tr align="center"><td>1</td><td>不想睡</td><td><img src="./images/up.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr><tr align="center"><td>2</td><td>微微</td><td><img src="./images/up.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr><tr align="center"><td>3</td><td>勇气</td><td><img src="./images/down.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr><tr align="center"><td>4</td><td>重</td><td><img src="./images/up.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr><tr align="center"><td>5</td><td>还是分开</td><td><img src="./images/down.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr><tr align="center"><td>6</td><td>海底</td><td><img src="./images/up.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr><tr align="center"><td>7</td><td>万有引力</td><td><img src="./images/up.jpg" alt=""></td><td>18615</td><td>9853686</td><td>贴吧 图片 百科</td></tr></table>
</body></html>
（2）运行结果
二、表单
表单（form）：是用来收集上网人的数据的。
01、在网页上写一个内容最好使用标签包起来？
- 方便CSS选中它，给它样式
- 方便JS选中它，给它行为
02、input标签
input 叫表单元素，它里面一个属性叫type，可以指定是什么样的表单元素：
- type=“text” 普通一文本框
- type=“password” 密码框
- type=“radio” （radio 收音机）：要想只能选一个，必须加上name属性，并且name属性值必须要一样
- type=“checkbox” 复选框
- type=“button” 普通按钮
- type=“reset” 重置按钮，目前来说没用了
- type=“submit” 提交按钮 和 type="button"有本质区别
- …
03、select+option标签
select+option: 这是一对标签，一组标签。用的时候都是配对使用的。
- select表示下拉菜单
- option表示菜单中的每一项
- selected=“true”：对于一个属性来说，如果它的值是一个true，这个值可以不写，可以简写为selected。
04、焦点
- 获取焦点：对于一个输入框来说，鼠标点一下，光标在框中闪动
- 失去焦点：输入框中没有光标闪动
05、例子
（1）代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单提交</title>
</head>
<body><form action=""><!-- 普通输入框 --><label for="name">姓名：</label><input type="text" id="name"><br><!-- 密码输入框 --><label for="pwd">密码：</label><input type="password" id="pwd"><br><!-- 单选框--><span>性别：</span><input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">人妖<br><!-- 单选框 --><span>学历：</span><input type="radio" name="edu">大学<input type="radio" name="edu">高中<input type="radio" name="edu">小学<br><!-- 多选框 --><span>您的爱好是：</span><input type="checkbox">听音乐<input type="checkbox">看小说<input type="checkbox">打游戏<br><!-- 下拉菜单--><span>您的国籍是：</span><select><option>中国</option><option>美国</option><option>俄罗斯</option><option>韩国</option><option>日本</option></select><!-- 下拉菜单组 --><select><optgroup label="亚洲"><option>中国</option><option>朝鲜</option><option selected>韩国</option></optgroup></select><br><!-- 文本域 --><span>请介绍一下自己：</span><textarea cols="30" rows="10"></textarea><br><!-- 普通按钮 --><input type="button" value="登录"><!-- 重置按钮 --><input type="reset" value="重置"><!-- 提交按钮 --><input type="submit" value="提交"><!-- 普通按钮 --><input type="button" value="注册"></form></body>
</html>
（2）运行结果
03表格和表单标签的简单使用相关推荐
- HTML5+CSS3 02（表格、表单标签、语义化，字符实体标签）
一 表格的基本使用 1.1 表格的基本标签 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 基本标签: 标签名 说明 table 表格整体,可用于包裹多个tr tr 表格每行,可用 ...
- form表单标签的简单使用
文章目录 form表单标签``: - 1.作用:收集客户信息 注意:在写radio,checkbox(单选,多选)的时候,**一定要写name和value**:name属性是分组,value属性设置值 ...
- 表单标签实现简单的登陆页面
一.表单标签 1.表单作用:收集用户信息 method="get或者post" action="向何处发送表单数据" input 里面包含的标签内容: A．属性 ...
- 前端基础（二）：HTML之列表、表格、表单标签
下面是小凰凰的简介,看下吧!
- html如何运用表格，表单
示例如图的任务做一个表格表单 1.了解相关表格,表单标签 拿到任务第一步先熟悉表格表单相关标签 表格相关标签 首先<table></table> <tr>设置行 ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- 使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
最新文章
- 计算机有什么创新,笔记本创新技术有哪些？【详解】
- 自动驾驶中多模态三维目标检测研究综述
- SAP SD基础知识之凭证流(Document Flow)
- 阿里面试题：Mybatis中的Dao接口和XML文件里的SQL是如何建立关系的？
- mysql 使用不同引擎_mysql 不同引擎的比较
- linux几种快速清空文件内容的方法
- 二十万字C/C++、嵌入式软开面试题全集宝典十
- 【Python】判断列表中是否存在一个数
- POJ - 3261 Milk Patterns(二分+后缀数组)
- linux-压缩和解压类
- POJ 1966 Cable TV Network （最大流最小割）
- zmail邮件系统安装手册 V2.0版本
- arduino 停止程序_极路由1S OpenWrt开机自启程序及串口调试
- 第七篇: 高可用的分布式配置中心(Spring Cloud Config)(Finchley版本)V2.0_dev
- react-redux基本写法
- 分享：开源货币新世界
- TELERIK Reporting 实践
- UMLChina公众号文章精选（20220126更新精选）
- [MFC] CList
- [转] 两种老公，两种人生。。（女人该看，男生更该看）