多媒体标签
1.img:图片（重点）
src：图片资源位置
相对目录
.表示当前目录
..表示上一级目录
绝对目录
window：以盘符开头的目录
类Unix：以/开头的目录
width：宽度
height：高度，只设置高度时，宽度会等比缩放，两个都设置时会进行拉伸或者压缩
title：光标放上去的提示信息，加载失败也会显示
2.audio：音频
src：指定资源
controls：显示控制条
autoplay：自动播放
loop：是否循环播放
3.video：视频
音频标签的属性他都有，还多出来一些
width，height
单独设置时会等比缩放，同时设置时不成比例的一遍会留白
表格标签（table）
1.说明：类似于Excel格式
2.table：表格标签，所有表格的对象都要放到该标签中
border：边框尺寸
height：高度
align：对齐方式（left默认，center，right）
bgcolor：背景色
3.tr：表示表格中的一行
bgcolor：背景色
align：对齐方式（left默认，center，right）
valign：垂直对齐方式（top，middle默认，bottom）
4.td：表示一行中的一个单元格
rowspan：行合并
colspan：列合并
5.th：与td相似，内容样式上进行加粗，着重强调，用于设置表头
6.caption：表格标题，通常用于描述表的作用
分帧（iframe）
1.说明：就是一个页面中包含另外一个页面<iframe />
2属性：
src，width，height
frameborder：是否显示边框（0：隐藏，1：显示）
scrolling：滚动条显示设置（yes，no，auto）
name：标识该窗口的名字，可以用于a标签的打开目标地址
分帧（frameset）
1.说明：替代body定义网页框架，而且可以自己指定比例和尺寸
2.frameset：
rows：垂直方向的内容划分，可以指定像素，也可以使用百分比，*表示其他
cols：水平方向的内容划分，使用方法同rows
noresize：禁止拖拽，修改比例
frameborder:是否显示每一帧的边框
border：设置边框的宽度
bordercolor：设置边框颜色
3.frame：frameset中的每一帧，也就是一个页面
4.noframes：针对不支持frameset的低级浏览器的兼容设置
表单（from）（非常重要）
1.说明：用于收集用户信息，如：登录，注册等场景
2.form：表示表单，所要提交的数据必须放在该标签中
action：提交地址
method：提交方法，get ，post
post：提交的数据在URL中不可见，用于登录，注册，上传文件等
get：提交的数据在URL中可见
3.input：输入框，是表单中最重要的组成部分
name：指定名字，否则数据无法提交（即使提交了也没有用）
value：文本框的内容，一般用在不能输入的类型中
placeholder：占位内容，通常用于提示
readonly：只读，设置后无法修改
disabled：禁用状态
size：设置尺寸（宽度）
maxlength：限制最大输入字符个数
type：可以有多种类型
text：普通文本，默认
password：密文文本
submit：提交按钮
radio：单选框，多个关联选项属性要一致，需要设置value，默认选中checked
CheckBox：复选框，多个关联选项name属性要一致，默认选中checkbox
file：文件上传，需要进行配套设置，表单：method="post"，enctype="multipart/form-data"
hidden:隐藏字段，该字段跟普通字段一样，但是不会在页面上显示
4.select：下拉选择框
属性name需要设置
size：可以设置高度（选项个数）
每个选项都是一个option，必须指定value，默认选中使用属性selected
5.textarea：文本域
说明：可以输入多行文本
属性：
cols：列数（宽度）
rows：行数（高度）
注意：不要在标签中书写任何多余的内容
6.表单提交
<input type="submit" />标准的提交按钮，甚至可以提交文本按钮值
<button></button>，标准按钮，可以用于提交，但是不能提交文本按钮值
<input type="button" />，长的像按钮，但是不能提交，可以结合JS使用
head标签
说明：一般存放一些对于网页说明的内容，不会显示在页面上
示例：
标题：<title></title> 简化字符集设置：<meta charset="utf-8"/> 关键字：<meta name="keywords" content=" " /> 网页描述：<meta name="desrciption" content="" /> 标准字符集设置：<meta http-equiv="content-type" content="text/html;charset=utf-8“> 演示刷新跳转:<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
加载CSS文件：<link rel="stylesheet" type="text/css" href="css文件路径" />
无意义标签
说明：虽然这些标签没有特殊意义，但是后面可以结合CSS和JS进行使用
常用：div、header、footer、section、span
取消的DTD
h5统一使用：<!DOCTYPE html>
练习：
1.写一个3*3表格，合并1和2单元格，4和7单元格
2.使用分帧写一个页面，可以实现点击联动效果
3.写一个注册页面，若格式不整齐可以结合table
1.
<html>
<head>
<meta charset="utf-8"/>
<title>合并单元格</title>
</head>
<body>
<table border="1" cellspacing="1" bordercolor="red">
<caption>单元格合并</caption>
<tr>
<th>第一格</th>
<th>第二格</th>
<th>第三格</th>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="georgian">1&2</td>
<td align="center" bgcolor="blackgreen">3</td>
</tr>
<tr>
<td rowspan="2" align="center" bgcolor="green">4&7</td>
<td align="center" bgcolor="pink">5</td>
<td align="center" bgcolor="purple">6</td>
</tr>
<tr>
<td align="center" bgcolor="white">8</td>
<td align="center" bgcolor="gold">9</td>
</tr>
</table>
</body>
</html>
测试结果如图：
2.
<html>
<head>
<meta charset="utf-8"/>
<title>联动效果</title>
</head>
<frameset frameborder="1" cols="100,*">
<frame src="ceshi1.html" />
<frameset rows="25%,25%,25%,25%">
<frame name ="d1" />
<frame name="d2"/>
<frame name="d3"/>
<frame name="d4"/>
</frameset>
</frameset>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
<style>
form{
float:left;
margin:15px;
}
</style>
</head>
<body>
<form action="http://www.jd.com"target="d1">
<input type="submit" value="京东" />
</form>
<form action="http://www.qfedu.com"target="d2">
<input type="submit" value="千峰" />
</form>
<form action="http://www.baidu.com"target="d3">
<input type="submit" value="百度" />
</form>
<form action="http://www.sina.com"target="d4">
<input type="submit" value="网易" />
</form>
</body>
</html>
效果图：
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>登录界面</title>
</head>
<body>
<table border="1"cellspacing="0" >
<tr>
<th align="center">用户名:</th>
<td ><input type="text"placeholder="请输入正确的用户名" /></td>
</tr>
<tr>
<th >密    码:</th>
<td ><input type="password" /></td>
</tr>
<tr>
<th >邮    箱:</th>
<td ><input type="text"placeholder="请输入正确的邮箱" /></td>
</tr>
<tr>
<th >出生日期:</th>
<td ><input type="text" placeholder="年/月/日" /></td>
</tr>
<tr>
<th >上传图像:</th>
<td><input type="text" placeholder=" Open"/></td>
</tr>
<tr>
<th >个人主页:</th>
<td ><input type="text" /></td>
</tr>
</table>
<hr />
<button>提交</button>
<button>重置</button>
</body>
</html>
效果图：
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
