HTML5的元素及属性

吾独矣

已于 2022-05-10 19:56:31 修改

阅读量617

点赞数 1

分类专栏：随笔文章标签： html5 html

于 2021-11-21 15:37:05 首次发布

本文链接：https://blog.csdn.net/m0_56210400/article/details/121452493

版权

随笔专栏收录该内容

12 篇文章 0 订阅

订阅专栏

列表元素：
·ul元素（无序列表），并列的没有顺序级别之分，li标记至少一对嵌套在ul标记中

·ol元素（有顺序列表），各个列表项按照一定顺序排列，li标记至少一对嵌套在ol标记中。拥有start属性（可以改变列表编号起始值）和reversed属性（表示是否对列表反向排序，默认值为ture）

<ol start="起始值" reversed>
      <li>内容1</li>
      <li>内容2</li>
 </ol>

·dl元素对术语或名词解释和描述

<dl>
    <dt>名词</dt>
	    <dd>描述1</dd>
	    <dd>描述2</dd>
</dl>

结构元素：
·header元素，在页面头部具有引导和导航作用，可放置整个页面或页面内一个内容区块

·nav元素，用导航性质链接到其他页面

·article元素，代表文档与上下文不相关独立部分，使用section元素划分

<article>
            <header>
                <h1>描述</h1>
            </header>
            <section>
                <header>
                    <h1>解释1</h1>
                </header>
            </section>
            <section>
                <header>
                     <h1>解释2</h1>
                </header>
            </section>
        </article>

·section元素，对网站页面内容进行分块

·aside元素，定义当前页面的附属部分

·footer元素，用于article元素添加区域底部

分组元素：
·figure元素（定义独立的内容，与主内容相关，被删除也不对文档产生影响）和figcaption元素（为figure元素添加标题，最多使用一个）
·hgroup元素，将多个标题（主标题，副标题）组成一个标题组

页面交互元素
·details元素可下拉或隐藏内容，用summary显示下拉文字

<details>
            <summary>单击下拉</summary>
            <ul>
                <li>内容1</li>
                <li>内容2</li>
            </ul>
        </details>

·progress元素，表示一个任务完成进度（value值表示已经完成量，max表示总共多少量）

<progress value="完成量" max="总量"></progress>

·meter元素指定范围内数值，high定义在哪个值为高，low定义在哪个值为低，max定义最大值（默认值为1），min定义最小值（默认0），value定义度量值，optimum定义什么值最优（该值高于high越高越好，该值低于low越低越好）

<meter value="度量值" max="最大值" min="最小值" high="高" low="低" optimum="最优值"></meter>

文本层次语义元素：
·mark元素，突出显示文字
·cite元素，引用标记

全局属性
·draggable属性，定义页面元素是否可拖动
·spellcheck属性针对文本框输入内容进行拼写和语法检查

示范源代码如下：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        </style>
    </head>

    <body>
        <ul>
            <li>好好学习</li>
            <li>天天向上</li>
        </ul>

        <ol>
            <li>好好学习</li>
            <li>天天向上</li>
        </ol>

        <ol start="2" reversed>
            <li>好好学习</li>
            <li>天天向上</li>
        </ol>

        <dl>
            <dt>目标</dt>
                <dd>好好学习</dd>
                <dd>天天向上</dd>
        </dl>

        <header>
            <h1>目标</h1>
            <h2>好好学习天天向上</h2>
        </header>

        <nav>
            <ul>
                <li><a href="#">首页</a></li>
            </ul>
        </nav>

        <article>
            <header>
                <h1>目标1</h1>
            </header>
            <section>
                <header>
                    <h1>好好学习</h1>
                </header>
            </section>
            <section>
                <header>
                     <h1>天天向上</h1>
                </header>
            </section>
        </article>
        <article>
            <header>
                <h1>目标2</h1>
            </header>
        </article>

        <article>
            <header>
                <h1>目标</h1>
            </header>
            <section>主要内容</section>
            <aside>其他相关</aside>
        </article>
        <aside>好好学习</aside>
            
        <article>
            内容
            <footer>
               内容底部
            </footer>
        </article>
        <footer>
            页面底部
        </footer>

        <figure>
            <figcaption>内容</figcaption>
        </figure>

        <header>
            <hgroup>
                <h1>标题</h1>
                <h2>副标题</h2>
            </hgroup>
            <p>内容</p>
        </header>

        <details>
            <summary>单击下拉</summary>
            <ul>
                <li>内容1</li>
                <li>内容2</li>
            </ul>
        </details>

        <progress value="50" max="100"></progress><br />

        <meter value="50" max="100" min="0" high="80" low="60" optimum="100"></meter><br />
        <meter value="90" max="100" min="0" high="80" low="60" optimum="100"></meter><br />
        <meter value="70" max="100" min="0" high="80" low="60" optimum="100"></meter><br />

        <p>为中华之<mark>崛起</mark>而读书</p>
        <cite>--周恩来</cite>

        <p draggable="true">文字可拖动</p>

        <textarea spellcheck="true">true</textarea>
        <textarea spellcheck="true">ture</textarea>
        <textarea spellcheck="false">ture</textarea>



    </body>

</html>

效果如下：
在这里插入图片描述

吾独矣
终极愿望世界和平

吾独矣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5的元素及属性

列表元素：·ul元素（无序列表），并列的没有顺序级别之分，li标记至少一对嵌套在ul标记中·ol元素（有顺序列表），各个列表项按照一定顺序排列，li标记至少一对嵌套在ol标记中。拥有start属性（可以改变列表编号起始值）和reversed属性（表示是否对列表反向排序，默认值为ture）<ol start="起始值" reversed> <li>内容1</li> <li>内容2</li> </ol>·
复制链接

扫一扫