【前端】【html5/css3】前端学习之路（一）（html5新标签/多媒体标签）

一、HTML5新标签及特性

发展历程：

1.文档类型设定

获取结构方式：

Document：

• HTML：  webstorm 输入 html:4s 再点击tab即可

• XHTML：webstorm 输入 html:xt 再点击tab即可

• HTML5：webstorm输入 html:5或者 ! 再点击tab即可

2.字符设定

• HTML与XHTML中建议这样去写

• HTML5的标签中建议这样去写

3.常用新标签

 

• header：定义文档的页眉 头部

• nav：定义导航链接的部分

• footer：定义文档或节的页脚 底部

• article：定义文章。

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容 侧边

以上属性基本都只是起一种标识作用，其本身作用与div作用并无二致，是为了用户少用div+class标识CSS这种相对麻烦的方法，而直接采用这些属性来标识CSS，更加直接且简明易懂。但是，这些属性更多是应用在手机端，因为其新兴性，所以兼容性较差，网页端不建议使用。 

    
我是header标签
    
我是nav标签
    
我是footer标签
    
我是article标签
    
我是section标签
    
我是aside标签

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

 

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

fieldset {
            width: 500px;
            height: 150px;
            background-color: pink;
            padding: 30px 30px;
        }

 

    

        
用户登录
        
标题
        用户名: 


        密　码: 
    

 4.新增input type属性

在这里提一下，之前做表格，比如用户名、密码等选项时，都用的是table或者ul，这里我们使用新的方法，用dl+dt+dd来做，因为这样做可以让我们单独设置dt，也就是项目名的css，而无需再为其添加类名，更加简便可控。

示例：

.box {
    width: 600px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
.box dl {
    overflow: hidden;
    margin: 15px 30px;
}
.box dl dt, .box dl dd {
    float: left;
}
.box dl dt {
    width: 100px;
}
.box dl dd  {
    width: 200px;
}

    

        

            
用户名
            

            
*此选项不能为空
        
        

            
邮箱
            

            
*此选项不能为空
        
        

            
联系方式
            

            
*此选项不能为空
        
        

            
链接
            

            
*此选项不能为空

        
        

            
数字
            

            
*此选项不能为空
        
        

            
搜索
            

            
*此选项不能为空
        
        

            
自由拖动
            

            
*此选项不能为空
        
        

            
小时时分
            

            
*此选项不能为空
        
        

            
年月日
            

            
*此选项不能为空
        
        

            
时间
            

            
*此选项不能为空
        
        

            
月份
            

            
*此选项不能为空
        
        

            
星期/年
            

            
*此选项不能为空
        
        

            

            
  

        
    

 效果：

email/url/number，再提交时，如果格式出错，都会有系统提示，如：

 

 其他属性可以根据代码自行试验。

5.常用新属性

示例：

    

        用户名：  

        上传头像：  

        昵称：   

        

    

 效果：

二、多媒体标签

1.播放音频

H5通过音频标签

标签中的属性：

autoplay：代表自动播放

controls：代表显示控制元件

loop：代表循环播放

audio标签的使用有两个方法：

方法一：

这个方法兼容性比较差， 因为不同浏览器可支持播放的格式是不一样的，如下：

此时为了满足不同浏览的兼容。

方法二：

 

2.播放视频

播放视频使用的video标签。

同样，video在不同浏览器也有不同的兼容性。

方法一（直接从网页下方的分享复制链接）：

效果： 

 

方法二：

效果： 

 

但是为了兼容性考虑，最佳的方法是：

方法三：

 效果：