HTML基础复习2
6.表格
6.1建立表格:
表格由<table></table>
标签来定义 每行由<tr></tr>
来定义,每行被分割为若干单元格,由<td></td>
来定义
数据单元格可以包含文本、图片、列表、段落、表单、水平线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>建立表格</title>
</head>
<body>
<table border="1">
一列
<tr>
<td>100</td>
</tr>
</table>
<table border="1">
一行三列
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table border="1">
三行三列
<tr>
<td>周一</td>
<td>周二</td>
<td>周三</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</body>
</html>
6.2表格的边框
上例中的border = "1"
就是用来设置表格边框的,它规定表格的边框为1像素,border
只能控制外边框的粗细
所以我们用cellspacing
属性来控制内边框的粗细,即单元格与单元格之间的距离
根据上例:table border = "1" cellspace = "8"
table
的cellpadding
属性用来控制单元格中的内容到内边框之间的距离
接上例:table border = "1" cellspace = "8" cellpadding = "8"
6.3设置表格或单元格的宽度和高度
width
和height
属性值可以是像素也可以是百分比,如果没有设置那就默认为内容的宽度和高度
接上例:table border = "1" cellspace = "8" cellpadding = "8" width = "300" height = "300"
<tr></tr>
也有height
属性,表示该行的高度,若值为百分比的形式,则表示该行占整个表格的高度的百分比
<td></td>
也有width
属性,表示该单元格所在列的宽度,若值为百分比的形式,则表示该列占整个表格的宽度的百分比
6.4表格的背景设置
表格的bgcolor
属性可以用来设置表格的背景颜色
background
属性用来设置设置表格的背景图片
也可以单独设置某行或某个单元格的背景
6.5表格边框颜色的设置
bordercolor
属性可以设置表格的外边框颜色
6.6表格的位置
6.6.1水平位置
align
属性可以设置表格在父容器中的水平位置,其值为left
或center
或right
,即在富容器中水平居左、居中、居右
6.6.2垂直位置
valign
属性用来控制单元格中的内容的垂直位置,其值为top
、middle
和bottom
,即单元格中的内容在单元格内垂直居上、居中和居下,我们可以控制整行,也可以控制某个单元格
6.7为表格添加表头和标题
用<caption></caption>
标记为表格添加标题,标题将相对于表格居中显示
<th></th>
标记用来表格添加表头,它将替换相应位置的<td></td>
标记,在该标记内的文字为粗体且在单元格内中居中显示
6.8单元格的合并
6.8.1跨行
跨行也就是将单元格纵向合并,只要设置<td></td>
标记中的rowspan
属性就可以实现,rowspan
的取值为数字
6.8.2跨列
跨列也就是将单元格横向合并,只设置<td></td>
标记中的colspan
属性就可以实现,colspan
的取值为数字
7表单
表单使用表单标签<form name = "" method = "" action = ""></form>
“name”属性为表单起一个名字;“method”属性用于设置传送数据的方式。取值有两个,“post”和“get”,“action”属性指明服务器端处理程序的名称,即当点击“提交”按钮后所提交的地址。
面试:
post:提交的数据不会显示到地址栏上,相对安全;地址栏上的数据长度没有限制
get:默认为get提交,提交的数据会显示到地址栏上,不安全;地址栏上的数据长度有限
常用的表单元素
7.1输入元素input
7.1.1文本域
<input type="text" name="" value="" size="" maxlength="" readonly="readonly(只读)">
type="text"
声明表单元素为单行文本框
name
为文本框命名
value
设置文本框中初始的文本内容,不填则空
size
设置文本框的显示长度
maxlength
设置文本框可输入的最大字符数
7.1.2密码输入框
把type
属性的值变为password
即可
<input type="password" name="pss"/ maxlength="10">
7.1.3单选框
把type
属性的值变为radio
来实现
<input type="radio" name="" checked value="女"/>女
value
后跟着提交的数据
checked
默认选中项
7.1.4复选框
<input type="checkbox" name="" value=""/>
value
后面跟着提交的数据
7.1.5提交按钮
<input type="submit name="" value=""
value
表示按钮上显示的名称
7.1.6重置按钮
<input type="reset" value=""/>
7.1.7普通按钮
<input type="button" value=""/>
7.1.8图片按钮
<input type="image" src="路径"/>
功能和提交按钮一样,能够将表单提交
7.1.9隐藏域
<input type="hidden" name="" value=""/>
页面无法查看该域,但是它会随着表单的提交而被提交
7.1.10文件域
<input type="file" name=""
7.2下拉框
<select name="">
<option selected="selected"></option>
</select>
7.3多行文本框
<textarea name="" row="行数" cols="列数"></textarea>
结束标记不要换行
8.框架
frameset(框架集,取代body
)中常见的属性
rows=""
:设置框架集每个一个框架占用的大小
cols=""
:设置框架集每个一个框架占用的大小
border=""
:设置框架集边框的粗细
bordercolor=""
:设置框架集边框的颜色
frameborder=""
:设置是否有边框 0有1没有
frame中常见的属性
noresize="
noresize":设置该框架不能任意拖动
src=""
:该框架引入页面的路径
name=""
:为框架起名,target="框架名称"
scrolling="no|yes"
:该框架是否允许滚动 no代表不允许滚动,yes代表允许滚动
8.5浮动框架
<iframe></iframe>
:可以当做html中的一个标签
8.5.1浮动框架中常见的属性
src=""
:该浮动框架引入页面的路径
width=""
:设置浮动框架的宽度
height=""
:设置浮动框架的高度
scrolling=""
:该框架是否允许滚动 no代表不允许滚动,yes代表允许滚动
frameborder=""
:设置是否有边框 0有1没有
name=""
:给框架取名称
align=""
:设置框架水平对齐方式
HTML基础复习2的更多相关文章
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- Java基础复习笔记系列 九 网络编程
Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...
- Java基础复习笔记系列 八 多线程编程
Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...
- Java基础复习笔记系列 七 IO操作
Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...
- Java基础复习笔记系列 五 常用类
Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...
- Java基础复习笔记系列 四 数组
Java基础复习笔记系列之 数组 1.数组初步介绍? Java中的数组是引用类型,不可以直接分配在栈上.不同于C(在Java中,除了基础数据类型外,所有的类型都是引用类型.) Java中的数组在申明时 ...
- C语言基础复习总结
C语言基础复习总结 大一学的C++,不过后来一直没用,大多还给老师了,最近看传智李明杰老师的ios课程的C语言入门部分,用了一周,每晚上看大概两小时左右,效果真是顶一学期的课,也许是因为有开发经验吧, ...
- JS基础 复习: Javascript的书写位置
爱创课堂JS基础 复习: Javascript的书写位置复习 js书写位置:body标签的最底部.实际工作中使用书写在head标签内一对script标签里.alert()弹出框.console.log ...
- MySQL学习笔记_8_SQL语言基础复习
SQL语言基础复习 一.概述 SQL语句注释方式 1)以"#"开头直到行尾的所有内容都是注释 2)以"--"(--后还有一个空格)开头直到行尾的所有内容都是注释 ...
- Java基础复习笔记基本排序算法
Java基础复习笔记基本排序算法 1. 排序 排序是一个历来都是很多算法家热衷的领域,到现在还有很多数学家兼计算机专家还在研究.而排序是计算机程序开发中常用的一种操作.为何需要排序呢.我们在所有的系统 ...
随机推荐
- matplotlib的学习4-设置坐标轴
import matplotlib.pyplot as plt import numpy as np x = np.linspace(-3, 3, 50) y1 = 2*x + 1 y2 = x**2 ...
- CSS鼠标指针cursor样式
参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光 ...
- Python之复制列表
将一个列表的数据复制到另外一个列表中. 1 a = [1,2,3] #定义列表a 2 3 b = a[:] #将列表a的切片赋值给b,也可以理解为将b的值设置为a[:] 4 5 print(a) #打 ...
- 解决CentOS 8 Docker容器无法上网的问题
发布于:2020-11-28 Docker 2条评论 3,051 views 如需VPS代购.PHP开发.服务器运维等服务,请联系博主QQ:337003006 CentOS 8已经发行好长一段 ...
- java 深拷贝与浅拷贝机制详解
概要: 在Java中,拷贝分为深拷贝和浅拷贝两种.java在公共超类Object中实现了一种叫做clone的方法,这种方法clone出来的新对象为浅拷贝,而通过自己定义的clone方法为深拷贝. (一 ...
- java类的主动使用/被动使用
对类的使用方式分为:主动使用.被动使用 所有的java虚拟机实现必须在每个类或接口被java程序"首次主动使用"时才初始化他们 ps:被动使用不会初始化类,但是有可能会加载类(JV ...
- 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
- [C#] 使用 Excel 和 Math.Net 进行曲线拟合和数据预测
以前在工作中遇到了一个数据错误的问题,顺便写下 用 Math.Net 解决的思路. 1. 错误的数据 上图是同一组探测器在同一天采集到的 19 次数据,总体来说重复性不错,但很明显最后 8 个探测器出 ...
- Linux下docker中安装宝塔面板教程
本人云服务器,装的cent os7.6,在cent os7.6已装了docker,没装的可以借鉴 https://www.cnblogs.com/xiaoyige/p/12673076.html 1. ...
- phpstorm 注册码破解
激活码1 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2ln ...