HTML5 <footer>标记用法及代码示例

HTML中的<footer>标记用于定义HTML文档的页脚。此部分包含页脚信息(作者信息，版权信息，载体等)。页脚标签在body标签内使用。 <footer>标签是HTML5中的新标签。页脚元素需要一个开始标签和一个结束标签。

用法:

<footer> ... </footer>

页脚元素通常包含作者信息，版权信息，联系信息，站点Map，返回页首链接，相关文档等。

以下示例说明了HTML元素中的<footer>标签：

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML footer Tag</title> 
        <style> 
            a { 
                font-size:25px; 
                text-decoration:none; 
            } 
            p { 
                font-size:25px; 
            } 
        </style> 
    </head> 
    <body> 
        <footer> 
            <nav> 
                <p> 
                    <a href= 
"https://www.geeksforgeeks.org/about/">About Us</a>|  
                    <a href= 
"https://www.geeksforgeeks.org/privacy-policy/">Privacy Policy</a>|  
                    <a href= 
"https://www.geeksforgeeks.org/careers/">Careers</a>  
                </p> 
            </nav> 
            <p>@geeksforgeeks, Some rights reserved</p> 
        </footer> 
    </body> 
</html>

输出：

范例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>footer tag</title> 
        <style> 
            .column { 
                float:left; 
                width:27%; 
               height:300px;  
            } 
            p { 
                font-size:20px; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
    <body> 
        <footer> 
            <div class="column"> 
                <p>Company</p> 
                <ul style="list-style-type:disc"> 
                    <li>About Us</li> 
                    <li>Careers</li> 
                    <li>Privacy Policy</li> 
                    <li>Contact Us</li> 
                </ul> 
            </div> 
                
            <div class="column"> 
                <p>Learn</p> 
                <ul> 
                    <li>Algorithms</li> 
                    <li>Data Structures</li> 
                    <li>Languages</li> 
                    <li>CS Subjects</li> 
                    <li>Video Tutorials</li> 
                </ul> 
            </div> 
                 
            <div class="column"> 
                <p>Practice</p> 
                <ul> 
                    <li>Company-wise</li> 
                    <li>Topic-wise</li> 
                    <li>Contests</li> 
                    <li>Subjective Questions</li> 
                </ul> 
            </div> 
        </footer> 
    </body> 
</html>

输出：

浏览器支持：footer标签是HTML5中的新增函数，它在浏览器中受支持，如下所示：

谷歌浏览器6.0
Internet Explorer 9.0
Firefox 4.0
Opera 11.1
Safari 5.0

相关用法

注：本文由纯净天空筛选整理自Shubrodeep Banerjee大神的英文原创作品 HTML5 | <footer> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。