前端学习笔记之——文档分节

最新推荐文章于 2024-05-02 17:12:45 发布
最新推荐文章于 2024-05-02 17:12:45 发布
阅读量107 收藏
点赞数
分类专栏： 前端 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36879493/article/details/117950752
版权

文档分节

1、添加基本的标题

h1 元素表示标题。HTML 定义了一套标题元素体系，从 h1 一直到 h6，h1 级别最高。

元素h1~h6
元素类型流
允许具备的父元素hgroup 元素或其他任何可以包含流元素的元素。这些元素不能说 address 元素的后代元素
局部属性无
内容流内容
标签用法开始标签和结束标签
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        
        I like apples and oranges.

        I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
        You can see other fruits I like <a href="fruitlist.html">here</a>.
        
        <strong>Warning:</strong> Eating too many oranges can give you heart burn.
        
        My favorite kind of orange is the mandarin, properly known 
            as <i>citrus reticulata</i>.
        Oranges at my local store cost <s>$1 each</s> $2 for 3.        
            
        The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
            citrus industry.
            
        I still remember the best apple I ever tasted.
        I bought it at <time datetime="15:00">3 o'clock</time>
            on <time datetime="1984-12-7">December 7th</time>. 
    </body>
</html>

2、hgroup 元素

hgroup 元素可用来将几个标题元素作为一个整体处理，以免搅乱 HTML 文档的大纲。

元素hgroup
元素类型流
允许具备的父元素任何可以包含流元素的元素
局部属性无
内容一个或多个标题元素（h1~h6）
标签用法开始标签和结束标签
习惯样式hgroup { display: block; }

hgroup 主要用来解决子标题的问题。假设文档中有一段内容，其标题为 “Fruits I Like”，还有一个子标题 “How I Learned to Love Citrus”。为此需要用到 h1 到 h2 元素。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
            <h1>Fruits I Like</h1>
            <h2>How I Learned to Love Citrus</h2>
            I like apples and oranges.
            <h2>Additional fruits</h2>
            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
            <h3>More information</h3>
            You can see other fruits I like <a href="fruitlist.html">here</a>.
            
            <h1>Activities I Like</h1>
            <p>I like to swim, cycle and run. I am in training for my first triathlon,
            but it is hard work.</p>
            <h2>Kinds of Triathlon</h2>
            There are different kinds of triathlon - sprint, Olympic and so on.
            <h3>The kind of triathlon I am aiming for</h3>
            I am aiming for Olympic, which consists of the following:
            <ol>
                <li>1.5km swim</li>
                <li>40km cycle</li>
                <li>10km run</li>
            </ol>
    </body>
</html>

这里遇到的问题是无法区分表示子标题的 h2 元素和表示下一级标题的 h2 元素。类似于如下的大纲：

Fruits I Like
	How I Learned to Love Citrus
	Additional fruits
		More information
Activities I Like
	Kinds of Triathlon
		The kind of triathlon I am aiming for

使用 hgroup：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3 { background: grey; color: white; }
        
            hgroup > h1 { margin-bottom: 0px;}
        
            hgroup > h2 { background: grey; color: white; font-size: 1em; 
                          margin-top: 0px; }
        </style>
    </head>
    <body>
            <hgroup>
                <h1>Fruits I Like</h1>
                <h2>How I Learned to Love Citrus</h2>
            </hgroup>
            I like apples and oranges.
            <h2>Additional fruits</h2>
            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
            <h3>More information</h3>
            You can see other fruits I like <a href="fruitlist.html">here</a>.
            
            <h1>Activities I like</h1>
            <p>I like to swim, cycle and run. I am in training for my first triathlon,
            but it is hard work.</p>
            <h2>Kinds of Triathlon</h2>
            There are different kinds of triathlon - sprint, Olympic and so on.
            <h3>The kind of triathlon I am aiming for</h3>
            I am aiming for Olympic, which consists of the following:
            <ol>
                <li>1.5km swim</li>
                <li>40km cycle</li>
                <li>10km run</li>
            </ol>
    </body>
</html>

大纲如下：

Fruits I Like
	Additional fruits
		More information
Activities I Like
	Kinds of Triathlon
		The kind of triathlon I am aiming for

3、生成节

section 是 HTML5 中新增的。它表示的是文档中的一节。使用标题元素的时候实际上也生成了隐含的节。用 section 元素则可以明确地生成节并且将其与标题分开。section 元素用来包含的是那种应该列入文档大纲或目录中的内容。section 元素通常包含一个或多个段落及一个标题，不过标题并不是必须的。

元素section
元素类型流
允许具有的父元素任何可以包含流元素的元素，但 section 元素不能是 address 元素的后代元素
局部属性无
内容style 元素和流元素
标签用法开始标签和结束标签
习惯样式section { display: block; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3 { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0px; }
            hgroup > h2 { background: grey; color: white; font-size: 1em; 
                         margin-top: 0px;}
        </style>
    </head>
    <body>
        <section>
            <hgroup>
                <h1>Fruits I Like</h1>
                <h2>How I Learned to Love Citrus</h2>
            </hgroup>
            I like apples and oranges.
            <section>
                <h1>Additional fruits</h1>
                I also like bananas, mangoes, cherries, apricots, plums,
                peaches and grapes.
                <section>            
                    <h1>More information</h1>
                    You can see other fruits I like <a href="fruitlist.html">here</a>.
                </section>
            </section>
        </section>

        <h1>Activities I like</h1>
        <p>I like to swim, cycle and run. I am in training for my first triathlon,
                    but it is hard work.</p>
        <h2>Kinds of Triathlon</h2>
        There are different kinds of triathlon - sprint, Olympic and so on.
        <h3>The kind of triathlon I am aiming for</h3>
        I am aiming for Olympic, which consists of the following:
        <ol>
            <li>1.5km swim</li>
            <li>40km cycle</li>
            <li>10km run</li>
        </ol>
    </body>
</html>

4、添加首部和尾部

header 元素表示一节的首部。里边可以包含各种适合出现在首部的东西，包括刊头或徽标。在内嵌的元素方面，header 元素通常包含一个标题元素或一个 hgroup 元素，还可以包含该节的导航元素。

元素header
元素类型流
允许具备的父元素任何可以包含流元素的元素。header 元素不能是 address、footer 元素和其他 header 元素的后代元素
局部属性无
内容流内容
标签用法开始标签和结束标签
习惯样式header { display: block; }

footer 元素是 header 元素的配套元素，表示一节的尾部。footer 通常包含着该节的总结信息，还可以包含作者介绍、版权信息、到相关内容的连接、徽标及免责声明等。

元素footer
元素类型流
允许具备的父元素任何可以包含流元素的元素。footer 元素不能是 address、footer 元素和其他 header 元素的后代元素
局部属性无
内容流内容
标签用法开始标签和结束标签
习惯样式footer { display: block; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3 { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0; margin-top: 0}
            hgroup > h2 { background: grey; color: white; font-size: 1em;
                        margin-top: 0px; margin-bottom: 2px}
                        
            body > header  *, footer > * { background:transparent; color:black;}
            body > section, body > section > section,
            body > section > section > section {margin-left: 10px;}
            
            body > header, body > footer {
                border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
            }
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>Things I like</h1>
                <h2>by Adam Freeman</h2>
            </hgroup>
        </header>
        <section>
            <header>
                <hgroup>
                    <h1>Fruits I Like</h1>
                    <h2>How I Learned to Love Citrus</h2>
                </hgroup>
            </header>
            I like apples and oranges.
            <section>
                <h1>Additional fruits</h1>
                I also like bananas, mangoes, cherries, apricots, plums,
                peaches and grapes.
                <section>            
                    <h1>More information</h1>
                    You can see other fruits I like <a href="fruitlist.html">here</a>.
                </section>
            </section>
        </section>
        
        <section>
            <header>
                <h1>Activities I like</h1>
            </header>
            <section>
                <p>I like to swim, cycle and run. I am in training for my first
                triathlon, but it is hard work.</p>
                <h1>Kinds of Triathlon</h1>
                There are different kinds of triathlon - sprint, Olympic and so on.
                <section>
                    <h1>The kind of triathlon I am aiming for</h1>
                    I am aiming for Olympic, which consists of the following:
                    <ol>
                        <li>1.5km swim</li>
                        <li>40km cycle</li>
                        <li>10km run</li>
                    </ol>
                </section>
            </section>
        </section>
        <footer id="mainFooter">
            &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
        </footer>
    </body>
</html>

5、添加导航区域

nav 元素表示文档中的一个区域，它包含着到其他页面或同一页面的其他部分的链接。该元素的目的是规划出文档的主要导航区域。

元素nav
元素类型流
允许具备的父元素任何可以包含流元素的元素。但是该元素不能是 address 元素的后代元素
局部属性无
内容流内容
标签用法开始标签和结束标签
习惯样式nav { display: block; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3 { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0; margin-top: 0}
            hgroup > h2 { background: grey; color: white; font-size: 1em;
                        margin-top: 0px; margin-bottom: 2px}
                        
            body > header  *, body > footer * { background:transparent; color:black;}
            body > section, body > section > section,
            body > section > section > section {margin-left: 10px;}
            
            body > header, body > footer {
                border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
            }
            
            body > nav { text-align: center; padding: 2px; border : dashed thin black;}
            body > nav > a {padding: 2px; color: black}
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>Things I like</h1>
                <h2>by Adam Freeman</h2>
            </hgroup>
            <nav>
                <h1>Contents</h1>
                <ul>
                    <li><a href="#fruitsilike">Fruits I Like</a></li>
                    <ul>
                        <li><a href="#morefruit">Additional Fruits</a></li>
                    </ul>
                    <li><a href="#activitiesilike">Activities I Like</a></li>
                    <ul>
                        <li><a href="#tritypes">Kinds of Triathlon</a></li>
                        <li><a href="#mytri">The kind of triathlon I am
                            aiming for</a></li>
                    </ul>
                </ul>
            </nav>
        </header>
        <section>
            <header>
                <hgroup>
                    <h1 id="fruitsilike">Fruits I Like</h1>
                    <h2>How I Learned to Love Citrus</h2>
                </hgroup>
            </header>
            I like apples and oranges.
            <section>
                <h1 id="morefruit">Additional fruits</h1>
                I also like bananas, mangoes, cherries, apricots, plums,
                peaches and grapes.
                <section>            
                    <h1>More information</h1>
                    You can see other fruits I like <a href="fruitlist.html">here</a>.
                </section>
            </section>
        </section>
        
        <section>
            <header>
                <h1 id="activitiesilike">Activities I like</h1>
            </header>
            <section>
                <p>I like to swim, cycle and run. I am in training for my first
                triathlon, but it is hard work.</p>
                <h1 id="tritypes">Kinds of Triathlon</h1>
                There are different kinds of triathlon - sprint, Olympic and so on.
                <section>
                    <h1 id="mytri">The kind of triathlon I am aiming for</h1>
                    I am aiming for Olympic, which consists of the following:
                    <ol>
                        <li>1.5km swim</li>
                        <li>40km cycle</li>
                        <li>10km run</li>
                    </ol>
                </section>
            </section>
        </section>
        <nav>
            More Information:
            <a href="http://fruit.org">Learn More About Fruit</a>
            <a href="http://triathlon.org">Learn More About Triathlons</a>
        </nav>
        <footer id="mainFooter">
            &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
        </footer>
    </body>
</html>

6、使用 article

article 元素代表 HTML 文档中一段独立成篇的内容，从理论上讲，可以独立于页面其余内容发布或使用（例如通过 RSS）。这不是说作者必须单独发布它，而是说判断是否使用该元素时要以独立性为依据。一篇新文章和博文条目都是这方面的典型例子。

元素article
元素类型流
允许具备的父元素任何可以包含的流元素的元素，但该元素不能是 address 元素的后代元素
局部属性无
内容style 元素和流内容
标签用法开始标签和结束标签
习惯样式article { display: block; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3, article > footer { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0; margin-top: 0}
            hgroup > h2 { background: grey; color: white; font-size: 1em;
                        margin-top: 0px; margin-bottom: 2px}
                        
            body > header  *, body > footer * { background:transparent; color:black;}
            
            article {border: thin black solid; padding: 10px; margin-bottom: 5px}
            article > footer {padding:5px; margin: 5px; text-align: center}
            article > footer > nav > a {color: white}
            
            body > article > section,
            body > article > section > section {margin-left: 10px;}
            
            body > header, body > footer {
                border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
            }
            body > nav { text-align: center; padding: 2px; border : dashed thin black;}
            body > nav > a {padding: 2px; color: black}
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>Things I like</h1>
                <h2>by Adam Freeman</h2>
            </hgroup>
            <nav>
                <h1>Contents</h1>
                <ul>
                    <li><a href="#fruitsilike">Fruits I Like</a></li>
                    <li><a href="#activitiesilike">Activities I Like</a></li>
                </ul>
            </nav>
        </header>
        
        <article>
            <header>
                <hgroup>
                    <h1 id="fruitsilike">Fruits I Like</h1>
                    <h2>How I Learned to Love Citrus</h2>
                </hgroup>
            </header>
            I like apples and oranges.
            <section>
                <h1 id="morefruit">Additional fruits</h1>
                I also like bananas, mangoes, cherries, apricots, plums,
                peaches and grapes.
                <section>            
                    <h1>More information</h1>
                    You can see other fruits I like <a href="fruitlist.html">here</a>
                </section>
            </section>
            <footer>
                <nav>
                    More Information:
                    <a href="http://fruit.org">Learn More About Fruit</a>
                </nav>
            </footer>
        </article>
        
        <article>
            <header>
                <hgroup>
                    <h1 id="activitiesilike">Activities I like</h1>
                    <h2>It hurts, but I keep doing it</h2>
                </hgroup>
            </header>
            <section>
                <p>I like to swim, cycle and run. I am in training for my first
                triathlon, but it is hard work.</p>
                <h1 id="tritypes">Kinds of Triathlon</h1>
                There are different kinds of triathlon - sprint, Olympic and so on.
                <section>
                    <h1 id="mytri">The kind of triathlon I am aiming for</h1>
                    I am aiming for Olympic, which consists of the following:
                    <ol>
                        <li>1.5km swim</li>
                        <li>40km cycle</li>
                        <li>10km run</li>
                    </ol>
                </section>
            </section>
            <footer>
                <nav>
                    More Information:
                    <a href="http://triathlon.org">Learn More About Triathlons</a>
                </nav>
            </footer>
        </article>

        <footer id="mainFooter">
            &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
        </footer>
    </body>
</html>

此例调整了文档的结构以向博客通常采用的格局看齐，不过这恐怕不能说是最精彩的博客。文档的主体分作三大部分。第一部分是一个 header 元素，它汇总了各条博文信息，为文档其他部分提供了一个锚点。第二部分是末尾那个 footer 元素，它与 header 相照应，提供了适合其余内容的基本信息。新增加的东西在第三部分：article 元素。

7、生成附注栏

aside 元素用来表示跟周边内容稍沾一点边的内容，类似于书籍或杂志中的侧栏。它可以是背景信息、到相关文章的链接。

元素aside
元素类型流
允许具备的父元素任何可以包含流元素的元素，但该元素不能是 address 元素的后代元素
局部属性无
内容style 元素和流内容
标签用法开始标签和结束标签
习惯样式aside { display: block; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3, article > footer { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0; margin-top: 0}
            hgroup > h2 { background: grey; color: white; font-size: 1em;
                        margin-top: 0px; margin-bottom: 2px}
                        
            body > header  *, body > footer * { background:transparent; color:black;}
            
            article {border: thin black solid; padding: 10px; margin-bottom: 5px}
            article > footer {padding:5px; margin: 5px; text-align: center}
            article > footer > nav > a {color: white}
            
            body > article > section,
            body > article > section > section {margin-left: 10px;}
            
            body > header, body > footer {
                border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
            }
            body > nav { text-align: center; padding: 2px; border : dashed thin black;}
            body > nav > a {padding: 2px; color: black}
            
            aside { width:40%; background:white; float:right; border: thick solid black;
                margin-left: 5px;}
            aside > section { padding: 5px;}
            aside > h1 {background: white; color: black; text-align:center}
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>Things I like</h1>
                <h2>by Adam Freeman</h2>
            </hgroup>
            <nav>
                <h1>Contents</h1>
                <ul>
                    <li><a href="#fruitsilike">Fruits I Like</a></li>
                    <li><a href="#activitiesilike">Activities I Like</a></li>
                </ul>
            </nav>
        </header>
        
        <article>
            <header>
                <hgroup>
                    <h1 id="fruitsilike">Fruits I Like</h1>
                    <h2>How I Learned to Love Citrus</h2>
                </hgroup>
            </header>
            <aside>
                <h1>Why Fruit is Healthy</h1>
                    <section>
                    Here are three reasons why everyone should eat more fruit:
                    <ol>
                        <li>Fruit contains lots of vitamins</li>
                        <li>Fruit is a source of fibre</li>
                        <li>Fruit contains few calories</li>
                    </ol>
                </section>
            </aside>
            I like apples and oranges.            
            <section>
                <h1 id="morefruit">Additional fruits</h1>
                I also like bananas, mangoes, cherries, apricots, plums,
                peaches and grapes.
                <section>            
                    <h1>More information</h1>
                    You can see other fruits I like <a href="fruitlist.html">here</a>
                </section>
            </section>
            <footer>
                <nav>
                    More Information:
                    <a href="http://fruit.org">Learn More About Fruit</a>
                </nav>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1 id="activitiesilike">Activities I like</h1>
                    <h2>It hurts, but I keep doing it</h2>
                </hgroup>
            </header>
            <section>
                <p>I like to swim, cycle and run. I am in training for my first
                triathlon, but it is hard work.</p>
                <h1 id="tritypes">Kinds of Triathlon</h1>
                There are different kinds of triathlon - sprint, Olympic and so on.
                <section>
                    <h1 id="mytri">The kind of triathlon I am aiming for</h1>
                    I am aiming for Olympic, which consists of the following:
                    <ol>
                        <li>1.5km swim</li>
                        <li>40km cycle</li>
                        <li>10km run</li>
                    </ol>
                </section>
            </section>
            <footer>
                <nav>
                    More Information:
                    <a href="http://triathlon.org">Learn More About Triathlons</a>
                </nav>
            </footer>
        </article>
        <footer id="mainFooter">
            &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
        </footer>
    </body>
</html>

8、提供联系信息

address 元素用来表示文档或 article 元素的联系信息。

元素address
元素类型流
允许具备的父元素任何可以包含流元素的元素
局部属性无
内容流内容。但是标题元素 h1~h6、section、footer、nav、article 和 aside 元素不能用做该元素的后代元素
标签用法开始标签和结束标签
习惯样式address { display: block; font-style: italic; }

9、生成详情区域

details 元素在文档中生成一个区域，用户可以展开它以了解关于某主题的更多信息。

元素details
元素类型流
允许具备的父元素任何可以包含流元素的元素
局部属性open
内容流内容及一个可有可无的 summary 元素
标签用法开始标签和结束标签
习惯样式details { display: block; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            h1, h2, h3, article > footer { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0; margin-top: 0}
            hgroup > h2 { background: grey; color: white; font-size: 1em;
                        margin-top: 0px; margin-bottom: 2px}
            body > header  *, body > footer * { background:transparent; color:black;}
            body > article > section,
            body > article > section > section {margin-left: 10px;}
            body > header {
                border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
            }
            article {border: thin black solid; padding: 10px; margin-bottom: 5px}            
            details {border: solid thin black; padding: 5px}
            details > summary { font-weight: bold}
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>Things I like</h1>
                <h2>by Adam Freeman</h2>
            </hgroup>
        </header>
        <article>
            <header>
                <hgroup>
                    <h1 id="activitiesilike">Activities I like</h1>
                    <h2>It hurts, but I keep doing it</h2>
                </hgroup>
            </header>
            <section>
                <p>I like to swim, cycle and run. I am in training for my first
                triathlon, but it is hard work.</p>
                <details>
                    <summary>Kinds of Triathlon</summary>
                    There are different kinds of triathlon - sprint, Olympic and so on.
                    I am aiming for Olympic, which consists of the following:
                    <ol>
                        <li>1.5km swim</li>
                        <li>40km cycle</li>
                        <li>10km run</li>
                    </ol>
                </details>
            </section>
        </article>
    </body>
</html>

浏览器会提供一个界面控件，它被激活时展开并显示 details 元素的内容。details 元素折拢时，只有其 summary 元素的内容可见。要让页面一显示 details 元素就呈展开状态，需要使用它的 open 属性。

前丨尘忆·梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现文本分段
aoyuan7735的博客
12-03 1378
本菜鸟的第一篇博文，最近在学习js，可能有很多不严谨或者不正确的地方，欢迎指正 在.net开发中，有时候会从后台数据库拉来一大串文本，放到页面上显示。那么问题来了，大段的文本中需要分段，一般分段在后台都用转义字符\n来表示，但是我们现在要把文本放入到一个<div>当中，但是dom元素节点只有<textarea>可以识别转义字符。 我们可以通过javascrip...
前端JS学习笔记——Web API简介
zerocean_的博客
03-11 1543
JS的组成 Web APIs是W3C的标准，属于JS独有的部分，这部分内容主要学习页面的交互 那么Web API和APi又有什么不同呢？ APl（Application Programming Interface，.应用程序程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。 Web API很多都是方法（函数），一般都有
vue中前端实现数据分页展示
dongwang的博客
03-11 1510
<template> <div class="echarts"> <el-table :data="dataList" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width=
实现文字(标准、分段)换行
weixin_33901641的博客
01-26 2608
换行文字的保存和输出 在使用textarea文本域时可通过添加换行如下 当我们重新后台拿到保存的数据后发现数据格式如下。 看到数据中的箭头感觉怪怪的,怎么还会有这个玩意，不管怎么样将数据打印出来看看 created() { console.log( 'start' + '-'.repeat(15), this.growthData.teacherCommen...
前端学习笔记之——使用 Document 对象
前尘忆梦的博客
06-30 1305
使用 Document 对象 1、使用 Document 元数据 Document 对象的用途之一是向你提供关于文档的信息，下表介绍了用来获取文档元数据的属性。 属性 说明 返回 characterSet 返回文档的字符集编码。这是一个只读属性 字符串 charset 获取或设置文档的字符集编码 字符串 compatMode 获取文档的兼容性模式 字符串 cookie 获取或设置当前文档的 cookie 字符串 defaultCharset 获取浏览器所使用的默认字符编码 字
前端学习笔记6——标签与文档使用
weixin_45034895的博客
04-18 106
前端学习笔记6——标签与文档使用标签标签和元素是一个东西所有东西都要写在根元素里（head和body）headbody文档使用 标签 标签和元素是一个东西 所有东西都要写在根元素里（head和body） head head中的内容一般不会显示处理，主要是帮助浏览器或搜索引擎解析网页。 比如meta（设置字符集，避免乱码）、title（title其实是有显示出来的，就是你这个网页的名称就是title，搜索引擎会根据title内容来判断你的内容） body body是网页主体，可见内容写在这里。 一级标题&lt
前端学习笔记——Bootstrap于react
羚漆的博客
09-29 1758
bootstrap的githubbootstrap是一个用于制作页面界面的框架框架: 提供一个标准和规范，再由开发人员自行填充内容react是一个js核心库，如同jquery一样，具有大量react生态(围绕react核心开发的库)声明式也就是js中的数据决定页面最终渲染的结果声明式不是响应式，但往往都是同时出现共同作用页面响应式：数据变化页面会立即更新组件化一个包含所有外观和行为的，独立可运行的模块，称为组件组件化的思想可以将复杂页面，化繁为简的进行设计。
【前端学习——react文档】学习react文档笔记（持续更新）
最新发布
Everglowwwwww的博客
05-02 1202
你不能在条件语句、循环语句或其他嵌套函数内调用 Hook（遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。——这样React 才知道返回的是哪个 state ）。
前端基础学习笔记
sober30的博客
07-27 4059
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
HTML5学习笔记（总结提炼版）——001
03-14
本学习笔记将聚焦于HTML5的基础知识，包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签：HTML5引入了新的语义化标签，如、、、和等，这些标签有助于更好地组织内容，提高可读性和可访问性。 2. ...
web笔记 —— smartupload
03-16
标题中的“web笔记 —— smartupload”指的是一个关于Web开发中的文件上传技术的笔记，主要聚焦于SmartUpload组件。SmartUpload是一款强大的Java上传组件，它为Web应用提供了方便的文件上传功能，支持多文件上传、...
Extjs学习笔记之九 数据模型(上）
10-29
### Extjs 学习笔记之九：数据模型(上） #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色，它不仅为开发者提供了强大的数据处理能力，还极大地简化了前端与...
struts的学习笔记
04-10
### Struts 学习笔记详解 #### 一、Struts 概述 1. **Struts 定义**： - Struts 是一个基于 Java 的开源框架，主要用于构建 Web 应用程序，尤其是那些遵循 Model-View-Controller (MVC) 架构模式的应用程序。 - ...
前端自学学习笔记——HTML
cloki的博客
04-23 2372
前端自学学习笔记——HTML 1、骨架标签 <html></html>根标签，html最大标签 <head></head>文档的头部，此标签中必须设置title标签 <title></title>文档的标题 <body></body>文档的主体，网页的基本内容在其中 在vscode中骨架结构生成快捷键：！+ Tab键 <!DOCTYPE>文档类型声明，告知浏览器使用哪种HTML版本显示页面 &lt
HHTP协议——简单的 HTTP 协议
前尘忆梦的博客
07-06 4033
简单的 HTTP 协议 1、通过请求和响应的交换达成通信 下面是从客户端发送给某个 HTTP 服务器端的请求报文中的内容。 GET /index.htm HTTP/1.1 Host: hackr.jp 起始行开头的 GET 表示请求访问服务器的类型，称为方法（method）。随后的字符串 /index.htm 指明了请求访问的资源对象，也叫做请求 URI（request-URL）。最后的 HTTP/1.1，即 HTTP 的版本号，用来提示客户端使用的 HTTP 协议功能。 请求报文是由请求方法、请求 U
前端学习笔记之——表单
前尘忆梦的博客
06-19 1359
表单 1、制作基本的表单 制作一个基本的表单需要三个元素：form、input 和 button 元素。 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta name="author" content="Adam Freeman"/> <meta name="description" content="A si
前端学习笔记之——使用 Window 对象
前尘忆梦的博客
07-02 1095
使用 Window 对象 1、获取 Window 对象 可以用两种方式获得 Window 对象。正规的 HTML5 方式是在 Document 对象上使用 defaultView 属性。另一种方法是使用所有浏览器都支持的全局变量 window。 <!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body id="bod
Android开发实战笔记——李兴华
"Android开发实战经典—李兴华的学习笔记总结" 这篇文档是作者在学习Android开发过程中积累的实战经验和知识要点的整理。首先，作者强调了学习的基础，建议读者需先掌握《Java开发实战经典》和《Java Web开发实战...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值