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.hqwc.cn/news/174290.html

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

相关文章

解析JSON字符串:属性值为null的时候不被序列化

如果希望属性值为null及不序列化&#xff0c;只序列化不为null的值。 1、测试代码 配置代码&#xff1a; mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL); 或者通过注解JsonInclude(JsonInclude.Include.NON_NULL) //常见问题2&#xff1a;属性为null&a…

8 历史服务器配置

为了查看程序的历史运行情况&#xff0c;需要配置一下历史服务器 1、配置mapred-site.xml vim mapred-site.xml在该文件里面增加如下配置 //原先的配置不用删除 <!-- 历史服务器端地址 --> <property><name>mapreduce.jobhistory.address</name><…

缺陷预测(一)——论文复现

运行CGCN文件 问题一&#xff1a;CNN输入维度的问题出现的问题解决问题原因 问题二&#xff1a;mix时&#xff0c;输入的train_in和train_gen.inputs数据格式不一致出现的问题解决问题 最终结果 问题一&#xff1a;CNN输入维度的问题 出现的问题 数据集改好之后&#xff0c;出…

D. Jumping on Walls bfs

Problem - 199D - Codeforces 题目大意&#xff1a;有一个两个垂直的平行墙壁组成的一个峡谷。一个人初始是在左边墙壁第一层。在每个墙壁上有些障碍点&#xff0c;用X表示&#xff0c;这些障碍点不能被到达。&#xff0c;他可以执行以下三个操作&#xff1a; 向当前墙壁往上…

Win10系统把D盘空间分给C盘的方法

在Win10系统中&#xff0c;用户发现C盘的空间太少了&#xff0c;导致电脑运作出现了卡顿的问题&#xff0c;所以想把D盘的空间分给C盘&#xff0c;但不清楚具体的操作步骤。接下来小编给大家介绍两种简单的操作方法&#xff0c;帮助大家轻松将Win10系统D盘的空间分给C盘&#x…

JavaScript_表单校验用户名和密码

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册页面</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background: url("img/register_bg.png") …

邻接矩阵储存图实现深度优先遍历(C++)

目录 基本要求&#xff1a; 图的结构体&#xff1a; 图的构造&#xff1a; 图的深度优先&#xff08;DFS&#xff09;&#xff1a; 图的打印输出&#xff1a; 完整代码&#xff1a; 测试数据&#xff1a; 运行结果&#xff1a; 通过给出的图的顶点和边的信息&#xff0c…

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…

js运算,笔试踩坑知识点

文章目录 前端面试系列运算符记住口诀先计算 后 赋值赋值从右向左 和 - -计算从左向右括号里的加减优先于括号外的乘除交换俩数的值答案 前端面试系列 js运算 笔试踩坑知识点 前端js面试题 &#xff08;三&#xff09; 前端js面试题&#xff08;二&#xff09; 前端js面试题 (…

tensorflow 1.15 gpu docker环境搭建;Nvidia Docker容器基于TensorFlow1.15测试GPU;——全流程应用指南

前言: TensorFlow简介 TensorFlow 在新款 NVIDIA Pascal GPU 上的运行速度可提升高达 50%&#xff0c;并且能够顺利跨 GPU 进行扩展。 如今&#xff0c;训练模型的时间可以从几天缩短到几小时 TensorFlow 使用优化的 C 和 NVIDIA CUDA 工具包编写&#xff0c;使模型能够在训练…

OpenCV入门——概述 || 环境搭建

文章目录 OpenCV与图形学的关系OpenCV与FFmpeg的关系博客内容概览计算机视觉的应用OpenCV简介环境搭建 OpenCV与图形学的关系 从图形中理解其内容&#xff0c;是计算机视觉的任务&#xff1b;通过模型渲染出图像&#xff0c;是图形学的任务。 OpenCV与FFmpeg的关系 博客内容概…

【数据结构】归并排序

#include<iostream>using namespace std;void Merge(int* arr,int left,int right,int mid, int*& tmparr) {int begin1 left, end1 mid;int begin2 mid 1, end2 right;int tmpi left;//下面合并两个数组为一个有序数组&#xff08;升序&#xff09;&#xff1…