Html5 各属性详解

Div

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。

 

Section

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。

 

Article

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

 

注:div section article的区别

语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。

 

Aside

aside元素在网站制作中主要有以下两种使用方法

1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。

<article><h1>…</h1><p>…</p><aside>…</aside>
</article>

2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

<aside><h2>…</h2><ul><li>…</li><li>…</li></ul><h2>…</h2><ul><li>…</li><li>…</li></ul>
</aside>

 

Nav

nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的,而不需要<nav>元素。

一个页面中可以拥有多个<nav>元素,作为页面整体或不同部分的导航;下面是W3C给出的一个代码示例:

<body>

<h1>The Wiki Center Of Exampland</h1>

<nav>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/events">Current Events</a></li>

...more...

</ul>

</nav>

<article>

<header>

<h1>Demos in Exampland</h1>

<p>Written by A. N. Other.</p>

</header>

<nav>

<ul>

<li><a href="#public">Public demonstrations</a></li>

<li><a href="#destroy">Demolitions</a></li>

...more...

</ul>

</nav>

<div>

<section id="public">

<h1>Public demonstrations</h1>

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

</section>

<section id="destroy">

<h1>Demolitions</h1>

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

</section>

...more...

</div>

<footer>

<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>

</footer>

</article>

<footer>

<p><small>© copyright 1998 Exampland Emperor</small></p>

</footer>

</body>

在这个示例中,我们可以看到<nav>不仅可以用来作为页面全局导航,也可以放在<article>标签内,作为单篇文章内容的相关导航链接到当前页面的其他位置。

 

转载于:https://www.cnblogs.com/long6286/p/4921085.html

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

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

相关文章

python web开发 Bootstrap框架基础

文章目录1. 安装2. Bootstrap 5 基本应用learning from 《python web开发从入门到精通》 Bootstrap 是最受欢迎的 前端组件库&#xff0c;用于 HTML&#xff0c;CSS&#xff0c;JavaScript 开发的 开源工具集 1. 安装 使用 CDN 引用 <link href"https://cdn.jsdeli…

ubuntu memcached php,如何在 Ubuntu 18.04 上安装 Memcached

Memcached 是一个免费的开源高性能内存中键值数据存储。 它最常用于通过从数据库调用的结果缓存各种对象来加速应用程序。在本教程中&#xff0c;我们将介绍在 Ubuntu 18.04 上安装和配置最新版 Memcached 的过程。 相同的说明适用于 Ubuntu 16.04 和任何基于 Ubuntu 的发行版。…

window.cookie

本地测试cookie用火狐来测试 首先cookie是document上的一个属性。 先弹出一个cookie alert(document.cookie); //弹出是空的 设置cookie&#xff0c;格式是有一定要求的&#xff0c;格式是&#xff0c;名字值 这样的格式 所以设置的时候&#xff0c;这样设置 document.cook…

未知宽高元素的水平垂直居中

大致有4种方法实现&#xff1a; 一、table布局(display:table) 二、绝对布局&#xff08;position:absolute&#xff09;translate 三、转化为行内标签display:inline-block&#xff0c;借助另外一个标签高度来实现 四、通过js的获取标签的宽高来控…

python web开发 网络编程 TCP/IP UDP协议

文章目录1. TCP/IP协议1.1 IP协议1.2 TCP协议2. UDP协议3. Socket4. TCP编程4.1 创建TCP服务器4.2 创建TCP客户端4.3 简易聊天工具5. UDP编程5.1 创建UDP服务器5.2 创建UDP客户端learning from 《python web开发从入门到精通》 1. TCP/IP协议 大家都用同样的协议 protocol&am…

oracle批量联机,Oracle 12.2 使用联机重定义对表进行多处改变

下面的例子将演示如何使用联机重定义操作来对表进行多处改变&#xff0c;原始表jy.original的创建语句如下:SQL> create table jy.original(2 col1 number primary key,3 col2 varchar2(10),4 col3 clob,5 col4 date)6 organization index;Table created.表jy.original将按以…

python web开发 网络编程 HTTP协议、Web服务器、WSGI接口

文章目录1. HTTP协议2. Web服务器3. 静态服务器创建 web_server.py4. WSGI 接口4.1 CGI 通用网关接口4.2 WSGI4.3 定义 WSGI 接口4.4 运行 WSGI 服务learning from 《python web开发从入门到精通》 1. HTTP协议 应用层最主要的协议&#xff1a;HTTP协议&#xff08;HyperText…

php实现文字向左跑马灯,js实现文字跑马灯效果

