摘要:
1.有序无序列表
2.frameset布局框架
3.走马灯
4.input常用控件
5.表单和按钮
(一)列表
1.无序列表
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</u1>
执行效果
ul里面设置type,改变前面黑心圆圈
- disc:实心圆
- square:正方形实心
- circle:空心圆
- none:什么都没有了
2.有序列表
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</o1>
执行效果
ol里面设置type,改变前面序号
- 1 ==> 1 2 3 4
- A ==> A B C D
- a ==> a b c d
- I ==> 大写的罗马数字
- i ==> 小写的罗马数字
超过26个,27==>AA,emmm,让我想到26进制
(二)布局框架
1.表格布局
2.页面布局
用frameset将页面分成多个部分
rows水平布局,可以分成top和bottom
cols垂直分布,可以分成left和right
frameset不写在body里面,自己出来设
< !DOCTYPE html>
<html>
<head></head>
<frameset rows=" 20%, 70%, 10%”>
<frame src=" top. html”/>
<frameset cols=" 30%, *">
<frame src=" middle_ left. html" />
<frame src="middle_ left. html”/>
</ frameset>
<frame src=" bottom. html" />
</ frameset>
<body>
</body>
</html>
frame是一个单标签
效果图:
想要控制<a>中的超链接在想要的页面部分显示:
1.<a>中设置target属性,任意取值
2.在对应的页面中设置它的frame属性中的name,取和target相同的值
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor=" #CCFFFF">
<a href="http: I /www。baidu. com" target="test111">百度</a>//在左边的页面
</body>
l</html>
target可以_self,在本窗口打开,可以是_blank,在一个新的窗口打开,可以是自定义值,在我们想要的窗口中打开
(三)走马灯
<marquee>走马灯的内容</marquee>
behavior:走马灯方式,scroll循环滚动播出;slide只跑一次就停住;alternate来回往复的跑
direction:走马的方向(默认从右往左),left,right,down
width:像素
height:像素
scrolldelay:滚动速度(毫秒数)
loop:loop=2设置循环的次数
bgcolor:可以在像素设置的那块区域里变色
(四)常用控件
input输入(单标签),type属性来区分
- 文本框:text
- 密码框:password
- 日期选择器:Date,Html5才能使用
- 数字输入框:Number,H5才能所使用
- 颜色选择器:color,H5才能使用
- 文件选择器:file,谷歌里面会显示文件名,ie里面会显示完整的文件路径
- 单选框:radio,产生互斥的情况,设置属性name,给name属性一个相同的值,checked=”checked”默认选择
- 多选框:checkbox,checked=”checked”默认选择
input文本框的常用的属性
- maxlength:最大输入长度
- value:文本框的值(填上会变成默认值)
- readonly:只读,只能看不能写
- disabled:不可用
- required:验证该控件是否为空
(五)表单
注册微博,手机号,验证码test1.html。。。进入到一个主页面main.html(提交一个表单)
所有要提交的内容,写在一个form标签中
action提交到哪个页面
(六)按钮
- 提交按钮:submit,数据要通过每个控件中name属性传递
- 重置表单:reset
- 普通按钮:button,自定义,不允许文本框为空
普通按钮的两种写法:
(一)<input type=”button" value="确定" />value里面写按钮上的字
(二)<button>确认</button>
提交表单:
F12出来点击Network,进来Query String Parameters
sex: on
habbit: on
username:你好
pasword: 123
对于单选和多选来说,要想获得它的值,需要先加一个value属性
sex:男
habbit:篮球
username:你好
password: 123
作业:
需要写五个html
//0908.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>0908</title>
</head>
<frameset rows="20%,*,10%">
<frame src="marquee.html"/>
<frameset cols="20%,*">
<frame src="ulol.html" />
<frame src="regisrator.html" />
</frameset>
<frame src="color.html" />
</frameset>
<body>
</body>
</html>
//marquee.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="aqua">
<marquee behavior="scroll" direction="right" loop="7">我是走马灯,欢迎你进入该系统
</marquee>
</body>
</html>
//ulol.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="aquamarine">
无序列表
<ul>
<li>鸣人</li>
<li>佐助</li>
<li>小樱</li>
<li>卡卡西</li>
</ul>
有序列表
<ol>
<li>柱间</li>
<li>扉间</li>
<li>猿飞</li>
<li>波风水门</li>
<li>纲手</li>
<li>卡卡西</li>
<li>鸣人</li>
</ol>
</body>
</html>
//regisrator.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="cornflowerblue" align ="center">
<form action="color.html">
<h3>注册表</h3>
账号:<input type="text" /><br/>
密码:<input type="password" /><br/>
<input type="submit" /><br/>
</form>
</body>
</html>
//color.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="plum" align="center">
感谢您的支持和帮助!
</body>
</html>
【Hbuilder里面,按住tab可以自动补齐】