nav元素

　　nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。

并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。

　　nav元素的应用场景：

  • 传统的导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>nav元素</title>

</head>

<body>

    <nav>

        <ul>

            <li><a href="#">主页</a></li>

            <li><a href="#">开发文档</a></li>

        </ul>

    </nav>

<article>

    <header>

        <h1>HTML5与CSS3的历史</h1>

        <nav>

            <ul>

                <li><a href="#">HTML5历史</a></li>

                <li><a href="#">CSS3历史</a></li>

            </ul>

        </nav>

    </header>

    <section>

        <h1>HTML5历史</h1>

        <p>.....</p>

    </section>

    <section>

        <h1>CSS3历史</h1>

        <p>.....</p>

    </section>

    <footer>

        <a href="#">删除</a>

    </footer>

</article>

<footer>

    <p><small>版权声明：</small></p>

</footer>

</body>

</html>

aside元素

　　aside元素用来表示当前页面或文章的附属信息部分，他可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，

以及其他类似的有区别于主要内容的部分。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>aside元素</title>

</head>

<body>

    <header>

        <h1>js入门</h1>

    </header>

<article>

    <h1>语法</h1>

    <p>文章的征文</p>

    <aside>

        <h1>名词解释</h1>

        <p>语法：。。。。。</p>

    </aside>

</article>

<aside>

    <nav>

        <h2>评论</h2>

        <ul>

            <li><a href="#">2019-3-11</a></li>

            <li><a href="#">大牛：嘿，bro!</a></li>

        </ul>

    </nav>

</aside>

</body>

</html>

八（第二篇）、主体结构元素——nav元素、aside元素的更多相关文章

  1. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  2. 第二篇 HTML 常用元素及属性值

    常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里.   标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div>< ...

  3. python自动化测试应用-第6篇（WEB测试）--Selenium元素篇

    篇6                            python自动化测试应用-Selenium基础篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),上一篇我们搭建好p ...

  4. 章节八、3-如何用Chrome开发者工具查看元素

    一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...

  5. [转]Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...

  6. 【OpenGL】第二篇 Hello OpenGL

    ---------------------------------------------------------------------------------------------------- ...

  7. Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...

  8. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  9. EnjoyingSoft之Mule ESB开发教程第二篇：Mule ESB基本概念

    目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application ...

随机推荐

  1. 禁止WORDPRESS站内搜索的方法

    如果我们希望禁止站内搜索,毕竟会是的MYSQL负担加重,我们可以禁止掉,然后在使用第三方搜索组件.比如用百度站内搜索或者360站内搜索. function fb_filter_query( $quer ...

  2. 浏览器输入URL按回车后都经历了什么？

    在浏览器上输入一个URL,按回车后,这个过程发生了什么? 1.首先,浏览器地址栏输入了URL,先解析URL,检测URL地址是否合法 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直 ...

  3. java面向对象编程(四)--类变量、类方法

    1.什么是类变量? 类变量是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. 如何定义类变量? 定义语法:     ...

  4. 剑指Offer 49. 把字符串转换成整数 （字符串）

    题目描述 将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一 ...

  5. python 前端 html

    web 服务本质: 浏览器发出请求--HTTP协议--服务端接收信息----服务端返回响应---服务端把HTML文件发给浏览器--浏览器渲染页面. HTML: 超文本标记语言是一种用于创建网页的标记语 ...

  6. 慢工出细活 JS 等待加载效果

    实例可以直接运行查看效果.很方便快捷 <html> <head> <meta http-equiv="content-Type" content=&q ...

  7. [LeetCode&Python] Problem 744. Find Smallest Letter Greater Than Target

    Given a list of sorted characters letters containing only lowercase letters, and given a target lett ...

  8. leetcode 3.Longest Substring Without Repeating Charcters

    在一个字符串中寻找出最长的无重复字符的子串的,在不断的后续检索中需要去掉前面一个重复的字符,那么就是需要记录之前所出现过的字符的,在这里需要利用hashmap来记录字符和其出现的位置之间的映射关系的, ...

  9. VSCode 常用的快捷键

    R键:点击后热加载,直接查看预览结果 P键: 在虚拟机中显示网格,常用 O 键:切换iOS 和Android Q键 :退出调试 ctr +~  打开 终端

  10. 【java多线程】队列系统之ArrayBlockingQueue源码

    1.简介 ArrayBlockingQueue,顾名思义:基于数组的阻塞队列.数组是要指定长度的,所以使用ArrayBlockingQueue时必须指定长度,也就是它是一个有界队列. 它实现了Bloc ...