suchen
HeimWeb-FrontendH5-TutorialHTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

       大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下:

#nav{ padding: 10px... }
#header{ padding: 10px ... }
#footer{ padding: 10px ... }


       定义完之后呢,我们使用p标签来组织页面结构,如下:

<div id=“header”></div>
<div id=“nav”></div>
<div id=“footer”></div>

这样的代码让我们创建了很多的非样式的CSS定义,是的代码结构复杂并且不直观易懂。

       在新的HTML5标准中,我们定义了一系列的标签,帮助你更语义化的定义页面层次和逻辑,你不需要自己定义相关的DIV,HTML5提供了现成的标签来完成上述的结构化定义,如下:

<header></header>
<nav></nav>
<footer></footer>

使用以上的标签,你只需要在css文件中定义相关的真正的样式信息即可。

       在今天的这篇文章中,我们将介绍相关的基本HTML5标签Header,nav和footer。


       header标签


       在新的标准中header标签定义如下:


    “A group of introductory or navigational aids.”



       基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容,也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如:

<header>
<h1>HTML5基本标签使用,header,Nav和footer</h1>
<div class=”post-meta“>
<p>作者信息:gbin1.com</a> <span class=”category“>文章创建类别:HTML5/CSS3</span></p>
</div>
</header>
<article>
<p>大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,
在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分</p>
</article>

       在上面的结构中,我们可以看到使用header我们定义了一篇文章的标题和内容。这里header标签的使用并不是页面的页头,而是文章的页头。

       所以在HTML5中,header的使用更加灵活,你可以根据你的需要来定义和组织document结构。

       Nav标签

       Nav标签全称navigation,顾名思义,是导航的意思。根据HTML5的相关标准定义如下:


"A section of a page that links to other pages or to parts within the page: a section with navigation links."

       中文翻译大概意思是”页面中的一个用来链接到其它页面或者当前页面的区域:一个含有导航链接的区域”。

       这里非常清楚的定义了nav标签的功能,这里和header类似并没有指定必须是主导航,也可以是页面其它部分的子导航。如下:

<h3>gbin1.com文章列表</h3>
<nav>
<ul>
<li><a href=”#html5“>HTML5文章介绍</a></li>
<li><a href=”#css3“>CSS3文章介绍</a></li>
<li><a href=”#jquery“>jQuery文章介绍</a></li>
<ul>
</nav>

 

       在上面这个例子中,我们看到这里只是一个区域的文章导航,同样也可以使用nav定义一个小型的页面内导航。

       Footer标签

       最后一个就是footer标签,即,页底标签。使用这个标签你可以定义页面的低端结构,当然,和上面我们介绍header标签或者nav标签一样,它并不是仅仅使用在整个页面的页尾处。相关的HTML5标准定义如下:


  “ The footer element represents a footer for its nearest ancestor sectioning content or 
  sectioning root element. A footer typically contains information about its section such as who wrote it, 
  links to related documents, copyright data, and the like.”


       中文意思是:”footer元素代表了页面内容或者区域内容最底端的展示。一个典型的例子是包含了作者信息,文档链接或者是版权信息等等“。


       当然,这里我们看到并不局限于整个页面的内容,也可以是一个文章的页尾内容,例如,来源或者是作者信息等等。如下:

<footer>
<div class=”tags“>
<span class=”tags-title“>相关标签</span>
<a href=”#“ rel=”tag“>html5</a>, 
<a href=”#“ rel=”tag“>nav</a>, 
<a href=”#“ rel=”tag“>header</a>, 
<a href=”#“ rel=”tag“>footer</a>
</div>
<div class=”source“>
<div>来源:<a href=”http://gbin1.com“>html5/css3教程</a></div>
</div>
</footer>

       在上面的例子中,我们定义了一个简单的文章内的页尾信息,可以看到我们添加了来源和相关标签,这在博客类型的网站中经常出现。

       一个完整的HTML5页面

       在这里我们使用基本的header,nav和footer标签书写了一个响应式的HTML5页面,如果你使用老版本的浏览器,例如IE6,7等等。需要引入相关的js来帮助识别新的元素,当然,你也可以使用下面js代码来简单生成。

/* * 创建HTML5标签 */ 
document.createElement(”article“); 
document.createElement(”section“);

1210.jpg


       总结


       相 对于其它的HTML5特性来说,header,nav和footer显得不是那么的酷,当时作为一个前端开发人员来说,如何能够正确的组织页面结构对于一 个逻辑性很强,页面也很复杂的项目来说,意义依旧是非常重大的。希望今天的这篇文章能够帮助大家简单直观的了解这些基本的HTML5标签。

以上就是HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Dekonstruieren von H5 -Code: Tags, Elemente und AttributeDekonstruieren von H5 -Code: Tags, Elemente und AttributeApr 18, 2025 am 12:06 AM

