html表单+多媒体 +css样式
表单
作用:
- 向服务器传递用户的数据
- 表单包含 input 元素 文本框 密码框 单选 复选 下拉框 提交按钮
传递两种方式:
- GET 速度快 不安全
- POST 安全 速度不如get 快
格式
<form action="" method="post">
<p>fisrt name:<input type="text" name="fname" id="fname"/></p>
<p>last name:<input type="text" name="lname" id="lname"/></p>
<p>password:<input type="password" name="pwd" id="pwd"/></p>
<input type="submit" value="注册"/>
</form>
注意事项
- 如果想提交到后台 表单内容必须写到from 里边
- action 表示 提交的地址 也就是 服务器的地址 http://www.baidu.com/login.py
- method 提交的方式 两种 get post
- enctype 传递表单数据之前 进行编码
- =”application/x-www-form-urlencoded” 默认的 在发送之前编码所有的字符
- text/plain 将空格转化为 + 号 不对特殊字符编码 比如&
- multipart/form-data 上传图片 文件 必须加上这个值 重要
总结
表单 是开发非常重要的 部分 为了传递数据 用 td 是表格的核心标签 input 就是表单的核心标签
input
<input type="text" name="这个自己起名字" placeholder="这里是提示信息" maxlength=10 value="这里是默认填充值 ">
value 是默认值 正常的颜色
placeholder 提示信息 这个是灰色的
input 类型
明文输入框 text
<input type="text" name="这个自己起名字" placeholder="这里是提示信息" maxlength=10 value="这里是默认填充值 ">
密文输入框 password
<input type="password" name="这个自己起名字" placeholder="这里是提示信息">
单选框 radio
苍老师:<input type="radio" name="a" value="canglaoshi">
龙老师:<input type="radio" name="b" value="longlaoshi">
波老师:<input type="radio" name="c" value="canglaoshi">
饭老师:<input type="radio" name="d" value="longlaoshi">
林老师:<input type="radio" name="e" value="canglaoshi">
老师:<input type="radio" name="f" value="longlaoshi">
以上 我可以选多个 name属性 不能一样
单选按钮 如果name 会造成互斥
男:<input type="radio" name="sex" checked="checked">
女:<input type="radio" name="sex">
性别只能选一个 索引我们给他相同的name属性
checked="checked" 默认被选中
多选 checkbox
篮球:<input type="checkbox" name="basketball" id="a"/>
足球:<input type="checkbox" name="football" id="a"/>
乒乓球:<input type="checkbox" name="pingpang" id="a"/>
羽毛球:<input type="checkbox" name="yumao" id="a"/>
排球:<input type="checkbox" name="pai" id="a"/>
铅球:<input type="checkbox" name="qian" id="a"/>
按钮 button
<input type="button" value="注册"/>
<button>登陆</button>
图片按钮 image
<input type="image" src="img/美女.jpg" style="width: 50px;height: 50px;" value="test"/>
重置 reset 清空表单中所有内容
<input type="reset" value="重置"/>
默认值 不能清空
提交按钮 submit 提交到后台
<input type="submit" value="提交" />
多行 文本框 一般用来给用户写备注 textarea
<textarea name="beizhu" rows="10" cols="5"></textarea>
rows
下拉框 select 上面都重要
<select name="hobby"> name 区分用户提交的内容
<option value="0">请选择:</option> option 标签中的内容 是给用户选择
<option value="1" selected="selected">吃鸡</option> value 是提交给服务器的
<option value="2">美女</option>
<option value="3">美食</option>
</select>
selected="selected" 表示默认被选中
隐藏 域 用户看不到 但是内容可以正常提交给服务器 重要
<input type="hidden" name="userid" id="userid"/>
文件上传 file
单文件上传 :<input type="file" />
多文件上传:<input type="file" multiple="multiple"/>
<input type="file" accept="image/jpeg"/> 只能选择图片 特别指定图片类型
<input type="file" accept="image/*"/> 可以选择所有的图片类型
以上 是html4.0 现在 最新版本是html5.0
HTML5 智能表单 只支持w3c浏览器 如果ie8 及以下 不识别
- type=”email” 要求只能输入 邮件类型 要不然 提交报错
- type=”url” 要求只能输入 url
- type=”date” 要求只能输入日期
- type=”datetime-local” 输入日期加时间
- type=”time” 只能输入时间
- type=”month” 只能输入月份
- type=”week” 只能输入第几周
- type=”number” 只能输入数字
- type=”range” 生成一个滑动条
- type=”search” 生成一个搜索意义的表单
- type=”color” 用户选择颜色
- type=”tel” 显示电话号码
html5 新增属性
- palceholder 提示信息
- required 表示 该输入框必须填写
- autofocus 打开网页自动获取焦点 ps 鼠标点击就是获取焦点
- autocomplete=”on”是否自动保存用户输入的值
- on 保存
- off 不保存
- formaction=”” 自定义submit提交的地址
音频 audio
html
<audio controls="controls" autoplay loop="loop">
<source src="audio/mo.mp3" type="audio/mp3"/>
您的浏览器不支持
</audio>
视频 vedio
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>
翻滚吧 牛宝宝 marquee
<!--<marquee>翻滚吧牛宝宝</marquee>-->
<marquee behavior="alternate" direction="right">翻滚吧牛宝宝</marquee>
<marquee behavior="scroll" direction="up">翻滚吧牛宝宝</marquee>
<marquee behavior="slide" direction="down">翻滚吧牛宝宝</marquee>
<marquee behavior="alternate" direction="right" scrollamount="1">美女你有打火机么</marquee>
<marquee behavior="alternate" direction="right" scrollamount="100">没有 那你怎么样点燃的我的心</marquee>
<!--滚动图片-->
<marquee behavior="scroll" direction="right">
<img src="img/美女.jpg" alt="美女" />
</marquee>
behavior 表示滚动的方式
direction 表示滚动的方向
scrollamount 表示滚动的速度 值越大 滚动越快
ps: 表单 name 和 id 命令的时候 尽量避开 标签名 比如table form 还要避开关键词 比如 submit
css
层叠样式表 其实就是为了让我们的页面更加好看
现在版本已经到 3.0 比2.0 多了好多属性
主流还是2.0
1996年css1.0
1998 css2.0
2004 css2.1
2011年 css 3.0 w3c 浏览器才支持 ie8及以下 不支持css3.0的某些效果
如何使用css
- 行内
- 内联
- 外链
1.外部引入css 文件(index.css) 外链
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
特点:
1.标签跟样式分离开来
2.有利于维护
2.内联
<head>
<style type="text/css">
#test1{
width: 100px;
height: 200px;
background-color: red;
}
#test2{
width: 100px;
height: 200px;
background-color: orange;
}
</style>
</head>
3.行内
<span style="color: white;background-color:#abcdef;">
hahahha
</span>
以上3个可以混合用 但是 尽量的 代码 简洁 清晰易读
优先级的问题
行内 最高 其次 内联和外链(优先级一样)
继承的问题
#test3{
font-size: 30px;
}
p{
font-size: 15px;
}
<div id="test3">
<p>你是年少的欢喜,倒过来念也是��</p>
</div>
如果不对p标签单独加样式 p 标签会自动继承父标签的样式
css 选择器 哪个标签需要添加样式 需要精准的找到
基本选择器
- id 一个html页面 id 是唯一的 主要用来区分 不要存在相同id 否则 只能匹配其中一个 命令的时候也要注意避开关键词
#id名字{ 样式规则:值; } #test{ background-color: #0000FF; 用;号结束 width: 100px; height: 100px; /*多行注释 */ //单行注释 } <div id="test1"> 被你赞过的朋友圈是甜甜圈 </div>
- 类选择器 也叫class 选择器 具有相同样式的标签 可以归结为一类
.类名{ 样式规则:值; } <div class="python806"> 你可以帮我洗个东西么?喜欢我啊 </div> <div class="python806"> 你可以帮我洗个东西么?喜欢我啊 </div> <div class="python806"> 你可以帮我洗个东西么?喜欢我啊 </div> .python806{ background-color: pink; width: 100px; height: 100px; color: white; }
- 标签选择器
标签名{ 样式规则:值; //单行注释 /*多行注释*/ } span{ width: 100px; height: 300px; //background: #FFA500; }
- 通配符选择器
*{ font-family: "bodoni mt black"; background: greenyellow; }
子元素选择器 只有1级
格式:
选择器 > 选择器 {
只能设置一级 不能设置多级
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style type="text/css">
#pr > p{
background: #123456;
font-size: 50px;
}
</style>
</head>
<body>
<div id="pr">
<p>儿子</p> <!--只有子标签被设置好了样式-->
<div>
<p>孙子</p> <!--这个没有被应用-->
</div>
</div>
</body>
</html>
子元素选择器 只能设置 一级标签 不能设置多级 重要
子元素选择器其它
ul > li{
}
div > #test{
}
.test > span {
}
后代选择器 多级
选择器 空格 选择器 {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
#pr p{
background: #123456;
font-size: 50px;
}
</style>
</head>
<body>
<div id="pr">
<p>儿子</p> <!--只有子标签被设置好了样式-->
<div>
<p>孙子</p> <!--这个也被应用-->
<div>
<p>重孙子</p><!--这个也被应用-->
</div>
</div>
</div>
</body>
</html>
#test .test1{
}
ul li{
}
尽量用class 代替后台选择器 后台选择器少使用
伪类选择器 :
动态伪类选择器
a:link{
color:pink; #未访问的连接
}
a:visited{
color: green; #已经访问的连接
}
a:hover{
color:orange; #鼠标放上去的颜色
}
a:active{
color: blueviolet; #选定的颜色 鼠标按下去 还没有弹起来的颜色
}
目标伪类选择器
选择器:target{
}
状态伪类选择器
- 选择器 :checked 被选中
- 选择器:disabled 禁用的
- 选择器:enabled 启用的
选择器:checked { 单选框和复选框用
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>状态伪类选择器</title>
<style type="text/css">
.sexes:checked{ 被选中之后的样式
width: 400px;
height: 200px;
}
.sexes:disabled{
width: 200px;
height: 100px;
}
.ba:checked{
width: 400px;
height: 200px;
}
.ba:enabled{ 哪些可以点击 哪些就是被启用 他们的样式
width: 400px;
height: 200px;
}
</style>
</head>
<body>
男:<input type="radio" name="sex" class="sexes" disabled="disabled"/> 被禁用
女:<input type="radio" name="sex" class="sexes" />
1:<input type="checkbox" class="ba" id="ba" value="1" />
2:<input type="checkbox" class="ba" id="ba1" value="2" />
3:<input type="checkbox" class="ba" id="ba2" value="3" />
</body>
</html>
结构选择器
- 选择器:before{} 在这个选择器之前 插入元素
- 选择器:after{} 在这个选择器之后插入元素
- 选择器:empty{} 匹配内容为空的元素 元素也叫标签
重点:
1.基本选择器
2.子选择器
3.伪类选择器
4.状态选择器
常用的属性
背景
属性 | 说明 |
---|---|
background | 复合属性 |
background-color | 背景颜色 |
background-image | 背景图片 |
background-position | 背景图像的位置 |
背景颜色
background:color; 指定的颜色
background: transparent;背景色透明
背景图片
background-image: url(img/美女.jpg);
background-image: url(网络图片);
background-image: none; 没有背景图
背景平铺
background-repeat:repeat 铺满整个屏幕 |repeat-x 横向平铺|repeat-y 纵向平铺
一般 图片 和平铺合起来用
background-image: url(img/美女.jpg) repeat-x;
图像滚动
background-attechment:scroll 随着内容滚动 | fixed 背景固定
scroll 内容有多少 背景图片就有多少
fixed 不管内容多少 背景固定
background-image:url(http://wenwen.soso.com/p/20100221/20100221152808-775499358.jpg);
no-repeat scroll;
background-image:url(http://wenwen.soso.com/p/20100221/20100221152808-775499358.jpg);
no-repeat;
background-attachment: scroll; 图像随着内容的滚动而滚动
background-attachment: fixed; 只有内容滚动 图片固定
背景图像定位
background-position: length | position
background-position: 60 50; 宽 高
background-position: 60% 50%; 百分数表示宽 和 高
background-position: center |top|left|bottom|right
background-position: center center;