八(第二篇)、主体结构元素——nav元素、aside元素
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元素的更多相关文章
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- 第二篇 HTML 常用元素及属性值
常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里. 标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div>< ...
- python自动化测试应用-第6篇(WEB测试)--Selenium元素篇
篇6 python自动化测试应用-Selenium基础篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),上一篇我们搭建好p ...
- 章节八、3-如何用Chrome开发者工具查看元素
一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...
- [转]Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...
- 【OpenGL】第二篇 Hello OpenGL
---------------------------------------------------------------------------------------------------- ...
- Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- EnjoyingSoft之Mule ESB开发教程第二篇:Mule ESB基本概念
目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application ...
随机推荐
- 调用shutdown.sh后出现could not contact localhost8005 tomcat may not be running报错问题
之前调用tomcat的shutdown.sh无法关闭tomcat,一直报could not contact localhost8005 tomcat may not be running错. 在网上找 ...
- 第一章01:熟悉java,发展历史
1. java由来: 原公司,sun,后来被oracle\甲骨文公司收购 java,主要用于开发互联网软件,例如:QQ.迅雷.淘宝.京东
- 关于空指针NULL、野指针、通用指针 (转)
reference:https://www.cnblogs.com/losesea/archive/2012/11/16/2772590.html 首先说一下什么是指针,只要明白了指针的含义,你就明白 ...
- 如何避免form提交进行页面跳转
正常的form表单提交后需要进行页面跳转,如果我们不希望进行页面跳转,那么按以下两个步骤,通过一个iframe就可以解决这个问题: 步骤一:首先在页面中定义一个空的不可见的iframe <!-- ...
- kafka 分区和副本以及kafaka 执行流程,以及消息的高可用
1.Kafka概览 Apache下的项目Kafka(卡夫卡)是一个分布式流处理平台,它的流行是因为卡夫卡系统的设计和操作简单,能充分利用磁盘的顺序读写特性.kafka每秒钟能有百万条消息的吞吐量,因此 ...
- BootstrapValidator . select 必须选择一个 .callback . select .option
1.对于: 如果 只是引用 notEmpty , 不起作用. 因为 请选择教师 也是一个 option , 一个选项. 可以使用 callback. 'userId':{ message :'教 ...
- 05_解决mac百度网盘下载速度慢问题
第一步:下载软件 下载工具包:aria2GUI和chrom插件 链接:https://pan.baidu.com/s/104t6aZXx9zfxBV9rS_eLfg 密码:yg96 ①下载Aria2 ...
- IC卡插入与触点激活时序
当IC卡插入接口设备时,终端应确保其所有触点处于低电平状态: 当IC卡插入接口设备后,触点须按如下方式激活: 要点: 终端必须在整个激活时序中保持RST为低电平状态: 触点物理接触之后,应在IO或CL ...
- terminal、Shell、tty和console
最早的电脑有带很多开关和指示灯的面板——console(概念来自管风琴),一台电脑通常一个Console,化为主机一部分,和CPU共享机柜. 一台大型主机往往支持多用户,每个用户使用的终端——term ...
- MySQL 5.7以上 root用户默认密码问题【转】
https://www.yanning.wang/archives/379.html 废话少说一句话系列: CentOS系统用yum安装MySQL的朋友,请使用 grep "temporar ...