html表单+多媒体 +css样式
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
type="text" name="这个自己起名字" placeholder="这里是提示信息" maxlength=10 value="这里是默认填充值 ">
value 是默认值 正常的颜色
placeholder 提示信息 这个是灰色的 input 类型
明文输入框 text
type="text" name="这个自己起名字" placeholder="这里是提示信息" maxlength=10 value="这里是默认填充值 ">密文输入框 password
type="password" name="这个自己起名字" placeholder="这里是提示信息">单选框 radio
苍老师:type="radio" name="a" value="canglaoshi">
龙老师:type="radio" name="b" value="longlaoshi">
波老师:type="radio" name="c" value="canglaoshi">
饭老师:type="radio" name="d" value="longlaoshi">
林老师:type="radio" name="e" value="canglaoshi">
老师:type="radio" name="f" value="longlaoshi">
以上 我可以选多个 name属性 不能一样
单选按钮 如果name 会造成互斥
男:type="radio" name="sex" checked="checked">
女:type="radio" name="sex">
性别只能选一个 索引我们给他相同的name属性
checked="checked" 默认被选中 多选 checkbox
篮球: type="checkbox" name="basketball" id="a"/>
足球: type="checkbox" name="football" id="a"/>
乒乓球: type="checkbox" name="pingpang" id="a"/>
羽毛球: type="checkbox" name="yumao" id="a"/>
排球: type="checkbox" name="pai" id="a"/>
铅球: type="checkbox" name="qian" id="a"/> 按钮 button
<input type="button" value="注册"/>
<button>登陆button>图片按钮 image
type="image" src="img/美女.jpg" style="width: 50px;height: 50px;" value="test"/>重置 reset 清空表单中所有内容
type="reset" value="重置"/> 默认值 不能清空
提交按钮 submit 提交到后台
type="submit" value="提交" />多行 文本框 一般用来给用户写备注 textarea
<textarea name="beizhu" rows="10" cols="5">textarea>
rows 下拉框 select 上面都重要
selected="selected" 表示默认被选中 隐藏 域 用户看不到 但是内容可以正常提交给服务器 重要
type="hidden" name="userid" id="userid"/>文件上传 file
单文件上传 :type="file" />
多文件上传:type="file" multiple="multiple"/>
type="file" accept="image/jpeg"/> 只能选择图片 特别指定图片类型
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
视频 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 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>csstitle>
<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级
格式:
选择器 > 选择器 {
只能设置一级 不能设置多级
}
<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 {
}后代选择器 多级
选择器 空格 选择器 {
}
<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 { 单选框和复选框用
}
<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;