Home >Web Front-end >HTML Tutorial >How to use the

How to use the
tag element in HTML5

php中世界最好的语言Original: 2017-11-22 17:20:377683browse

H5 has added a c37f8231a37e88427e62669260f0074d tag element, so how do we use it? I remember that when we laid out the copyright at the bottom of the web page before the HTML5 version, we were used to using id="footer" or class="footer" to mark paragraphs, but after having this tag in H5, everything is much simpler.

HTML5 c37f8231a37e88427e62669260f0074d tag element adds a new footer element tag at the bottom of html5. Understand the basics of the new footer tag in html 5 and understand the footer css layout tutorial to truly master and understand the c37f8231a37e88427e62669260f0074d

Remember that when we laid out the copyright at the bottom of the web page before the previous HTML5 version, we were accustomed to using id="footer" or class="footer". Learn more about html tutorial tags!

For example, traditional html layoutCode:

<div id=”footer”>  
　　学习PHP，上www.php.cn! 
</div>

But in html5, this commonly used naming of "footer" is added as an html5 element tag member.

html5 GrammarStructure

1. Grammar

<footer> 
    第一行
　学习PHP，上www.php.cn! 
</footer>

2. Add id to the footer element tag

<footer id=”abc”> 
    第一行
　学习PHP，上www.php.cn! 
</footer>

3. Add footer Add class

<footer class=”yanshi”> 
    第一行
　学习PHP，上www.php.cn! 
</footer>

to the tag 4. Knowledge expansion

When we use the footer tag in HTML5 development, we can treat it as an ordinary div tag, but it is generally used for the bottom layout of the website. Generally, a web page has only one bottom area, so it is best to use the footer only once.

Note: c37f8231a37e88427e62669260f0074d is new to HTML5 and is not compatible with IE8 and below IE browsers, so use it with caution.

tml5 footer usage layout case

Master the footer tag by comparing and observing the traditional div tag layout and the footer tag layout. At the same time, add class to the footer and set the red font for comparison.

1. Complete HTML5 layout example code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>footer </title> 
<style> 
body{text-align:center} 
/* 传统布局CSS */  
#footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} 
 
/* HTML5布局样式 直接对footer元素设置样式 */  
footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} 
.color-F00{ color:#F00}  
</style> 
</head> 
<body> 
<p>传统html 使用div布局</p> 
<div id="footer"> 
　　    第一行
　学习PHP，上www.php.cn! 
</div> 
<p>html5 footer标签布局</p> 
<footer> 
　　    第一行
　学习PHP，上www.php.cn! 
</footer> 
 
<p>html5 footer标签布局设置class</p> 
<footer class="color-F00"> 
　    第一行
　学习PHP，上www.php.cn! 
</footer> 
</body> 
</html>

The above uses the traditional html div tag and html5 footer tag layout, and also sets the class

c37f8231a37e88427e62669260f0074d tag for the footer. There are so many usages. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related recommendations

How to use the 1aa9e5d373740b65a0cc8f0a02150c53 tag of html

##html document How to write a type declaration

How to display a circular image in css3

The above is the detailed content of How to use the

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the

tag of htmlNext article：How to use the

tag of html

See more

How to use the tag element in HTML5

Related articles

How to use the
tag element in HTML5