HTML5新特性之标签使用：header、nav、aside、main、footer......

最新推荐文章于 2023-12-08 17:34:57 发布
最新推荐文章于 2023-12-08 17:34:57 发布
阅读量1w 收藏 65
点赞数 18
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_W_1212/article/details/104554528
版权

关注重工黑大帅，学习不迷路

一、概念理解

header 一般放置在页面的顶部或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题等信息
nav 页面导航
aside 侧边栏区域
main 注内容区
footer 页脚
artical 一段独立的内容
section 通常包含一个明确的主题
figure 带有标题的图片或其它文件
figcaption 经常和figure连用，图片或其它文件的文字说明
time 表示时间
strong 着重强调
b 加粗效果
i 文字倾斜

二、效果图显示

在这里插入图片描述

三、实际应用

1.应用效果图

在这里插入图片描述

2.上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="网页布局，浮动">
    <meta name="description" content="这是一个精美的网页布局">
    <meta http-equiv="refresh" content="20">
    <title>网页布局练习</title>
</head>
<style type="text/css">
    *{
   
        margin: 0;
        padding: 0;
    }
    ul{
   
        list-style:none;
        display: inline-block;
    }
    a{
   
        text-decoration: none;
    }
    .clears {
   
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
    body {
   
        margin: 0 auto;
    }
    .total {
   
        width: 1920px;
        height: 825px;
        background-color:darkgrey;
        padding-top: 50px;
    }
    .all{
   
        widht: 1900px;
        height: 740px;
        background-color:aquamarine;
        margin-left:50px;
        margin-right: 50px;
        padding-top: 40px;

    }
    .header {
   
        height: 50px;
        width: 1300px;
        background-color: aqua;
        color: white;
        margin: 20px auto 30px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        cursor: pointer;
        animation: banner_big 1s infinite alternate;
        animation: Ani 0.4s  0.2s both;
    }
    @keyframes banner_big{
   
        0%{
   
            opacity: 0;
            transform: scale(1,1);
        }
        100%{
   
            opacity: 1;
            transform: scale(1.5,1.5);
        }
    }
    @keyframes Ani{
最低0.47元/天 解锁文章
bkLion
关注
  • 18
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
HTML5/CSS3系列教程：HTML5基本标签使用header，nav和footer
GBin1.com
01-17 1769
日期：2013-1-15  来源：GBin1.com 大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{
html5初学（header、nav、main、aside、footer标签）
qq_45862126的博客
03-18 3518
html5初学（header、nav、main、aside、footer标签） 老规矩，为了便于理解先上图目前大多数的网页都差不多是这个框架 上代码，文末有各个标签的解释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
实战九： Vue路由使用
最新发布
shieryue_2016的博客
12-08 419
既然现在传过来的是Function, 那么有两个方法, 要么将传入的参数改为。2、created选项名称错误写成create，导致刷新未调用接口加载数据。, 要么将collapse指定接收的参数类型改为Function。3）router 引入 store,4)main.js 引入vuex。1）子组件设置props选项。this.store不存在。5)面包屑使用store。父组件-》子组件传参数。
前端基础内容（二）
weixin_38091402的博客
05-19 314
前端基础内容（二） 1、实体 &实体的名字; https://www.w3school.com.cn/tags/html_ref_entities.html 2、meta标签 设置网页的元数据 https://www.w3school.com.cn/tags/tag_meta.asp <!DOCTYPE html> <html lang="en"> <head> <!-- meta标签主要设置网页的元数据
header nav section footer aside article
liu709127859的专栏
04-17 496
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;练习 网站导航&lt;/title&gt;    &lt;style&gt;              *{   margin:0;   pad
Html5新增语义结构元素：article section aside nav header hgroup footer time
xuanwuziyou的专栏
08-24 2439
1.一个使用如上新增元素的简单html页例子： Html5新增语义结构元素：article section aside nav header hgroup footer time :root{ min-width: 1000px; } ul{ margin-left:
HTML5学习总结（2）——header/nav/footer/article/section/aside
Arcgiser的博客
04-16 570
header标签 在 HTML5 中，<header>标签定义了文档的头部区域。<header>元素适合在 <body>标签内部使用。<header> 与 <head>标签完全不同。 <html> <head></head> <body> <header> <h1>标题 1</h1> <h3>标题
html5新特性-header,nav,footer,aside,article,section等各元素的详解
weixin_30861797的博客
08-18 726
Html5新增了27个元素，废弃了16个元素，根据现有的标准规范，把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素四大类。 下面是对各标签的详解，section、header、footer、nav、article、aside、figure、code、dialog、meter、time、progress、video、audio、deta...
前端第二章：6.浏览器的自动修复机制；网页布局 （header标签、main标签、footer标签；nav标签；aside标签）
要思考，要努力
04-25 1517
一、浏览器的自动修复机制 1.出现如下的问题，浏览器会自动帮助我们修改代码 1.1 标签写在根元素的外部 -> 被修复 1.2 p元素中嵌套了块状元素 1.3 根元素中出现了除head和body以外的子元素 二、块元素和行内元素注意点： 1.我们在 块元素 中放 行内元素，反之不行 2.p元素中不能嵌套 块状元素 三、块元素之 header、main、footer（用于布局） 1.网页的头部：header标签 1.1 header标签 在实际网页中的样子： 2.网页的主体：main标签（每个网页中
HTML5全局属性和其他共4页.pdf.zip
11-25
HTML5是现代网页开发的核心标准，它引入了许多新特性、元素和属性，极大地提升了开发者的工作效率和用户体验。其中，HTML5的全局属性是一类适用于所有HTML元素的属性，它们为开发者提供了更多的灵活性和控制力。这些...
html.zip_website...html..
09-20
4. `<header>`、`<nav>`、`<main>`、`<section>`、`<article>`、`<aside>`、`<footer>`：这些是HTML5引入的语义元素，帮助搜索引擎和屏幕阅读器更好地理解页面内容。 jQuery的效果实现主要通过以下方式： 1. DOM...
HTML知识点总结（三）共2页.pdf.zip
10-30
8. HTML5新特性：HTML5引入了许多新元素和功能，如`<header>`、`<footer>`、`<nav>`、`<article>`、`<section>`等结构性元素，以及`<video>`、`<audio>`媒体元素，`<canvas>`用于图形绘制，还有离线存储、拖放功能等...
app.js+html5的基础demo
09-08
1. **HTML5模板**：展示了如何利用HTML5的新标签来构建页面结构，比如使用`<header>`、`<nav>`、`<main>`、`<aside>`和`<footer>`来定义页面区域。 2. **app.js初始化**：可能有一个`app.js`的示例文件，演示了如何...
html-css：http：devfuria.com.brhtml-css
02-13
5. 结构元素：如`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`和`<footer>`等，用于组织网页的结构。 CSS基础知识： 1. 选择器：CSS通过选择器来定位HTML元素，如标签选择器（如`p`）、类选择器（如`....
Vue3后台通用管理系统（一）：header、aside组件的基本搭建、首页home组件的实现
DogEgg_001的博客
11-11 1436
使用vue3+ts+pinia+element-plus搭建一个通用的后台管理系统（没准后面会改成特定的功能）header、aside是非路由组件，中间的部分用于放置不同的路由组件，例如home、user等。
html5 footer header,W3C HTML5标准阅读笔记 – header、footer、main、address
weixin_35725147的博客
06-20 847
在HTML5标准中，新增了header标签用于表示引导介绍性内容，footer标签用于表示脚注内容，同时新增了main标签用于表示页面的主体内容，而新增的address标签则用于表示文章或页面的联系信息。header和footerheader和footer元素可以包含任何除header、footer和main元素以外的Flow元素作为子元素。与article等sectioning content一...
h5中的结构元素header、nav、article、aside、section、footer介绍
09-13 2031
结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <header> <h1>网页主题</h1> &lt...
HTML5—新语义元素header、nav、section、article、aside、footer的介绍
weixin_45264892的博客
07-21 1345
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
CSS3布局模型分析
加油~么么哒~~
03-08 1697
布局模型html部分 absolutemargin 方法步骤 严重缺点 floatmargin 方法步骤 缺点 圣杯布局 float负margin 推导步骤 总结 双飞翼布局 flex弹性盒子布局模型布局模型中经典布局有：三栏或者二栏布局中主内容自适应宽度且侧栏主栏可随意换位置，本文将针对这个需求进行分析。 这次布局模型将从absolute+margin–>float+margin–>圣杯布局–
使用html制作一个https://www.fjnu.edu.cn/main.htm同网址的代码
06-11
好，以下是一个简单的使用HTML制作类似于"https://www.fjnu.edu.cn/main.htm"网页的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>福建师范大学</title> </head> <body> <header> <h1>福建师范大学</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">新闻中心</a></li> <li><a href="#">招生就业</a></li> <li><a href="#">校园生活</a></li> <li><a href="#">教学科研</a></li> <li><a href="#">校友服务</a></li> </ul> </nav> <main> <article> <h2>学校简介</h2> <p>福建师范大学创建于1907年，是福建省人民政府与教育部共建高校。学校主要办学特色是师范教育和人文社会科学，具有百年办学历史和深厚的文化底蕴。</p> </article> <section> <h2>新闻动态</h2> <ul> <li><a href="#">福建师范大学2021年迎新工作启动</a></li> <li><a href="#">2021年福建师范大学教师招聘公告</a></li> <li><a href="#">福建师范大学2021年本科招生计划</a></li> </ul> </section> </main> <aside> <h2>联系我们</h2> <p>地址：福建省福州市闽侯县上街镇</p> <p>电话：0591-83442777</p> <p>邮箱：fjnu@fjnu.edu.cn</p> </aside> <footer> <p>© 2021 福建师范大学</p> </footer> </body> </html> ``` 在这个示例中，我们使用HTML5标记语言来创建网页。我们通过`<header>`元素来定义网页的标题，通过`<nav>`元素来定义网页的主要导航，通过`<main>`元素来定义网页的主要内容，通过`<aside>`元素来定义网页的侧边栏内容，通过`<footer>`元素来定义网页的页脚。在`<main>`元素中，我们使用`<article>`元素来定义学校简介部分的内容，使用`<section>`元素来定义新闻动态部分的内容。网页的样式和布局可以通过CSS来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值