HTML5 tag element html bottom footer css layout tutorial
HTML5
Remember 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, traditionalhtml layoutCode:
But in html5, this commonly used name of "footer" is added as an html5 element tag member.
1. html5 Grammar Structure - TOP
1、Grammar
2. Add id to the footer element tag
3. Add class
< to the footer tag ;footer class=”yanshi”> © DIVCSS5.COM All Rights Reserved
To learn CSS, find DIV+CSS resources on DIVCSS5!
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:
2. HTML5 footer usage layout case - TOP
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 在线演示 DIVCSS5</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">
© DIVCSS5.COM 版权所有
<br /> 学习CSS，找DIV+CSS资源上DIVCSS5!
</div>
<p>html5 footer标签布局</p>
<footer>
© DIVCSS5.COM 版权所有
<br /> 学习CSS，找DIV+CSS资源上DIVCSS5!
</footer>
<p>html5 footer标签布局设置class</p>
<footer class="color-F00">
© DIVCSS5.COM 版权所有
<br /> 学习CSS，找DIV+CSS资源上DIVCSS5!
</footer>
</body>
</html>The above uses the traditional html div tag and html5 footer tag layout, and also sets the class for the footer.
2. HTML5 layout browser screenshot
HTML code html5 footer layout and browser browsing effect splicing diagram
To be To test the layout effect of the html5 footer tag, you need to test the IE browser that supports HTML5. It is recommended to test with Google Chrome browser or Win IE9 or above browser.
The above is the detailed content of HTML5 tag element html bottom footer css layout tutorial. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1670
14
1428
52
1329
25
1274
29
1256
24
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
H5: The Evolution of Web Standards and Technologies
Apr 15, 2025 am 12:12 AM
Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.
The Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in
Apr 18, 2025 am 09:24 AM
When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.
How to optimize website performance: Experiences and lessons learned from using the Minify library
Apr 17, 2025 pm 11:18 PM
In the process of developing a website, improving page loading has always been one of my top priorities. Once, I tried using the Miniify library to compress and merge CSS and JavaScript files in order to improve the performance of the website. However, I encountered many problems and challenges during use, which eventually made me realize that Miniify may no longer be the best choice. Below I will share my experience and how to install and use Minify through Composer.
HTML vs. CSS and JavaScript: Comparing Web Technologies
Apr 23, 2025 am 12:05 AM
HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.
H5: How It Enhances User Experience on the Web
Apr 19, 2025 am 12:08 AM
H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.
Understanding H5 Code: The Fundamentals of HTML5
Apr 17, 2025 am 12:08 AM
HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.
