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

<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&amp;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 选择器 哪个标签需要添加样式 需要精准的找到

1. 基本选择器

   • 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;