js实现文字超过显示宽度每间隔1s自动向左滚动显示*{ margin:0; padding:0;}body{font:12px/1 微软雅黑;}.wrapper{font-size: 0.85rem; color: #333; padding-top: 0.75rem; margin: 0 0.75rem; white-space: nowrap; overflow: hidden;width: 300px;}.inner{ width:1000px;ove…

android 75 新闻列表页面

new.xml <?xml version"1.0" encoding"UTF-8" ?> <newslist><news><title>黑马52期就业快报</title><detail>热烈祝贺黑马52期平均薪水突破13k</detail><comment>15687</comment><image>ht…

python web开发 MySQL数据库基础

文章目录1. 简介2. 下载安装3. 操作 MysQL 数据库3.1 创建数据库3.2 选择数据库3.3 查看数据库3.4 删除数据库4. 数据类型5. 操作 MysQL 数据表5.1 创建数据表5.2 查看表的结构5.3 修改表的结构5.4 删除数据表6. 操作 MySQL 数据表记录6.1 添加数据6.2 查询、修改、删除learnin…

oracle计算每月最小工作日,Oracle计算指定日期内的工作日(不包含周末)

1、获取当天是礼拜几&#xff1a;select to_char(sysdate,d) from dual; --礼拜天为1&#xff0c;礼拜一为2&#xff0c;类推2、获取 两个时间段间的 工作日&#xff1a;select (trunc(&end_dt - &start_dt) -((caseWHEN (8 - to_number(to_char(&start_dt,D))) &g…

简单几何(极角排序) POJ 2007 Scrambled Polygon

题目传送门 题意&#xff1a;裸的对原点的极角排序&#xff0c;凸包貌似不行。 /************************************************ * Author :Running_Time * Created Time :2015/11/3 星期二 14:46:47 * File Name :POJ_2007.cpp******************************…

python 操作MySQL数据库

文章目录1. 安装 PyMySQL2. 连接对象3. 游标对象4. 增删改操作cursor.execute(sql)cursor.executemany(sql, seq_of_params)5. 查询操作6. ORM编程常用 python ORM 库learning from 《python web开发从入门到精通》 1. 安装 PyMySQL conda 虚拟环境下安装 pip install pymysq…

go oracle编程,go基础编程(一):第一个go程序-hello word

环境搭建环境搭建是在deepin操作系统上进行1. 下载go安装程序wget https://golang.org/dl/go1.16.linux-amd64.tar.gz以上是下载go1.16的版本&#xff0c;如需其他版本&#xff0c;请移步官网下载。2. 解压程序包到指定目录tar-C/usr/local-xzf go1.16.linux-amd64.tar.gz3. 添…

反射,System.Type类

http://m.blog.csdn.net/blog/woddle/40623333 两个现实中的例子&#xff1a;1、B超&#xff1a;大家体检的时候大概都做过B超吧&#xff0c;B超可以透过肚皮探测到你内脏的生理情况。这是如何做到的呢&#xff1f;B超是B型超声波&#xff0c;它可以透过肚皮通过向你体内发射B型…

python web框架基础

文章目录1. Web框架简介1.1 MVC1.2 模板引擎2. 常用 Python Web 框架3. 虚拟环境4. 部署方式learning from 《python web开发从入门到精通》 1. Web框架简介 简化 web 开发的软件框架 一般都支持&#xff1a;管理路由&#xff0c;支持数据库&#xff0c;MVC&#xff0c;ORM&…

导Excel数据到Oracle的脚本,Oracle使用TOAD实现导入导出Excel数据

在Oracle应用程序的开发过程中&#xff0c;访问数据库对象和编写SQL程序是一件乏味且耗费时间的工作&#xff0c;对数据库进行日常管理也是需要很多SQL脚本才能完成的。Quest Software为此提供了高效的Oracle应用开发工具-Toad。在Toad的新版本中&#xff0c;还加入了DBA模块&a…

Chapter 14 Exercises Problems

转载于:https://www.cnblogs.com/momoko/p/4937730.html

FastAPI 结合 SQLAlchemy 操作 MySQL 数据库

文章目录1. 安装 SQLAlchemy2. 创建数据库3. SQLAlchemy 连接 MySQL4. 创建数据模型5. 创建 Pydantic 模型6. crud 工具7. main函数learning from 《python web开发从入门到精通》 1. 安装 SQLAlchemy pip install sqlalchemy 2. 创建数据库 mysql -u root -p 命令行登录 M…

oracle 打开 ctl,Oracle 19c 随系统systemctl启动数据库

Oracle 19c 随系统systemctl启动数据库一、 修改oratab文件[rootadg19c ~]# grep woo /etc/oratabwoo:/DBSoft/oracle/product/19.3/dbhome_1:N[rootadg19c ~]# sed -i s/:N/:Y/ /etc/oratab[rootadg19c ~]# grep woo /etc/oratabwoo:/DBSoft/oracle/product/19.3/dbhome_1:Y二…