table:表名的开始和结束
caption:表格的大标题
tr:进行(hang行)的添加 一行一组
th、td:单元格 表示的是列
th:列标题,标题。 有加粗,有居中的默认效果
td:普通单元格
border:实现边框
width:表格宽度
单词column:列
rowspan:表示横跨行(上下合并)
colspan:表示横跨列(左右合并)
rowspan //列的合并左边的为依据,合并行
colspan //行的合并是以上面的为依据,合并列
上代码:
表格演示源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="1000px">
<caption>商品信息表</caption>
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">家电类</td><!--合并行-->
<td valign="top">冰箱</td>
<td>台</td>
<td align="center">520</td>
</tr>
<tr>
<!--<td>家电类</td>-->
<td>洗衣机</td>
<td>台</td>
<td align="center">13</td>
</tr>
<tr>
<td>辅料</td>
<td>插线板</td>
<td>个</td>
<td align="center">14</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">备注:</td><!--合并列-->
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
</tr>
</tfoot>
</table>
</body>
</html>
表格演示图:
属性:
caption————商品库存表
thead ————页眉部分,标题
tbody ————主体部分
tfoot ————页脚部分
属性————值————描述
align ————right、left、center、justify、char————定义在列组合中内容的水平对齐方式
char ————character ————规定根据哪个字符来对齐列组中的内容
charoff ————number ————规定第一个对齐字符的偏移量
span ————number ————规定列组应该横跨的列数
valign ————top、middle、bottom、baseline ————定义在列组合中内容的垂直对齐方式
width ————pixels% ————规定列组合的宽度
border 1px 设置边框
width npx,n % 表格宽度
bgcolor 颜色值 表格背景
align left,center,right 表格在文档中的对齐方式
cellpadding n px 内容和边框之间的间距
cellspacing n px 单元格之间的间距
属性名称:frame
属性值:
viod 不显示外边框
border 四周都显示
above 显示上部的外边框
below 显示下部的外边框
hsides 显示上下的外边框
lhs 显示左部的外边框
rhs 显示右部的外边框
vsides 显示左右的外边框
常用属性演示源码:
img标签
<html>
<head>
<title></title>
</head>
<body>
<h1>img变迁的使用</h1>
<h2>img标签的重要属性</h2>
<p>
src:指向需要打开的图片地址,(地址个超链接的地址一样)
<div>
<img src="1~J6I0FT(V5{7]QA@K)@@1I.png" alt="图片没找到的替代文字" title="鼠标悬浮文字" width="100px" height="200px">
<img src="]{2R[[Y5]WNVF8[JFVX1XY3.png" >
<!--一般使用scc来控制tylte-->
</div>
</p>
</body>
</html>
input 标签
<div>
文本框:<input type="text" value="999999">
</div>
<div>
密码框:<input type="password">
</div>
<div>
复选框:<input type="checkbox" value="1" name="ho">
<input type="checkbox" value="1" name="ho">
</div>
<div>
单选框:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
说明:相同的name属性,表示是同一个组的单选框。那么最多只能被选中一个。
</div>
<hr>
<div>
文件选择框:<input type="file">
<br>
主要用于文件上传!
</div>
<hr>
<div>
隐藏域:<input type="hidden"><br>
用户不可见,但是程序能使用。一般用于在页面记录隐藏信息(不用给用户看,但是程序又需要的数据)
</div>
<hr>
<div>
<input type="submit" value="提交按钮">用于提价form表单到服务器。
<input type="reset" value="重置按钮">将form表单中的控件值置为初始状态
<input type="button" value="普通按钮" onclick="javascript:alert('我是');">没有特定的功能,主要用于触发js事件
</div>
<hr>
<div>
多行文本域:<textarea cols="20" rows="20" style="height: 40px;widows: 400px;"></textarea>
<br>
备注:cols,设置列,rows,设置行(可以控制文本域的大小)。但是一般使用height,width,来控制大小
</div>
<hr>
<div>
下拉列表:
<select>
<option value="">一年级</option>
<option value="">二年级</option>
<option value="">三年级</option>
<option value="">四年级</option>
<option value="">五年级</option>
<option value="">六年级</option>
</select>
</div>