媒体标签

三种多媒体标签的使用

embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

1.embed标签

embed可以可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径也可以是绝对路径。因为兼容性问题，我们这里只讲解插入网络视频，下面会讲到audio和video视频多媒体。

        src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf"
	allowFullScreen="true" quality="high" width="800" height="500" align="middle"
	allowScriptAccess="always" type="application/x-shockwave-flash">

2.audio表签

- HTML5通过标签来解决音频播放的问题。

<audio src="xxx"></audio>

0.5.png

3.video标签

- HTML5通过标签来解决视频播放的问题。

<video src="xxx"></video>

0.6.png

超链接

HTML使用超级链接与网络上的另一个文档相连。

<a href="url">链接文本</a>

-target 属性:用于指定链接页面的打开方式
_self默认值  当前窗口打开
_blank   新窗口打开

<a href="#">空链接</a>
锚点:点击链接可以快速定位到页面的某个位置
<a href="#news">新闻</a>
<a name="news">xxx</a>

-id属性:用于创建一个html文档书签
不会在html中显示,相当于隐藏的

参数	描述
mailto:name@email.com	邮件接收地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	邮件主题
body=body text	邮件内容
?	第一个参数分隔符
&	其他参数分隔符

注意:多个邮件地址用 ; 隔开空格用20%代替

表单

常见的form相关标签

标签	描述
input	输入框
textarea	文本域
label	input的标题
select	下拉菜单
option	下拉菜单选项
button	按钮
datalist(new)	前提预定的输入控件选项列表
Keygen(new)	表单密码生成器字段
output (new)	计算结果

form相关属性

1. form标签自身属性

name="" name属性主要是对这个form进行标记(取个名字)
methood="get/post "Ajax请求方式
action="" action=url用来指定处理提交表单的格式.它可以是一个 URL地址(提交给程式)或一个电子邮件地址.
enctype=cdata指明用来把表单提交给服务器时(当method值为”post”)
的互联网媒体形式.
target=""指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的元素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的 frameset 框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

2. input的type属性

type="text"是定义表单里面的单行[文本框]；value=”“文本框里默认的文字；size=”“单行文本框的宽度；maxlength=”“单行文本框所能输入的字节；
type=”password” 定义密码框；
type=”radio” 单选勾选框；
type=”checkbox” 多选勾选框；
type=”submit” 提交按钮；
type=”reset” 重置按钮；
type=”button”或者两种方式都可以实现空按钮；

3.H5新增属性(自动验证)

required:可以应用在大多数输入元素上,在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
pattern:将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。

4.form属性的特殊应用

阻止表单提交
方法一

表单内的<button>未指定类型时，默认的类型为submit，可以显式的修改为<button type="button">来阻止表单提交

方法二

function (e){
    e.preventDefault();
}

背景颜色相关属性

值	描述
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-image	规定要使用的背景图像。

背景平铺:background-repeat

属性	值
repeat	水平垂直都平铺(默认值)
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

过渡

过渡.png

阴影

阴影.png

如何让盒子水平垂直居中

方法1:定位

    .fa {
      position: relative;
    }
    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
分析:先移动父盒子的一半,再反方向移动自身的一半

方法2:margin:auto

     .fa {
      position: relative;
     }
    .son {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      right: 0;
      margin: auto;
     }

方法3:flex

     .fa {
      display: flex;
      justify-content: center;
      align-items: center;
      }

方法4:transform

    .fa {
      position: relative;
     }
    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

如何实现圣杯布局

方法1:定位

1.给父盒子设置左右padding为左右盒子的width
2.分别定位到padding处
3.中间盒子自定义

方法2:flex

1.父盒子设置display:flex
2.左右盒子设置固定宽高
3.中间盒子设置flex:1

方法3:bfc

1.左右盒子固定宽高,浮动
2.中间盒子设置overflow:hidden

选择器权重问题

!important>行内样式>id选择器>标签>通配符>继承

css中哪些属性可以继承,哪些不可以?

可以继承的:

字体属性
文本属性
元素可见:visibility
表格布局属性:table-layout
列表布局属性:list-style

不可以继承的:

display
文本属性:vertical-align,text-decoration
盒子模型属性
背景属性
定位属性

px,em,rem的区别

px:绝对单位.对于屏幕分辨率而言的
em: 相对单位.对于当前对象内文本字体尺寸
rem:相对单位.对于html的根元素

rem适配方案

设置跟font-size
通过媒体查询设置每一个屏幕的跟font-size
css直接除以200

H5C3复习点