页面实战难点

搜索框难点
        文本框和按钮的间隙还有对齐问题
       解决： 浮动解决

        按钮的大小计算不是按照标准盒模型计算，按钮的高度包含边框
       解决： 把按钮的边框距离加上

a的锚点
href="#id" 页面中板块的跳转
href="文件路径#id"  跳转到另一页面的某个板块

在页面上遮罩一层半透明div
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
position: fixed;
top: 0px;
left: 0px;

 

html5新增

<video src="路径" controls>
   支持mp4、ogg、webm（mp4不是所有浏览器都兼容，需要转换三种格式的视频）
   autoplay属性 谷歌浏览器不兼容
   controls属性  增加属性才能播放
   muted属性 静音播放
   poster="路径"可以改第一帧画面
   css{object-fit：cover/fill} 设置poster大小 cover等比缩放，图片不一定显示完整；fill强制拉伸，图片完整显示
    poster的css属性
            object:fill/cover
            cover   等比缩放，图片不一定完整显示
            fill        强制拉伸，图片可以完整显示


<video controls  muted poster="images/timg.gif">
           <source  src="video/movie.mp4" type="video/mp4">
           <source  src="video/movie.ogg" type="video/ogg">
          <source  src="video/movie.webm" type="video/webm">
</video>

音频audio
    支持两种格式ogg/mpeg(mp3)
   <audio controls>
        <source src="video/zhoujie.mp3" type="audio/mpeg">
        <source src="video/zhoujie.ogg" type="audio/ogg">
    </audio>
 

高级表单

表单字段集：对表单内容分组和嵌套 fieldset
字段集的标题  legend
         <fieldset>
            <legend>个人信息</legend>
            <p>
                <label for="name">姓名*</label>
                <input type="text" id="name">
            </p>
            <p>
                <label for="add">地址*</label>
                <input type="text" id="add">
            </p>
        </fieldset>
提示信息
label
                <label for="name">姓名*</label>
                <input type="text" id="name">
下拉列表
select和option
                disabled  禁用
                selected  默认选中
           <select>
                     <option value="" disabled selected>请输入您的出生年份</option>
                    <option value="">1990</option>
                    <option value="">1991</option>
                    <option value="">1992</option>
                    <option value="">1993</option>
                    <option value="">1994</option>
                    <option value="">1995</option>
           </select>
文本域
textarea
上传文件框      
        <input  type="file">

 css属性
         outline: none;  取消文本域或者文本框的点击默认效果
         resize：none； 取消文本域的拖拽效果

表格新增的标签
1：数据行分组(可以让表格的结构更加清晰，方便后期数据更新)
注意：thead和tfoot只有一个，tbody可以多个
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
2：数据列分组
    <colgroup span="value"></colgroup>    可以设置多个列分组
    <col></col>    只适用于一个列分组
         <!--span属性为把几列分为一组-->
3：列标题
    <th></th>
4：表格标题
    <caption></caption>

css属性
1、单元格间距：border-spacing:value;
 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2、合并相邻单元格边框：border-collapse:separate/collapse;
        说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

3、无内容时单元格的设置：empty-cells:show/hide;
说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed; 设置固定宽

hover包含关系