HTML学习（二）

前端学习

第一章 HTML

---

前言

这一部分内容讲解了HTML的若干标签，HTML内容，为网页文本的骨架，各个标签的样式，一般由CSS确定，故在此，不多做描述

一、div 标签

div标签，将文档分割成不同的块，不同的块展示不同的内容；主要应用在容器上，对整个页面进行布局

html文件

<div class="container">
        <div class="header"></div>
        <div class="nav"></div>
        <div class="content">
            <div class="left">left</div>
            <div class="content2">content</div>
            <div class="right">right</div>
        </div>
        <div class="footer"></div>
    </div>

.css文件

.container{
            width: 100%;
            height:100%;
            background-color: yellowgreen;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: navy;
        }
        .nav{
            width: 800px;
            margin: auto;
            height: 100px;
            background-color: brown;
        }
        .content{
            width: 100%;
            height: 400px;
            
        }
        .left{
            width: 20%;
            height: 100%;
            float: left;
            text-align: center;
            border: 1px solid black;
            box-sizing:border-box;
            
        }
        .content2{
            width: 60%;
            height: 100%;
            float: left;
            text-align: center;
            text-align: center;
            border: 1px solid black;
            box-sizing: border-box;
            
        }
        .right{
            width: 20%;
            height: 100%;
            float: left;
            text-align: center;
            text-align: center;
            border: 1px solid black;
            box-sizing:border-box;
            
        }
        .footer{
            width: 100%;
            height: 400px;
            background-color: blue;
        }

二、video 视频标签

<video src="movie.mp4" controls>
 您的浏览器不支持 video 标签。
</video>

视频标签

三、audio 音频标签

<audio src="someaudio.mp3">
 您的浏览器不支持 audio 标签。
</audio>

音频标签

总结

HTML5新增标签，其余标签不常用