Der HTML5 -Code besteht aus Tags, Elementen und Attributen: 1. Das Tag definiert den Inhaltstyp und ist von Winkelklammern umgeben, wie z. 2. Elemente bestehen aus Start -Tags, Inhalten und End -Tags wie Inhalten. 3. Attribute definieren Schlüsselwertpaare im Start-Tag und verbessern Funktionen, z. B.. Dies sind die grundlegenden Einheiten zum Aufbau von Webstruktur.

H5 -Code verstehen: Die Grundlagen von HTML5H5 -Code verstehen: Die Grundlagen von HTML5Apr 17, 2025 am 12:08 AM

HTML5 ist eine Schlüsseltechnologie zum Aufbau moderner Webseiten und bietet viele neue Elemente und Funktionen. 1. HTML5 führt semantische Elemente wie usw. ein, die die Webseitenstruktur und die SEO verbessern. 2. Support Multimedia-Elemente und Einbetten von Medien ohne Plug-Ins. 3. Formulare verbessern neue Eingangstypen und Überprüfungseigenschaften und vereinfachen Sie den Überprüfungsprozess. 4. Bieten Sie Offline- und lokale Speicherfunktionen an, um die Leistung der Webseiten und die Benutzererfahrung zu verbessern.

H5 -Code: Best Practices für WebentwicklerH5 -Code: Best Practices für WebentwicklerApr 16, 2025 am 12:14 AM

Zu den Best Practices für den H5 -Code gehören: 1. Verwenden Sie korrekte DocType -Deklarationen und Zeichenkodierung; 2. Verwenden Sie semantische Tags; 3.. HTTP -Anfragen reduzieren; 4. Verwenden Sie asynchrone Laden; 5. Bilder optimieren. Diese Praktiken können die Effizienz, Wartbarkeit und Benutzererfahrung von Webseiten verbessern.

H5: Die Entwicklung von Webstandards und TechnologienH5: Die Entwicklung von Webstandards und TechnologienApr 15, 2025 am 12:12 AM

Webstandards und -technologien haben sich bisher aus HTML4, CSS2 und einfachem JavaScript entwickelt und haben erhebliche Entwicklungen erfahren. 1) HTML5 führt APIs wie Leinwand und Webstorage ein, die die Komplexität und Interaktivität von Webanwendungen verbessern. 2) CSS3 fügt Animations- und Übergangsfunktionen hinzu, um die Seite effektiver zu gestalten. 3) JavaScript verbessert die Entwicklungseffizienz und die Lesbarkeit der Code durch moderne Syntax von Node.js und ES6, wie z. B. Pfeilfunktionen und Klassen. Diese Änderungen haben die Entwicklung von Leistungsoptimierung und Best Practices von Webanwendungen gefördert.

Ist H5 eine Abkürzung für HTML5? Erforschen der DetailsIst H5 eine Abkürzung für HTML5? Erforschen der DetailsApr 14, 2025 am 12:05 AM

H5 ist nicht nur die Abkürzung von HTML5, sondern auch ein breiteres Ökosystem der modernen Webentwicklungstechnologie: 1. H5 enthält HTML5, CSS3, JavaScript und verwandte APIs und Technologien; 2. Es bietet eine reichhaltigere, interaktive und reibungslose Benutzererfahrung und kann nahtlos auf mehreren Geräten ausgeführt werden. 3. Mit dem H5 -Technologie -Stack können Sie reaktionsschnelle Webseiten und komplexe interaktive Funktionen erstellen.

H5 und HTML5: häufig verwendete Begriffe in der WebentwicklungH5 und HTML5: häufig verwendete Begriffe in der WebentwicklungApr 13, 2025 am 12:01 AM

H5 und HTML5 beziehen sich auf dasselbe, nämlich HTML5. HTML5 ist die fünfte Version von HTML, die neue Funktionen wie semantische Tags, Multimedia -Support, Leinwand und Grafiken, Offline -Speicher und lokaler Speicher bietet, die Ausdrucksfähigkeit und Interaktivität von Webseiten verbessert.

Worauf bezieht sich H5? Erforschen des KontextesWorauf bezieht sich H5? Erforschen des KontextesApr 12, 2025 am 12:03 AM

H5REFERSTOHTML5, ApivotaltechnologyInwebdevelopment.1) HTML5IntroducesNewelementsandapisrich, Dynamicwebapplications.2) ITSUPP ortsmultimediaWitHoutPlugins, BETHINGINGUSEREXPERICERCROSSDEVICES.3) SEMANTICELEMENTSIMPROVEPENTENTENTENTRUCTENTRUCTELUREANDSEO.4) H5'SRespo

H5: Tools, Frameworks und Best PracticesH5: Tools, Frameworks und Best PracticesApr 11, 2025 am 12:11 AM

Zu den Tools und Frameworks, die in der H5 -Entwicklung gemeistert werden müssen, gehören Vue.js, React und WebPack. 1.Vue.js eignet sich zum Erstellen von Benutzeroberflächen und unterstützt die Komponentenentwicklung. 2. Die Rendern des Seitenrenders über virtuelle DOM optimiert, geeignet für komplexe Anwendungen. 3.Webpack wird zur Modulverpackung und zur Optimierung der Ressourcenlast verwendet.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor