【样式标签 & 节标签】

最新推荐文章于 2024-06-13 23:29:27 发布

Hey_Coder

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量1.8k

点赞数

分类专栏：【HTML】文章标签：样式标签 html标签 div 节标签 span

本文链接：https://blog.csdn.net/VickyTsai/article/details/89436956

版权

【HTML】专栏收录该内容

26 篇文章 11 订阅

订阅专栏

样式标签和节标签

1. 常用的样式标签 & 节标签
2. HTML 5 中的样式标签 & 节标签
结束语

1. 常用的样式标签 & 节标签

标签名	用于
① `<style>`	定义文档的样式信息。
② `<div>`	定义文档中的块元素的分区。
③ `<span>`	定义文档中的行内元素的分区。

1.1 ★ style 文档的内部样式 ( 搭配 head 标签)

定义文档样式: 如何为 HTML 文档定义样式 ?
- 使用 <style>样式标签
- ① 样式信息: <style>样式元素包含文档的样式信息。
- ② 标签内容: css: 它包含 CSS，该 CSS 应用于包含<style>元素的文档内容。
使用说明
- 限定父元素: <style>样式标签放在什么位置 ?
  - 头部标签 <head>中: 位于<head>头部标签中 (也可以放在<body>主体标签中,但是建议不要这样做)
  - head> style
链接外部样式表: 如何链接外部样式表 ?
- 使用<link>链接标签。
  - head> link
样式层叠问题
- 多个<style>,<link>样式标签和链接标签的样式应用顺序
  - 按顺序应用样式: 如果文档中含有多个<style>,<link>,它们将按照文档中包含的顺序应用于DOM——确保以正确的顺序包含它们，以避免意外的级联问题。
<style>和<link>的区别
- ① 都可以给文档添加样式 css
- ② 内部样式 css: 样式 <style> 标签,添加的内部 css (在文档内部)
- ③ 外部样式 css: 链接 <link> 标签,添加的外部 css (引入外部 css 文件,来给文档添加样式)
样式<style>标签和属性的浏览器支持

1.1.1 style 样式标签的属性

<style>样式标签的可选的属性

属性名	属性值	用于
①`type`	=text/css	内容的媒体类型. 规定样式表内容的 MIME 类型。
②`media`	= screen , tty , tv , projection , handheld , print , braille , aural , all	适用媒体. 规定该样式适用于哪个媒体.默认值为 `all`.
③ `title`	text	指定可选样式表的样式名称。
~~scoped~~	布尔属性	适用范围 , 已废弃 . 当 `<style>`标签,写在其他正文标签的内部时 (比如,`<section>`), 如果该属性存在，则样式应用于其父元素和子元素。；如果不存在，则应用于整个文档。

⑴ type 属性: 标签内容的媒体类型 (可选的,唯一属性值 text/css )

⑴ <style>样式标签的 type类型属性
- ① 样式标签内容的媒体类型: type类型属性指示了 <style> 标签内容的类型。
- ② (媒体类型的) 样式语言: style-type类型属性以 MIME 类型（又称媒体类型 media type ,不应该指定字符集）定义样式语言。
  - 如果该属性未指定，则默认为 text/css。
  - 表示内容是 css: type="text/css"是什么意思 ?
    - 指示<style>样式标签的内容是 CSS。
      - 唯一属性值: 目前，唯一可能的值是 "text/css"。
- 使用说明
  - ① 可选: style-type类型属性是可选的
  - ② 缺失默认值: 如果没有指定，它默认为 text/css——在现代 web 文档中几乎没有必要包含这个属性。

示例1: 指明 <style>样式标签的内容是 CSS

<head>
	<style type="text/css">
		h1 {color: red}
		p {color: blue}
	</style>
</head>

<body>
	<h1>header 1</h1>
	<p>A paragraph.</p>
</body>

⑵ media 属性: 内部样式适用的媒体 (值为媒体查询)

⑵ <style>样式标签的 media 媒体属性
- 内部样式适用的媒体
  - 不同媒体不同样式: 如何为不同的媒介类型规定不同的样式 ?
    - 使用样式标签的 media媒体属性
      - 该属性规定该样式适用于哪个媒体。
    - ① 有选择地应用样式: 根据媒体特性 (如视窗宽度)有选择地将内部样式表应用于文档。
    - ② 应用样式的媒体:
      - style-media媒体属性定义了应用样式的媒体。它的值是一个媒体查询，如果属性缺失，则属性值默认为 all。
- 适用于多个媒体
  - 如何在一个<style> 标签中定义多个媒体类型 ?
    - 逗号分隔: 使用逗号分隔的列表
