HTML5学习系列之主结构

HTML5学习系列之主结构

  • 前言
  • HTML5主结构
    • 定义页眉
    • 定义导航
    • 定义主要区域
    • 定义文章块
    • 定义区块
    • 定义附栏
    • 定义页脚
  • 具体使用
  • 总结


前言

学习记录


HTML5主结构

定义页眉

head表示页眉,用来表示标题栏,引导和导航作用的结构元素。

<header role="banner">
</header>
  • 可以使用h1~h6
  • 不可以header中再嵌套footer或header

定义导航

nav表示导航条,可以使用多个nav,作为页面整体或不同部分的导航。

<nav draggable="true"><a href="index.html">首页</a>
</nav>

定义主要区域

main表示主要区域,用于标识网页的主要内容,并且唯一。

定义文章块

article表示文章块,用来标识页面中一块完整的、独立的、可以转发的内容。

定义区块

section表示区块,用于标识文档中的节,多用于对内容进行分区。标记的是页面中的特定区域。

<main role="main"><h1>主要标题</h1><section><h2>xx</h2></section>
</main>

定义附栏

aside表示附栏,用来标识所处内容之外的内容。作为主体内容的附属信息部分,包含在article中。作为页面或站点辅助功能部分,在article之外使用。

定义页脚

footer表示脚注,用来标识文档或节的页脚。

具体使用

<header><h1>[网页标题]</h1><h2>[次级标题]</h2><h3>[标题提示]</h3>
</header>
<main><nav><h3>[导航栏]</h3><a href="#">链接1</a></nav><section><h2>[文章块]</h2><article><header><h1>[文章标题]</h1></header><p>[文章内容]</p><footer><h2>[文章脚注]</h2></footer></article></section><aside><h3>[辅助信息]</h3></aside><footer><h2>[网页脚注]</h2></footer>
</main>

在这里插入图片描述


总结

学习记录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/144736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java和JavaScript是一样的技术吗?

目录 一、Java 是什么 二、JavaScript 是什么 三、Java 和 JavaScript 的区别 一、Java 是什么 Java是一种广泛使用的计算机编程语言&#xff0c;最初由Sun Microsystems&#xff08;后被Oracle收购&#xff09;于1995年发布。Java是一种面向对象的语言&#xff0c;设计初衷…

qnx 工程目录创建工具 addvariant

文章目录 前言一、addvariant 是什么二、addvariant 使用实例1. variant names 参数说明2. 创建一个可执行文件工程3. 创建一个动态库工程 总结参考资料 前言 本文主要介绍如何在qnx 开发环境中创建工程目录及其相关的配置文件(common.mk, Makefile 文件等) 软件版本&#xff…

Java 注解

常见的注解 Override Overload Deprecated 过时 等..... /** *deprecated {link #方法名()}提示可替代方法 */ Deprecated 注解类:Annotion,给编译器进行执行 声明注解使用 interface,本质也是接口,也可以设置抽象方法,起到属性的作用 package java.lang.annotation…

1、LeetCode之两数之和

两数之和 给定一个整数数组 nums和一个目标值target&#xff0c;请你在该数组中找出和为目标值的那两个整数&#xff0c;并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是&#xff0c;你不能重复利用这个数组中同样的元素。 nums [2,7,11,15]target 9[0,1]枚…

mindspore mindyolo目标检测华为昇腾上推理使用、训练;华为OBS文件传输使用

参考&#xff1a; https://github.com/mindspore-lab/mindyolo 使用案例&#xff1a; https://github.com/mindspore-lab/mindyolo/blob/master/GETTING_STARTED.md 安装&#xff1a; pip install mindyolo特别注意opencv-python、opencv-python-headless版本问题&#xff0…

代码随想录算法训练营Day 53 || 1143.最长公共子序列、1035.不相交的线、53. 最大子序和

1143.最长公共子序列 力扣题目链接 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长公共子序列的长度。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&#xff08;也可以不删除任何…

003.文件描述符、重定向

1、文件描述符 文件描述符是与输入和输出流相关联的整数。最广为人知的文件描述符是stdin、stdout和stderr。我们可以将某个文件描述符的内容重定向到另一个文件描述符中。 在编写脚本的时候会频繁用到标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&am…

Visual Studio Code配置c/c++环境

Visual Studio Code配置c/c环境 1.创建项目目录2.vscode打开项目目录3.项目中添加文件4.文件内容5.配置编译器6.配置构建任务7.配置调试设置 1.创建项目目录 d:\>mkdir d:\c语言项目\test012.vscode打开项目目录 3.项目中添加文件 4.文件内容 #include <iostream> u…

网络编程TCP/UDP通信

1 网络通信概述 1.1 IP 和端口 所有的数据传输&#xff0c;都有三个要素 &#xff1a;源、目的、长度。 怎么表示源或者目的呢&#xff1f;请看图 所以&#xff0c;在网络传输中需要使用“IP 和端口”来表示源或目的。 1.2 网络传输中的 2 个对象&#xff1a;server 和 cl…

C语言--字符串详解(多角度分析,什么是字符串?字符串如何存储?字符串如何应用?字符串常用的库函数有哪些?)

目录 一、前言 &#x1f4a6;什么是字符串 &#x1f4a6;字符串如何存储&#xff1f; 二、字符串常量和字符数组 &#x1f4a6;字符串常量 ✨什么是字符串常量&#xff1f; ✨字符串常量与指针 &#x1f4a6;字符数组 ✨字符数组的应用 &#x1f4a6;字符串常量与字符数组的…

k8s-集群升级 2

在每个集群节点都安装部署cir-docker 配置cri-docker 升级master节点 导入镜像到本地并将其上传到仓库 修改节点套接字 升级kubelet 注&#xff1a;先腾空后进行升级&#xff0c;顺序不能搞反&#xff0c;否则会导致严重问题 配置kubelet使用cri-docker 解除节点保护 升级wor…

水库大坝安全监测预警系统的重要作用

水库大坝建造在地质构造复杂、岩土特性不均匀的地基上&#xff0c;在各种荷载的作用和自然因素的影响下&#xff0c;其工作性态和安全状况随时都在变化。如果出现异常&#xff0c;又不被及时发现&#xff0c;其后果不堪设想。全天候实时监测&#xff0c;实时掌握水库水位、雨情…

postman连接数据库

参考&#xff1a;https://blog.csdn.net/qq_45572452/article/details/126620210 1、安装node.js 2、配置环境变量 3、安装xmysql连接数据库cmd窗口输入"npm install -g xmysql"后回车cmd窗口输入"xmysql"后回车,验证xmysql是否安装成功(下图代表安装成功)…

【C++面向对象】13. 接口 / 抽象类*

文章目录 【 1. 抽象类 】1.1 抽象类的定义1.2 抽象类的应用条件1.3 实例 【 2. 设计策略 】 接口描述了类的行为和功能&#xff0c;而不需要完成类的特定实现。C 接口是使用 抽象类&#xff08;abstract base class&#xff0c;也称为ABC&#xff09; 来实现的。 【 1. 抽象类…

配置开启Docker2375远程连接与解决Docker未授权访问漏洞

一、配置开启Docker远程连接 首先需要安装docker,参考我这篇文章&#xff1a;基于CentOS7安装配置docker与docker-compose 配置开启Docker远程连接的步骤&#xff1a; //1-编辑/usr/lib/systemd/system/docker.service 文件 vim /usr/lib/systemd/system/docker.service //2…

2023鸿蒙预定未来,环境搭建学习

鸿蒙开发基础知识 鸿蒙的基本概念和特点 鸿蒙&#xff08;HarmonyOS&#xff09;是华为公司开发的一款全场景分布式操作系统。它的设计目标是为各种设备提供统一的、无缝的用户体验。鸿蒙的核心特点包括以下几个方面&#xff1a; 分布式架构&#xff1a;鸿蒙采用分布式架构&…

LCD1602指定位置显示字符串-详细版

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…

Django模板层

模板之变量 所有的数据类型都可以在模板中使用 render(request, index.html, context{}) render(request, index.html, contextlocals()) """在模板中使用变量的时候&#xff0c;用的是字典的key值&#xff0c;key值value值一般保持一致"""详细…

Linux安装RabbitMQ详细教程

一、下载安装包 下载erlang-21.3-1.el7.x86_64.rpm、rabbitmq-server-3.8.8-1.el7.noarch.rpm 二、安装过程 1、解压erlang-21.3-1.el7.x86_64.rpm rpm -ivh erlang-21.3-1.el7.x86_64.rpm2、安装erlang yum install -y erlang3、查看erlang版本号 erl -v4、安装socat …

【1567.乘积为正数的最长子数组长度】

目录 一、题目描述二、算法原理三、代码实现 一、题目描述 二、算法原理 三、代码实现 class Solution { public:int getMaxLen(vector<int>& nums) {int nnums.size();vector<int> f(n);vector<int> g(n);f[0]nums[0]>0?1:0;g[0]nums[0]<0?1:0…