详解HTML5网页结构

HTML5的网页结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>...</article>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</body>
</html>

DOCTYPE声明

HTML4中的DOCTYPE声明格式如下图:

HTML5中的DOCTYPE声明格式如下图:

Head

HTML完了之后就是Head部分,head表示的就是不在浏览器内容的正文显示部分显示。Head里面有个meta标签,里面有个charset属性,值是UTF-8,这是表示网页的字符编码。

在HTML4中的格式:

在HTML5中的格式:

Title表示网页的名称,会现在是浏览器的窗口之上。

body

Head部分完成之后,就是我们的body部分,body里面的内容都会在浏览器的窗口内显示,也就是我们的主体部分,我们平常所看到的部分。

Header标签

是HTML5之后新增的元素,header元素表示页面中的一个内容区块或者整个页面的标题!
HTML5中使用方法:
<header></header>是一对的形式展示,有头有尾。

<nav>元素

<nav>元素也是新增的元素,nav元素表示页面中的导航链接部分。
HTML5中使用方法:
<nav>...</nav>

<article>元素

article元素表示页面中的一块玉上下文不相关的的独立内容,比如一篇文章中的文章。
HTML5的使用方法:
<article></article>

<section>元素

cection表示页面中的一块内容区块,比如章节的页眉、页脚等等。也可以和Hn(h1、h2..)等一起使用,标示出文档的结构!
<section></section>

<aside>元素

aside元素表示article元素的内容之外的,和内容相关的辅助信息!
<aside><aside>

<footer>元素

footer表示页面或者是页面中的一块区域的页脚,比如存放文件的创建时间、作者、联系方式等等。
<footer></footer>

原文地址:https://www.cnblogs.com/bdqnit/p/9091078.html

时间: 2024-08-02 03:03:16

详解HTML5网页结构的相关文章

Spring IOC源码详解之总体结构

Spring ICO详解之总体结构 IOC介绍 IOC, spring的核心,贯穿Spring始终.直观的来说,就是由spring来负责控制对象的生命周期和对象间的关系,将对象之间的关系抽象出来,通过spring容器控制对象生成时机,减少对象之间的耦合度. 开启Spring IOC源码学习 SpringIOC 的主要依赖源码是 spring-beans 和 spring-context两个包.前面文章中曾今讲到了如何编译spring源码,接下来将maven后的工程导入eclipse里面. 一.s

PE详解之IMAGE_DOS_HEADER结构定义即各个属性的作用(PE详解01)

小甲鱼在这里为大家做好了详细的注释,免得大家一头雾水,另外可以结合小甲鱼<加密系列>-系统篇-PE结构详解视频教程学习~若有纰漏之处还望大家不吝指正. (视频教程:http://fishc.com/a/shipin/jiemixilie/) (注:最左边是文件头的偏移量.) IMAGE_DOS_HEADER STRUCT { +0h WORD e_magic   // Magic DOS signature MZ(4Dh 5Ah)     DOS可执行文件标记 +2h   WORD  e_cb

HTML5动画效果视频详解 Html5动画视频教程

课程目录:01.HTML5公开课03期-HTML5动画详解-第1讲:rotate旋转.wmv02.HTML5公开课03期-HTML5动画详解-第2讲:scale缩放.wmv03.HTML5公开课03期-HTML5动画详解-第3讲:skew扭曲.wmv04.HTML5公开课03期-HTML5动画详解-第4讲:translate平移.wmv05.HTML5公开课03期-HTML5动画详解-第5讲:transition案例(一).mp405.HTML5公开课03期-HTML5动画详解-第6讲:tran

Java虚拟机详解02----JVM内存结构

主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: <深入理解Java虚拟机(第二版)>中的描述是下面这个样子的: Java中的内存分配: Java程序在运行时,需要在内存中的分配空间.为了提高运算效率,就对数据进行了不同空间的划分,因为每一片区域都有特定的处理数据方式和内存管理方式. 具体划分为如下5个内存空间:(非常重要) 栈:存放局部变量

详解Oracle存储结构 掌握基本操作管理

2018.10.14那天我写了Oracle12C 的安装并初步了解了一下Oracle体系结构中数据库和实例.从中我们知道: 数据库是磁盘上数据的集合,位于收集和维护相关信息的数据库服务器上的一个或多个文件中.数据库由各种物理和逻辑结构组成,而表则是数据库中最重要的逻辑结构.表由包含数据的相关行和列组成. 组成数据库的文件主要分为两类:数据库文件和非数据库文件.两者之间的区别在于存储何种数据.数据库文件包含数据和元数据,非数据库文件则包含初始参数和日志记录信息等.数据库文件对于每时每刻正在进行的数

video详解 HTML5中的视频:

一.video 视频的方法.属性.事件详解 方法:play() 播放  pause() 暂停 属性:currentTime播放到当前的时间   duration视频的总时长 事件:ended 播放完的事件,需要进行的操作 二.video的浏览器的兼容性:(让所有浏览器都兼容) 1.添加js(下载地址:http://www.zhangxinxu.com/study/js/html5media.min.js ) <script src="http://html5media.googlecode

#51CTO学院四周年#详解JWT的结构与应用

1. JWT是什么? JWT,全称JSON WEB TOKEN, 是WEB客户端与服务器之间相互进行安全通信的规范.通信双方的对象本身通过JSON传递数据是不安全的,但是由于有了数字签名的存在,这些信息变的可信的. 2. JWT特点 简洁(Compact): 可以通过URL,POST参数或者在HTTP header发送,因为数据量小,传输速度也很快 自包含(Self-contained):负载中包含了所有用户所需要的信息,避免了多次查询数据库 3. JWT的应用场景 身份认证:当用户在客户端完成

详解Google-ProtoBuf中结构化数据的编码

原文转自:http://www.wuzesheng.com/?p=1258 本文的主要内容是google protobuf中序列化数据时用到的编码规则,但是,介绍具体的编码规则之前,我觉得有必要先简单介绍一下google protobuf.因此,本文首先会介绍一些google protobuf相关的内容,让读者朋友对google protobuf有一个初步的印象,然后,再开始进入正题—-深入浅出地介绍google protobuf中用到的编码规则.下面言归正传,开始今天的话题. 1. Googl

小甲鱼PE详解之IMAGE_NT_HEADERS结构定义即各个属性的作用(PE详解02)

PE Header 是PE相关结构NT映像头(IMAGE_NT_HEADER)的简称,里边包含着许多PE装载器用到的重要字段.下边小甲鱼将为大家详细讲解哈~ (视频教程:http://fishc.com/a/shipin/jiemixilie/) 首先是IMAGE_NT_HEADERS 结构的定义:(啥?结构不会,先看看小甲鱼童鞋的<零基础入门学习C语言>关于结构方面的章节吧~) IMAGE_NT_HEADERS STRUCT { +0hDWORDSignature  // +4h  IMAG