表格 音频视频 形变 浏览器适配 垂直居中

表格

基本结构
<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

 

常用属性
table
-- border: <integer>：表格外框及单元格外框
-- cellpadding: <integer>：单元格的内边距
-- cellspacing: <integer>：单元格之间的间距，最小为0
-- rules：rows、cols、groups、all：边框规则

td
-- rowspan: <integer>：行合并(该单元格占多行)
-- colspan: <integer>：列合并(该单元格占多列)
-- width: : <integer>%：列宽占比

caption
-- align: top | bottom：标题方位

 

垂直水平居中
.sup {
    width: 200px;
    height: 200px;
    display: table-cell;       <!--设置为table-cell  表格单元格样式-->
    vertical-align: middle;
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;  <!-- 水平居中-->
}

 表单

基本结构
<form>
	<label>输入框</label><input type="text" />	
	<button type="submit">提交</button>
</form>

 

input常用类型
text              <!-- 文本输入框-->
password       <!--密码输入框-->
hidden
radio             <!-- 单选框-->
checkbox       <!-- 复选框-->
reset             <!-- 重复-->
submit           <!-- 提交-->

 常用类型标签

文本框
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">

密文框
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">

单选框
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女

复选框
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球

下拉选项
<select name="major">
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine" selected>医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>
<!--多选-->
<select name="major" multiple>
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine">医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>

多行文本输入
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

按钮
<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>

全局属性
required：必填项
pattern：正则

伪类
focus：获得焦点

 

音频视频

音频

应用
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果浏览器不支持H5新标签audio，此段话将被显示出来</audio>

 属性

| 属性     | 值                 | 描述     |
| -------- | ------------------ | -------- |
| autoplay | autoplay           | 自动播放 |
| controls | controls           | 音频控件 |
| loop     | loop               | 循环播放 |
| muted    | muted              | 静音     |
| preload  | auto metadata none | 预加载   |
| src      | URL                | 音频源   |

 

视频

应用
<video width="672" height="378" controls poster="img/poster.png">
		<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
		当前浏览器不支持video直接播放
</video>

 属性

| 属性     | 值                 | 描述     |
| -------- | ------------------ | -------- |
| width    | pixels             | 宽度     |
| height   | pixels             | 高度     |
| controls | controls           | 视频控件 |
| autoplay | autoplay           | 自动播放 |
| loop     | loop               | 循环播放 |
| muted    | muted              | 静音     |
| poster   | URL                | 图像占位 |
| src      | URL                | 视频源   |
| preload  | auto metadata none | 预加载   |

| 属性 | 值        | 描述     |
| ---- | --------- | -------- |
| src  | URL       | 视频源   |
| type | MIME_type | MIME类型 |

 

形变

.box {
	transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}

.box {
	transform: translateX(200px) | translateY(200px);
}

.box {
    transform: scaleX(2) scaleY(0.5)
}

 

浏览器适配

 -o-：Opera浏览器
 -ms-：IE浏览器
 -moz-：Firefox浏览器
 -webkit-：Chrome、Safari、Android浏览器

径向渐变
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(red, yellow);
}

倒影
-webkit-box-reflect: below | above | left | right;