1. 首页
  2. 文章中心
  3. 前端

HTML5分节元素和语义元素

57 阅读 0 评论
我是靠谱客的博主 朴实奇异果，最近开发中收集的这篇文章主要介绍HTML5分节元素和语义元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<base>

<base> 元素为文档中的所有链接指定基地址。如果URL中含有协议名或"//"则会忽略 <base> 指定的基地址。

    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <base href="http://www.baidu.com/img/">  
        </head>  
        <body>  
            <!-- http://www.baidu.com/img/a.jpg -->  
            <img src="a.jpg">  
      
            <!-- 如果带协议头，则忽略 base 指定的基URL -->  
            <!-- http://www.baidu.com/img/b.jpg -->  
            <img src="http://www.baidu.com/img/b.jpg">  
      
            <!-- 省略协议头但保留"//"，仍然会忽略 base 指定的基URL -->  
            <!-- 这也是谷歌前端编码规范推荐使用的一种方式 -->  
            <!-- http://www.baidu.com/img/c.jpg -->  
            <img src="//www.baidu.com/img/c.jpg">  
        </body>  
    </html>

<link>

<link> 元素为文档指定外部样式表 
    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <link rel="stylesheet" href="css/style.css">  
        </head>  
        <body>  
              
        </body>  
    </html>

<article>

代表独立的、完整的一篇”文章“，如一个贴子、一篇文章、一条回复。可以包含 <header> 、 <footer> 、 <section> 等元素。 
    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <!-- 一篇文章 -->  
            <article>  
                <header>  
                    <h1>The Very First Rule of Life</h1>  
                    <p><time datetime="2009-10-09">3 days ago</time></p>  
                </header>  
                <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>  
                <p>...</p>  
                <section>  
                    <h1>Comments</h1>  
                    <!-- 一条评论 -->  
                    <article>  
                        <footer>  
                            <p>Posted by: <span>George Washington</span></p>  
                            <p><time datetime="2009-10-10">15 minutes ago</time></p>  
                        </footer>  
                        <p>Yeah! Especially when talking about your lobbyist friends!</p>  
                    </article>  
                    <!-- 一条评论 -->  
                    <article>  
                        <footer>  
                            <p>Posted by: <span>George Hammond</span></p>  
                            <p><time datetime="2009-10-10">5 minutes ago</time></p>  
                        </footer>  
                        <p>Hey, you have the same first name as me.</p>  
                    </article>    
                </section>  
            </article>  
        </body>  
    </html>

<section>

代表页面或某一部分的一节或一个部分，每个 <section> 一般都有一个主题思想，但未必一定要有 <h> 元素。 
    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <article>  
                <header>  
                    <h2>Apples</h2>  
                    <p>Tasty, delicious fruit!</p>  
                </header>  
                <p>The apple is the pomaceous fruit of the apple tree.</p>  
                <!-- 此处表示文章的一个小主题 -->  
                <section>  
                    <h3>Red Delicious</h3>  
                    <p>These bright red apples are the most common found in many supermarkets.</p>  
                </section>  
                <section>  
                    <h3>Granny Smith</h3>  
                    <p>These juicy, green apples make a great filling for apple pies.</p>  
                </section>  
            </article>  
        </body>  
    </html>

<nav>

任何具有导航性质的链接组都可以用 <nav> 元素，不管是主导航、还是侧边栏中的导航、还是面包屑导航、还是页面内的锚点导航 
    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <header>  
                <nav>  
                    <h1>Navigation</h1>  
                    <ul>  
                        <li><a href="articles.html">Index of all articles</a></li>  
                        <li><a href="today.html">Things sheeple need to wake up for today</a></li>  
                        <li><a href="successes.html">Sheeple we have managed to wake</a></li>  
                    </ul>  
                </nav>  
            </header>  
            <main>  
                <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>  
                      
                </footer>  
             </main>  
        </body>  
    </html>

<aside>

<aside> 元素用于突出的引用、广告、侧边栏。 
    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            ...  
            <p>He later joined a large company, continuing on the same work.  
            <q>I love my job. People ask me what I do for fun ...</q></p>  
              
            <!-- 突出的引用 -->  
            <aside>  
             <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q>  
            </aside>  
      
            <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p>  
            ...  
        </body>  
    </html>

<address>

<address> 代表联系信息，不仅仅是”地址“。 
    <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <footer>  
                <address>  
                    For more details, contact  
                    <a href="mailto:js@example.com">John Smith</a>.  
                </address>  
                <p><small>© copyright 2038 Example Corp.</small></p>  
            </footer>  
        </body>  
    </html>

<pre>

<pre> 元素用于定义预格式化的文本，被包围在 <pre> 元素中的文本通常会保留空格和换行符，常用来表示程序的源代码 
    <!DOCTYPE html>  
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <pre>  
                <h1>hello world</h1>  
                echo "hello world";  
                print("hello world")  
            </pre>  
        </body>  
    </html>

<blockquote>

<blockquote> 元素用于定义引用块。 
    <!DOCTYPE html>  
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <!-- 下面是引用内容 -->  
            <blockquote>  
                <p>Hello World</p>  
            </blockquote>  
        </body>  
    </html>

<figure>

<figcaption>

<figure> 元素表示独立的流内容（图像、图表、照片、代码等等）， <figcaption> 元素给 <figure> 元素添加标题。 
    <!DOCTYPE html>  
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <figure>  
                <figcaption>Ubuntu诞生那一年</figcaption>  
                <img src="ubuntu.jpg" width="350" height="234" />  
            </figure>  
        </body>  
    </html>

<code>

<code> 元素用于表示计算机源代码或者其他机器可以阅读的文本内容。 
    <!DOCTYPE html>  
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <p>又是<code>println("hello world")</code></p>  
        </body>  
    </html>

<mark>

<mark> 元素突出显示文本。 
    <!DOCTYPE html>  
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <p>Do not forget to buy <mark>milk</mark> today.</p>  
        </body>  
    </html>

<del>

<del> 元素定义文档中已被删除的文本。
<ins> 与 <del> 常配合使用： 
    <!DOCTYPE html>  
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            <p>I love <del>java</del><ins>javascript</ins></p>  
        </body>  
    </html>

<canvas>

<canvas> 元素定义图形。 
    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
            <style>  
                table {width: 100%;}  
            </style>  
        </head>  
        <body>  
            <canvas id="myCanvas" width="500" height="300"></canvas>  
        </body>  
    </html>

 

转载于:https://www.cnblogs.com/yoyohong/p/6053350.html

最后

以上就是朴实奇异果为你收集整理的HTML5分节元素和语义元素的全部内容，希望文章能够帮你解决HTML5分节元素和语义元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(38)

相关文章

frame、bounds表示大小和位置的属性以及center、position、anchorPosition
frame、bounds表示大小和位置的属性以及center、position、anchorPosition
html中用作文档分节的元素
html中用作文档分节的元素
STL：二级空间配置器浅谈
STL：二级空间配置器浅谈
HTML学习目录
HTML学习目录
HTML5分节元素和语义元素
HTML5分节元素和语义元素
分节元素
分节元素
基础知识点复习——HTML第一章
基础知识点复习——HTML第一章
第一章知识总结
第一章知识总结

评论列表共有 0 条评论

立即
投稿
返回
顶部