例如：

<style type="text/css" media="screen,projection">

<style>的 media 适用媒体属性的浏览器支持
- 所有主流浏览器都支持 media 属性的 "screen"、"print" 以及 "all" 值。
- Opera 同时支持 "handheld"值。

<style>样式标签 media适用媒体属性的属性值

属性值	用于
① screen	计算机屏幕（默认值）。
② tty	电传打字机以及使用等宽字符网格的类似媒介。
③ tv	电视类型设备（低分辨率、有限的屏幕翻滚能力）。
④ projection	放映机。
⑤ handheld	手持设备（小屏幕、有限的带宽）。
⑥ print	打印预览模式 / 打印页。
⑦ braille	美 /breil/, 盲人用点字法(盲文)反馈设备。
⑧ aural	语音合成器。
⑨ all	适合所有设备。

tty
- 电传打字机（teletypewriter）,美 /,teli’taip,raitə/
Braille
- [brel]
- 盲人用点字法,盲文

示例1: 针对两种不同媒体类型,设置两种不同的样式（计算机屏幕和打印）：
- 两个 <style>标签
- 采用不同的 media媒体属性值

<html>
	<head>
		<style type="text/css">
			h1 {color:#FF0000;}
			p {color:#0000FF;}
			body {background-color:#FFEFD6;}
		</style>
		
		<style type="text/css" media="print">
			h1 {color:#000000;}
			p {color:#000000;}
			body {background-color:#FFFFFF;}
		</style>
	</head>
	
	<body>
		<h1>Header 1</h1>
		<p>A paragraph.</p>
	</body>
</html>

网页上显示的样式
打印时显示的样式

示例2: 在 <link> , <style> 链接标签和样式标签中的 css 媒体查询
- 圆括号: media的属性值:
  - ① 可以是一个 属性值
  - ② 也可以是另一个属性 (媒体查询属性),这个时候把属性括起来,方便区分属性值的类型.
- 媒体查询
  - ① <link>中
    - 用 media 属性,media="(媒体查询属性)"
  - ② <style>中,
    - 用标签的 media属性
    - 标签内部的 css , 用 css 媒体查询 @media (媒体查询属性){}

<!-- link 元素中的 CSS 媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的 CSS 媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

示例3: 定义两个样式标签, 第二种在指定条件下使用,在视窗宽度小于 500px 时使用

<!doctype html>
<html>
	<head>
	  <style>
	    p {
	      color: white;
	      background-color: blue;
	      padding: 5px;
	      border: 1px solid black;
	    }
	  </style> 
	  <style media="all and (max-width: 500px)">
	    p {
	      color: blue;
	      background-color: yellow;
	    }
	  </style> 
	</head>
	<body>
	  <p>This is my paragraph.</p>
	</body>
</html>

在这里插入图片描述

放大缩小窗口,根据限定的媒体查询, 样式会发生变化.

1.2 ★ div 给文档内容分组 /分区 (组合块级元素)

给分档内容分区(分组): 如何定义文档中的分区或节 ?（division/section）。
- 使用 <div>分区标签
组合块级元素: 如何组合块级元素 ?
- 使用 <div>分区标签
使用说明
- 如何把文档分割为独立的、不同的部分 ?
  - 使用<div> 分区标签
- 容器: 文档内容分区元素 division element (<div>) 是流内容的通用容器。
  - 纯容器: 作为一个“纯”容器，<div>元素本身并不表示任何东西。
- 给文档内容分组:
  - ① 设置样式: 用于对内容进行分组，因此可以轻松地使用类class或 id 属性设置样式
  - ② 设置语言: 将文档的一部分标记为使用不同的语言编写 (使用 lang 属性)。
- 优先级最低的容器:
  - ① 使用前提: 只有在不适合使用其他语义容器元素(如 <article> 或 <nav> )的情况下，才应使用 <div> 元素。
  - ② 无语义容器: 使用标签,应该尽量语义化,有助于浏览器, 作为一个没有语义的容器,<div>的优先级是最低的,低于其他有语义的容器标签.
  - ③ 默认无样式: 它对内容或布局没有影响,没有样式，直到使用 CSS 样式进行设置。
块级元素
- <div> 是一个块级元素吗 ?
  - 是的
- 什么是块级元素 ?
  - ① 独占一行: 块级元素的内容会自动地开始一个新行。
  - ② 元素前后换行: 浏览器会在块级元素的前后放置一个换行符,让 <div> 分区标签的内容,前后会进行换行.
应用样式
- 设置样式: 如何给<div> 分区标签添加样式 ?
  - 通过 <div> 的 class 或 id ,配合 css , 应用额外的样式。
  - 类class属性和 id属性的区别
    - ❶ 类class: 用于 某一类 元素.
    - ❷ id: 用于标识单独的 唯一的 元素。
添加样式的 3 种方式
- ① 行内样式: 使用该标签的 style样式属性
- ② 内部样式: 使用 <style>标签
- ③ 外部样式: 使用 <link> 链接外部样式文件,来添加样式.
<div> 标签和属性的浏览器支持
- 过时属性:
  - align属性已经过时;不要再用它了。
  - 相反，应该使用 CSS 属性或技术，如 CSS Grid或CSS `Flexbox 来对齐和定位页面上的
    元素。

示例1: 一张图片,一段文字,进行样式设计
嵌套关系
- div > img | p

<!doctype html>
<html>
	<head>
	  <style>
	    .warning {
	    border: 10px ridge #f00;/*整个分区div容器的边框 粗细 边框样式 边框颜色*/
	    background-color: #ff0;/*分区div的背景颜色*/
	    padding: .5rem;/*分区div的内边距*/
	    display: flex;/*显示方式 伸缩*/
	    flex-direction: column;/*伸缩方向 列,横向*/
	}
	
		.warning img {
		    width: 100%;/*图片宽度*/
		}
		
		.warning p {
		    font: small-caps bold 1.4rem sans-serif;/*段落的字体 粗细*/
		    text-align: center;/*段落文本的水平对齐 */
		}
		
	  </style> 
	 
	</head>
	<body>
		<div class="warning">
		    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/leopard.jpg"
		         alt="An intimidating leopard.">
		    <p>Beware of the leopard</p>
		</div>
	</body>
</html>

在这里插入图片描述

容器和样式设置: 把一张图片,一个段落,包含在一个分区中,进行样式设置

示例2: 给上方的图片和文字,设置一个阴影框

 .warning {
    width: 15em;
    border: 1px solid #333;
    box-shadow: 8px 8px 5px #444;/*阴影的左右偏移量 上下偏移量 模糊距离 颜色*/
    padding: 8px 12px;
    background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);/*分区容器 设置一个渐变的背景色*/

}

在这里插入图片描述

1.3 ★ span 组合行内元素 (行内容器)

组合行内元素: 如何组合文档中的行内元素 ?
- 分组和设置样式: 使用<span>行内分区标签,为了给行内元素设置样式,而对元素和元素内容进行分组
使用说明
- ① 使用前提: 无其他替代的语义元素时才选择, 和<div>一样,只有当没有其他合适的语义元素时才应该使用它。
- ② 无语义的容器标签: <span> 也是无语义的容器标签.
  - 行内容器: 是短语内容的通用行内容器，并没有任何特殊语义。
- ③ 给行内元素设置样式: 如何对 <span>行内分区标签应用样式 ?
  - 给 <span> 行内分区标签应用id 或 class 属性
- ④ 默认样式
  - <span>行内分区标签,没有特别的样式,当使用 CSS 进行设置时,才会有样式
<div>分区标签和<span>行内分区标签的区别
- ① 无语义容器标签: 都是没有语义的容器标签
- ② 默认无样式: 都是默认没有样式的 (设置 CSS 才有样式)
- ③ 分组对象不同
  - 块级元素: <div>分区标签是对块级元素进行分组( block-level element)
  - 内联(行内) 元素: <span>行内分区标签是对内联元素进行分组( inline element)。
- ④ <div> 是一个块元素, 而 <span> 则是行内元素 .
  - block-level element, inline element.

示例1: 把制作过程中需要的材料相关的文字,用红色,加粗的字体,突出显示
- 给文字内容,添加相同的类,应用相同的样式.

<!doctype html>
<html>
	<head>
	  <style>
			span.ingredient {
			    color: #f00;/*字体颜色*/
			    font-weight:bold;/*字体粗细*/
			}
	  </style> 
	 
	</head>
	<body>
		<p>Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span> to a blender and blend into a paste.</p>
		
		<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>
	</body>
</html>

在这里插入图片描述

2. HTML 5 中的样式标签 & 节标签

标签名	用于
① `<header>`	定义文档或分区(文档的一部分区域) 的页眉。
② `<footer>`	定义文档或分区的页脚。
③ `<section>`	主题性分区(节). 定义文档中的节，一般是具有主题性的 (带有标题标签 `h1~h6`)。比`div`的分区,有更进一步的语义.
④ `<article>`	定义 (可分离) 完整独立的主题性内容 (搭配 `header,h1~h6,footer`标签),例如,一篇博客,博客中的一条评论.
⑤ `<aside>`	定义侧栏 (页面间接相关内容)。
⑥ `<details>`	定义元素的细节。
⑦ `<dialog>`	定义对话框或窗口。
⑧ `<summary>`	为细节`<details>`元素定义可见的摘要/标签。

2.1 ★ header 文档 / 分区的页眉（介绍性信息,搭配 h1~h6 标签）

文档的页眉: 如何定义文档或者文档的分区(一部分区域)的页眉（介绍信息） ?
- 使用 <header>页眉标签
  - 页眉: 是文档中每个页面的顶部区域。常用于显示文档的 附加信息，可以包括标题, logo、搜索表单、作者名等。
- 使用说明
  - ① 介绍性内容和辅助导航: HTML <header>头部元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。
  - ② 容器:介绍内容或者导航链接栏的容器。
    - 标题容器:
      - <header> 元素不是分段内容，因此不会往大纲中引入新的段落。
      - 通常用于包含周围部分的标题（h1 ~ h6元素），但这不是必需的。
    - 也包含 logo、搜索表单、作者名 等其他元素。
  - ③ 可以多个: 在一个文档中，可以定义多个 <header> 元素。
<header>页眉标签的父元素:
- 任何接受 flow content 的元素。
- 禁止的父元素:<header> ,不能是 <address>、<footer> 或另一个 <header>元素的子元素。(为什么呢 ?)
<header>页眉标签的浏览器支持
- IE 8 以及更早的版本不支持 <header> 标签。

示例1: 文章的页眉信息

<article>
	<header>
		<h1>What Does WWF Do?</h1>
		<p>WWF's mission:</p>
	</header>
	<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>

在这里插入图片描述

示例2: 主页的页眉信息
- 标题和 logo : 放在<header>中

<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>

2.2 ★ footer 文档 / 分区的页脚 (可能搭配 address 标签)

定义页脚: 如何定义文档或者文档的分区 (一部分区域) 的页脚 ?
- 使用 <footer>页脚标签
页脚包含的信息 : 有关该节的作者、版权数据或相关文档的链接的信息。
- ① 作者
- ② 版权
- ③ 使用条款链接
- ④ 相关文档链接
- ⑤ 联系信息 (搭配 <address> 标签)等。
使用说明
- ① 联系信息: (搭配 <address> 标签)
  - <footer>元素内的联系信息应该位于
  - 限定子元素: <address>地址标签中。
- ② 可以多个: 可以在一个文档中使用多个 <footer>页脚元素吗 ?
  - 可以
- ③ <footer>页脚标签的父元素
  - 任何接收流内容的元素。
  - 禁止父元素: 注意<footer>页脚元素的父元素,不能是 <address>, <header> 或者另一个 <footer>
<footer> 页脚标签的浏览器支持
- IE 8 以及更早的版本不支持 <footer> 标签

示例1: 文档中的页脚部分

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

在这里插入图片描述

示例2: 页脚中,显示版权, 作者和时间

<!doctype html>
<html>
	<head>
	  <style>
		article {
		    min-height: 100%;
		    display: grid;
		    grid-template-rows: auto 1fr auto;
		}
		
		footer {
		    display: flex;/*显示方式 弹性*/
		    justify-content: center;/*居中显示*/
		    padding: 2px;/*页脚部分的内边距*/
		    background-color: #45a1ff;/*页脚的背景颜色*/
		    color: #fff;/*页脚部分的字体颜色*/
		}
	  </style> 
	 
	</head>
	<body>
		<article>
		    <h1>How to be a wizard</h1>
			
			<!-- 有序列表,显示3个步骤 -->
		    <ol>
		        <li>Grow a long, majestic beard.</li>
		        <li>Wear a tall, pointed hat.</li>
		        <li>Have I mentioned the beard?</li>
		    </ol>
			
			<!-- 页脚,显示版权信息 时间和作者-->
		    <footer>
		        <p>© 2018 Gandalf</p>
		    </footer>
		</article>
	</body>
</html>

在这里插入图片描述

嵌套关系: footer > p

2.3 ★ section 文档中的主题性分区/节(搭配 header ,h1~h6 标签)

主题性分区
- 如何定义文档中的节（section、区段） ?
  - 使用 <section>主题性分区标签
- 使用说明
  - 独立的部分: <section>区段标签表示一个独立的部分——该部分没有更具体的语义元素来表示它。
    - △主题性分区(节). 定义文档中的节，一般是具有主题性的 (带有标题标签 h1~h6,通常放在页眉header中,header > h1~h6)。比div的分区,有更进一步的语义.
      - <section>区段一般有标题:
        通常，但并非总是，<section>节(区段) 都有标题。
  - 没有其他语义元素来表示: 例如，导航菜单应该包装在<nav>导航元素中,但是搜索结果列表、地图显示及其控件没有特定的元素，可以放在<section>区段标签中。
使用提醒
- 使用选择: 如果元素的内容主题性内容,而且可以作为完整单独的部分，那么<article>文章元素可能是更好的选择(就像文章的一稿多投)
- 不作为普通容器: 不要把 <section>元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。
使用场合:
- ① 文章的章节
- ② 标签对话框中的标签页
- ③ 论文中有编号的部分等。
- (都是很有主题性的分区(节))
△ 点击查看【div,section,article 标签的使用区别】
section 标签的浏览器支持
- IE 9 才开始支持,之前的版本不支持.

<section>区段标签的 cite引用属性

属性名	属性值	用于
cite	URL	主题性内容的 URL，假如主题性分区内容是摘自 web 的话,可以附上相关链接。

示例1: 文档中的主题性区段，主要解释了 PRC的含义：

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

在这里插入图片描述

示例2: 两个部分,两个区段,每个部分,有一个标题

<section>
    <h1>Introduction</h1>
    <p>People have been catching fish for food since before recorded history…</p>
</section>

<section>
    <h1>Equipment</h1>
    <p>The first thing you’ll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you’re expecting to land…</p>
</section>

在这里插入图片描述

2.4 ★ article (可分离) 完整独立的主题性内容 (搭配 header,h1~h6,footer 标签)

可分离的完整独立的主题性内容
- 定义：独立的自包含内容。
- 页眉(含标题) 和页脚: 一般来说，article会有标题部分( 包含在页眉 header内,header > h1~h6 )，有时也会包含页脚footer。
使用场合：一段内容脱离了所在的语境，仍是完整的、独立的，则应该用 article 标签。
完整独立 + 独自被引用:
- article 元素代表( 文档、页面或应用程序中) 独立的、完整的、可以独自 被外部引用的内容。它可以是:
  - 一篇博客
  - 报刊中的文章
  - 一篇论坛帖子
  - 一段用户评论
  - 独立的插件
  - 其他任何独立的内容。
使用说明
- 自嵌套使用: 当<article>文章元素嵌套使用时，则该元素代表与外层元素有关的独立内容。
  - 例如，博客和博客下的评论, 都可以使用 article 标签来表示.
- 作者信息: <article>元素的作者信息可通过<address>元素提供，但<article>元素不能成为<address>元素的子元素。
- 发布日期和时间: <article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。
article 标签的浏览器支持
- IE 9 才开始支持,之前版本不支持.
示例1: 1个术语解释文章

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>

在这里插入图片描述

示例2: 一部电影的用户评论,评论的评论
css

    .review{
        font-weight: bold;
        font-size: 1.2em;
    }

    .review-time{
        font-style: italic;
        color: grey;
    }

html


<!-- 用户的评论，评论的评论 -->
    <article class="film_review">
        <header>
            <h2>Jurassic Park 侏罗纪公园</h2>
        </header>

        <section class="main_review">
            <p class="review">恐龙太逼真了~</p>
        </section>

        <section class="user_reviews" style="margin-left: 10px">
            <article class="user_review">
                <p class="review">真的很吓人!</p>
                <footer>
                    <p class="review-time">
                        Posted on
                        <time datetime="2015-05-16 19:00">May 16</time>
                        by 小明同学.
                    </p>
                </footer>
            </article>

            <article class="user_review">
                <p class="review">确实,四部我都看了.</p>
                <footer>
                    <p class="review-time">
                        Posted on
                        <time datetime="2015-05-17 19:00">May 17</time>
                        by 叫我杠精.
                    </p>
                </footer>
            </article>
        </section>

        <footer>
            <p class="review-time">
                Posted on
                <time datetime="2015-05-15 19:00">May 15</time>
                by 爱看剧的崽子.
            </p>
        </footer>
    </article>

在这里插入图片描述

嵌套关系
<article>: article > header | section*2 | footer
- ① <header>
  - <h2>
- ② <section>主评论区
  - <p>
- ③ <section>评论的评论区
  - <article> *2 两条评论的评论
    - <p>
    - <footer>: footer > p > time 评论的发表者和时间
      - <p>
        <time>
- ④ <footer> 评论的发表者和时间
  - <p>
    - <time>

示例3: 天气预报
嵌套关系
- article > h1 | article*3

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

.forecast {
    margin: 0;
    padding: .3rem;
    background-color: #eee;
    font: 1rem 'Fira Sans', sans-serif;
}

.forecast > h1,
.day-forecast {
    margin: .5rem;
    padding: .3rem;
    font-size: 1.2rem;
}

.day-forecast {
    background: right/contain content-box border-box no-repeat
        url('/media/examples/rain.svg') white;
}

.day-forecast > h2,
.day-forecast > p {
    margin: .2rem;
    font-size: 1rem;
}

在这里插入图片描述

西雅图的天气预报: 整体一个 article
西雅图的每天的天气预报: 各一个 article
脱离语境,都是完整独立的内容.
带标题: 每个<article>，通常包括标题（<h1> - <h6>元素）作为<article>元素的子元素。
内容相关: 当<article>元素自嵌套使用时，则表示该元素是与外层元素有关的完整独立的内容。

知识拓展
- △ 点击查看【div,section,article 标签的使用区别】
- ⑴ 语义: div section article ，语义是从无到有，逐渐增强的。
- ⑵ 作用:
  - 样式化和脚本化: div 无任何语义，仅仅用作样式化或者脚本化；
  - 主题性内容: 对于一段主题性的内容，则就适用 section；
  - 完整独立的主题性内容: 假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容，则就适用 article。

2.5 ★ aside 侧栏内容 (间接相关内容,附属信息)

侧栏内容 (间接相关内容): 如何定义其所处内容之外的内容 ?
- 使用<aside> 侧栏标签
- 间接相关:<aside>侧边栏元素表示文档的一部分，其内容仅与文档的主要内容间接相关。
- 显示: <aside>的旁白通常以侧边栏或标注框的形式呈现。
使用说明
- <aside>侧栏标签的内容有什么要求 ?
  - ① 间接相关: 要与附近的 内容相关。
  - ② 不能用于圆括号的文本: 不要使用<aside>元素来标记圆括号化的文本，因为这种圆括号内的文本被认为是主流的一部分。
常用说明
- ① article的附属信息:
  - 在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前内容有关的 ❶ 相关的资料、❷ 名词解释 等.
- ② 整个文档的附属信息:
  - 在article元素之外使用 , 作为页面或站点整体的附属信息部分。
  - 侧边栏: 最典型的是侧边栏，其中的内容可以是 ❶ 友情链接, 博客中的 ❷ 其他的文章列表、❸ 广告等。
aside 标签的浏览器支持
- IE 9才开始支持,之前的版本不支持 <aside> 标签。

示例1: 侧边栏显示间接相关的内容

<!DOCTYPE html>
<html>

<head>
    <style>
    	body{
    		width: 600px;
    	}

	    aside {
	        width: 40%;
	        /*侧边栏的宽度 占比*/
	        padding-left: .5rem;
	        margin-left: .5rem;
	        float: right;
	        box-shadow: inset 5px 0 5px -5px #000;
	        /*侧边栏的阴影*/
	        font-style: italic;
	        /*侧边栏的字体样式*/
	        color: #229;
	    }
	    aside > p {
	        margin: .5rem;
	    }
	    p {
	        font-family: 'Fira Sans', sans-serif;
	    }
    </style>
</head>

<body>

    <p>蝾螈是一种 外形像蜥蜴的 两栖动物，包括 幼体和成体的短腿和尾巴。</p>

    <aside>
        <p>皮肤粗糙的蝾螈 用一种致命的神经毒素 来保护自己。</p>
    </aside>

    <p>几种蝾螈 生活在太平洋西北部的温带雨林中，包括 恩萨提纳蝾螈、西北蝾螈和皮肤粗糙的蝾螈。大多数蝾螈 都是夜行性动物，捕食昆虫、蠕虫和其他小动物。</p>

</body>

</html>

在这里插入图片描述

利用浮动,把侧边栏显示在右边: float: right;

知识拓展
- rem单位:（font size of the root element）是指相对于 根元素的字体大小 的单位。是一个相对单位。
  - 计算: 根元素font-size = 10px >>> 1rem =10px
  - 成比例调整 (所有字体大小): 可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
  - rem单位的浏览器支持: 目前，除了IE8及更早版本外，所有浏览器均已支持rem。
- em单位: （font size of the element）是指相对于 父元素的字体大小 的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素, 一个是依赖父元素计算。

2.6 ★ details 描述细节

<details> 细节标签的浏览器支持
- Edge 和 IE 浏览器都不支持 <details> 标签。
文档详细信息(细节):
- 如何描述文档或文档某个部分的细节 (详细信息)?
  - <details> 细节标签
  - 开关切换: 创建一个公开小部件，其中信息只有在小部件切换到 “打开”状态时才可见。
  - 细节的摘要或标签: 可以使用摘要<summary>元素提供摘要或标签。
- 显示
  - 细节摘要可见: summary 标签的内容作为摘要是默认可见的
  - 显示细节的方式: 一个<details>小部件可以处于两种状态之一。
    - ① 默认的关闭状态(不可见):
      - 只显示<summary>中的三角形和摘要/标签 (如果没有<summary>，则显示用户代理定义的默认字符串)。
        默认情况下，关闭时小部件的高度仅够显示三角形和摘要。
        打开时，它会展开以显示其中包含的详细信息。
      - 默认情况下, 何时会显示出 <details>细节标签的内容 ?
        点击时: 用户点击<summary> 摘要标签时.
    - ② 默认打开状态(可见)
      - 使用 details-open="open"

2.6.1 details 细节标签的属性

⑴ open 属性: 默认细节显示可见 (布尔属性)

<details>细节标签的open打开属性
- 默认显示可见(打开状态): 如何把<details>细节标签的内容,设置为是否是打开的 , 可见的 ?(不需要点击标题就显示)
  - 使用 open 打开属性
  - 这个details-open布尔属性指示细节(即元素的内容) 当前是否可见。
    - 缺省值false: 表示细节不可见。
<details>的open打开显示的属性值
- open="open"

示例1: 关于文档的细节：

<details>
	<summary>Copyright 2011.</summary>
	<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

示例2: 默认可见的详细信息：

<details open="open">
	<summary>Copyright 2011.</summary>
	<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

在这里插入图片描述

示例3: 设置了样式的细节内容和细节摘要

<!DOCTYPE html>
<html>
	<head>
		<style>
			details {
			    border: 1px solid #aaa;/*设置 边框粗细 样式 颜色*/
			    border-radius: 5px;/*设置成圆角边框*/
			    padding: .5em .5em 0;/*设置内边距*/
			}
			summary {
			    font-weight: bold;/*细节标题的 字体粗细*/
			    margin: -.5em -.5em 0;
			    padding: .5em;
			}
			
			details[open] {
			    padding: .5em;
			}
			
			details[open] summary {
			    border-bottom: 1px solid #aaa;/*打开后 细节标题的下边框*/
			    margin-bottom: .5em;
			}
			</style>
	</head>
	<body>
		<details>
		    <summary>Some Details</summary>
		    Something small enough to escape casual notice.
		</details>
	
	</body>
</html>

在这里插入图片描述

没设置样式的和设置了 CSS样式的
嵌套关系
details > summary
- <details>
  - <summary>
显示按钮: 三角形
- 打开和关闭: 三角形的常见用法是旋转或扭转来表示小部件的打开或关闭
细节标题默认值: 如果没有定义细节标题<summary>,会默认显示浏览器默认的
- 360 和谷歌浏览器中显示为 “详细信息”.

示例4: 自定义外观
css

    details{
    	width: 550px;

    }

    details > summary{
    	background-color: #ddd;
    	box-shadow: 3px 3px 4px black;
    	padding: 5px;
    	margin: 0;
    }

    details > p{
    	background-color: #ddd;
    	border-radius: 0 0 10px 10px;
    	padding: 5px;
    	margin: 10px 0;
    	box-shadow: 3px 3px 4px black;
    }

html

    <!-- 细节信息 -->
    <details>
        <summary>Sublime Text 3 </summary>
        <p>Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器，方便的配色以及兼容vim快捷键等各种优点,它可跨平台支持 Windows/Mac/Linux；支持 32 与 64 位操作系统，它在支持语法高亮、代码补全、代码片段（Snippet）、代码折叠、行号显示、自定义皮肤、配色方案等 所有其它代码编辑器 所拥有的功能的同时，又保证了 其飞快的速度！</p>
    </details>

在这里插入图片描述

细节内容的展开方式
- 点击三角按钮
- 点击 summary的标签内容

2.6.2 details 支持的事件: 切换 toggle 事件

切换 toggle事件:
- 除了元素支持的常见事件之外，<details>元素还支持切换`toggle 事件
- 分派时机: 每当<details>元素的状态在打开和关闭之间发生变化时，该事件就会被分派到<details>元素。
- 发送时机: 它是在状态更改之后发送的，但是如果在浏览器可以调度事件之前状态更改了多次，则将事件合并在一起，以便只发送一个事件。

示例1: 可以监听切换toggle事件，以检测小部件何时更改状态:

details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

2.7 ★ summary 细节的摘要/标签 (搭配 details 标签)

细节的摘要/标签
- 如何描述细节details 元素的摘要或标签 (summary or label ) ?
  - 使用<summary>摘要标签
细节信息: 如何描述有关文档或文档片段的详细信息 ?
- 使用 <details>细节标签
限定父元素
- <summary>摘要标签,与 <details>细节标签一起使用,作为它的子元素。
  - details > summary
- 默认可见: 摘要/标签是可见的
- 点击可见: 当用户点击摘要时会显示出详细信息。
  - 切换状态单击<summary>元素切换父元素<details>元素的状态，打开和关闭。
限定位置:
- <summary> 摘要标签只能用作 <details>细节标签的第一个子元素.
<summary>元素的内容 :
- 可以是任何可以在段落中使用的标题内容、纯文本或HTML。
<summary> 细节摘要的默认样式
- 根据 HTML 规范，<summary>元素的默认样式包括display: list-item。
- 默认三角形: 这使得更改或删除标签旁边显示为开关小部件的图标成为可能，通常是一个三角形。
- 删除开关三角形: 可以将样式更改为 display: block以删除三角形。
summary 细节摘要的浏览器支持
- Edge 和 IE 不支持细节摘要summary 标签.
- 细节摘要的属性 display:item 支持度也很差.

2.8 ★ dialog 对话框或窗口内容

<dialog>对话框标签的浏览器支持
- 目前只有 Chrome 和 Safari 6 支持 <dialog> 标签。
- 360 也支持,支持的浏览器比较少,不要使用
对话框 / 交互式组件:
- 如何定义对话框或窗口 ?
  - 使用<dialog>对话框标签
  - 对话框 / 交互式组件: <dialog> 元素表示一个对话框或其他交互式组件，例如一个检查器或者窗口。
<dialog>对话框标签的 open打开属性
- open="open"
- ① 对话框(交互组件) 可见: 指示这个对话框是激活的和能互动的。
  - 当这个 open 特性没有被设置，对话框不显示给用户。
  - 不设置open属性,对话框用户就不可见.设置了才能看见.
- ② 用户交互: 规定 dialog 元素是活动的，可见了, 用户就能与之交互。
<dialog>对话框标签的属性
- 包含了全局属性。但是 tabindex 特性不能被使用在 dialog 元素上。
- tabindex: 整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与 顺序键盘导航，如果是，则表示哪个位置。

示例1: 使用 <dialog>对话框元素：

<table border="1">
<tr>
  <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
  <th>二月</th>
  <th>三月</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

在这里插入图片描述

示例2: 在单击“更新详细信息”"Update details"按钮时打开一个包含表单的弹出对话框。
html
- 嵌套关系
- body > ( dialog | menu | output)
  - ① dialog > ( form > p | menu )
    - ❶ p > label > select > option*4 三个选择项
    - ❷ menu > button*2 取消确认
  - ② menu > button 更新信息按钮
  - ③ output 输出文本

    <!-- Simple pop-up dialog box containing a form -->
    <dialog id="favDialog">
        <form method="dialog">
            <p>
                <label>Favorite animal:
                    <select>
                        <option></option>
                        <option>Brine shrimp</option>
                        <option>Red panda</option>
                        <option>Spider monkey</option>
                    </select>
                </label>
            </p>
            <menu>
                <button value="cancel">Cancel</button>
                <button id="confirmBtn" value="default">Confirm</button>
            </menu>
        </form>
    </dialog>

    <menu>
        <button id="updateDetails">Update details</button>
    </menu>

    <output aria-live="polite"></output>

(function() {
  var updateButton = document.getElementById('updateDetails');
  var favDialog = document.getElementById('favDialog');
  var outputBox = document.getElementsByTagName('output')[0];
  var selectEl = document.getElementsByTagName('select')[0];
  var confirmBtn = document.getElementById('confirmBtn');

  // “Update details” button opens the <dialog> modally
  updateButton.addEventListener('click', function onOpen() {
    if (typeof favDialog.showModal === "function") {
      favDialog.showModal();
    } else {
      alert("The dialog API is not supported by this browser");
    }
  });
  // "Favorite animal" input sets the value of the submit button
  selectEl.addEventListener('change', function onSelect(e) {
    confirmBtn.value = selectEl.value;
  });
  // "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
  favDialog.addEventListener('close', function onClose() {
    outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
  });
})();