h5c3

语义化标签:

    
    
    

    

    





头部标签

导航标签

块级标签

    脚部标签



    篮球
    足球
    羽毛球







    
注册信息
    用户名： 

    密码：

新增的input type属性值:

类型****	使用示例****	含义****
email****		输入邮箱格式
tel****		输入手机号码格式
url****		输入url格式
number****		输入数字格式
search****		搜索框（体现语义化）
range****		自由拖动滑块
time****		小时分钟
date****		年月日
datetime****		时间
month****		月年
week****		星期 年

 

    
    
    




    

        

            
普通文本框：
            

            
注册后不能更改
        
        

            
邮箱：
            

            
注册后不能更改
        
        

            
手机号码：
            

            
注册后不能更改
        
        

            
网址：
            

            
注册后不能更改
        
        

            
邮政编码：
            

            
注册后不能更改
        
        

            
搜索：
            

            
注册后不能更改
        
        

            
拖动滑块：
            

            
注册后不能更改
        
        

            
小时分钟：
            

            
注册后不能更改
        
        

            
日期：
            

            
注册后不能更改
        
        

            
时间：
            

            
注册后不能更改
        
        

            
月年：
            

            
注册后不能更改
        
        

            
星期年：
            

            
注册后不能更改
        
        

            

            

        


    

 

    
    




    请输入用户信息： 

    上传图片： 

     

     

    


    
    
    

h5新增的api:

    
    
    



显示效果
你好

自定义属性操作:

    
    
    



    今天可能要下雨，大家带伞了吗？

多媒体:

          embed:

       

 

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环

 

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

    
    





播放
暂停
快进
快退
总时长：duration
2倍速播放
0.5倍速播放
加大声音
减小声音
静音
全屏

伸缩布局:

2、各属性详解

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

2.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 携程网手机端地址

3、justify-content调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

值	描述	白话文
flex-start	默认值。项目位于容器的开头。	让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end	项目位于容器的结尾。	让子元素从父容器的后面开始排序但是盒子顺序不变
center	项目位于容器的中心。	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内。	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	相当于给每个盒子添加了左右margin外边距

4、align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

值	描述	白话文
stretch	默认值。项目被拉伸以适应容器。	让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center	项目位于容器的中心。	垂直居中
flex-start	项目位于容器的开头。	垂直对齐开始位置 上对齐
flex-end	项目位于容器的结尾。	垂直对齐结束位置 底对齐

例:

    
    
    



    
1
    
2
    
3