HTML5-基础知识点

第二章：HTML5 页面元素及属性

HTML5 新增元素分为 结构元素，分组元素，页面交互元素和文本层次语义元素

列表元素

分为 ul 无序列表；ol 有序列表；dl 定义列表

ul 元素

无序列表是网页中最常用的列表，各个列表项之间没有顺序级别之分，通常是并列的。

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

ol 元素

有序列表，各个列表按照一定的顺序排列

​
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>雪梨</li>
    </ol>
    // 设置反向排序
    <ol  star="2" reversed> </ol>

dl 元素

定义列表通常用于对术语或名词进行解释和描述

<dl>
        <dt>名词1</dt>
        <dd>名词1 解释1</dd>
        <dd>名词1 解释2</dd>
        <dt>名词2</dt>
        <dd>名词2 解释1</dd>
        <dd>名词2 解释2</dd>
    </dl>

dl 用于定义列表， dt 指定术语名词， dd 用于描述解释，并列嵌套于 dl 中。

列表嵌套使用

<ul>
        <li>咖啡</li>
        <ol>
            <li>拿铁</li>
            <li>摩卡</li>
        </ol>
        <li>茶
          <ul>
            <li>碧螺春</li>
            <li>龙井</li>
          </ul>
        </li>
    </ul>

结构元素

header 元素

页面或页面内区域块的 头部，导航

nav

元素用于定义导航链接

场合：

• 传统导航条：转跳到网站的其他页面

• 侧边栏导航：

• 页内导航

• 翻页操作

article 元素

代表文档，页面或者应用程序中的上下文不相关的独立部分，通常用于定义一篇日志，一条新闻或用户评论。article 元素通常 使用 section 元素配合使用，进行划分部分。

aside 元素

定义当前页面或者文章的附属信息部分，最常用场景：侧边栏，广告，导航条

section 元素

用于网站或者应用程序中页面的内容进行分块，一个 section 元素通常由内容和标题组成

footer 元素

用于定义一个页面或者区域的底部

分组元素

figure 和 figcaption 元素

figure元素用于定义独立的流内容（图像，图标，照片，代码等）一般指单独的单元。figcaption 用于为 figure 添加标题，位于 figure 元素的第一个或最后一个子元素位置。

hgroup 元素

用于将多个标题组成一个标题组，通常与 h1 - h6 元素组合使用。通过将 hgroup 元素放于 header 元素中。

页面交互元素

details 和 summary 元素

details 元素用于描述文档或者文档某个部分的细节。summary 元素作为 details 元素的第一个子元素，用于定义 detial 的标题。标题是可见的，当用户点击标题时，会显示或隐藏 details 中的其他内容。

<details>
        <summary>显示列表</summary>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </details>
    

progress 元素

表示一个任务的完成进度，两个属性值

• value：已经完成的工作量，必须大于 0 ，小于 max

• max：总共有多少工作量，必须大于0

<h1>我的工作量</h1>
<progress value="50" max="100"></progress>

meter 元素

用于指定范围内的数值，例如，显示硬盘容量或者对某个后选者的投票人数占总人数的比例。

常用属性

属性	描述
high	定义度量值位于那个点被界定为高的值
low	定义度量值位于那个点被界定为低的值
max	定义最大值，默认为1
min	定义最小值，默认为0
optimum	定义什么样的度量值是最佳的值。如果高于 high ，则意味着越高越好。如果低于 low，则是越低越好
value	定义度量的值

<h1>学生成绩列表</h1>
    <p>
        小红：<meter value="65" min="0" max="100" 
         low="60" high="80" title="65 分" optimum="100">65</meter>
    </p>

文本层次语义元素

time 元素

用于定义日期或时间

mark 元素

主要功能是在 文中高亮某些字符

<p>
     哦合法赵傲客户客户当升科技
     <mark>高亮的文字</mark>
    </p>

cite 元素

创建引用标记，用于文档参考文献的引用说明，斜体方式展示。

<p>
        床前明月光，
    疑是地上霜。
        举头望明月，
        低头思故乡。
    </p>
    <cite>静夜思-<李白></cite>

全局属性

全局属性是指在任意元素中都可以使用的属性。

HTML5 中的全局属性有： draggable，hidden, spellcheck, 和 contenteditable

draggable ：属性定义元素是否可以拖动，属性值为 true 或 false，需要结合 javascript

hidden: 属性 显示与隐藏 元素，属性值为 true 或 false

spellcheck 属性，主要针对 input 和 textarea 文本输入框，对用户输入的文本内容进行拼写和语法检验，属性值为 true（默认值） 或 false

contenteditable 属性规定是否可以编辑元素的内容，前提是该元素必须可以获得焦点，并且其内容不是只读的，属性值为 true 或 false。

<p draggable="true" hidden>
        床前明月光，
    疑是地上霜。
        举头望明月，
        低头思故乡。
    </p>
    <cite>静夜思-<李白></cite>
    <p>spellcheck 属性值为 true
      <textarea spellcheck="true">html5</textarea>
    </p>
    <p>spellcheck 属性值为 false
      <textarea spellcheck="false">html5</textarea>
    </p>
    <h3>可编辑列表</h3>
    <ul contenteditable="true">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>