HTML5 零基础到实战（五）基础标签元素笔记

💥个人简介

我已加入 1_bit 博主的免费前端 站起来 学习计划，专栏链接：一哥博客
💖 作者简介：⭐️大一heart，还在学习（卷）当中，欢迎交流指正~😜
📝 个人主页heart的博客🔥
📧如果文章知识点有错误的地方，请指正留言📝！和大家一起学习，一起进步
📣 系列专栏：大话前端🍁
💬格言：人生舞台的大幕随时都可能拉开，关键是你愿意表演，还是选择躲避🔥
🧡如果感觉博主的文章还不错的话，请👍三连支持一下博主💌哦

目录

💥个人简介

nav标签

代码：

结果： 

 section标签

代码：

结果： 

 article 标签和aside 标签

代码：

结果： 

 hgroup标签

figure 标签 

代码：

 结果：​

 video 标签

 结果：​

mark 标签

代码：

结果： 

 progress 标签

代码： 

结果： ​

 footer 标签

代码：

结果：

 meter 标签

代码：

结果： 

time 标签

代码：

结果：​

 wbr 标签

代码：

 结果：

 datalist 标签

代码一：

 结果：

 代码二：

 结果：​

 details标签

代码：

 结果：​

 address 标签

代码：

结果： 

---

nav标签

<!--导航使用 nav 组合，nav 的作用是标注-->

补充：nav 标签是 HTML 5 中的新标签。

代码：

<!--导航使用 nav 组合，nav 的作用是标注-->
    <nav>
        <a href="#">导航链接1</a>
        <a href="#">导航链接2</a>
        <a href="#">导航链接3</a>
        <a href="#">导航链接4</a>
    </nav>

结果： 

 section标签

section 标签一般用作定义一个明确主题的文本，通常内部将会有 h 标签
            例如章节、一个文档的某个区域、页脚等

代码：

<section>
        <h1>section 标签</h1>
        <p>
            section 标签一般用作定义一个明确主题的文本，通常内部将会有 h 标签
            例如章节、一个文档的某个区域、页脚等
        </p>
    </section>

结果： 

 

 article 标签和aside 标签

article 标签一般用于完整的文章，在article内编写对应的内容
 这里的 aside 标签是用来做辅助区域内容标注

代码：

<article>
        <header>
            <h1>header 标签</h1>
            <p>header 标签用于定义页眉</p>
        </header>
        <h1>article 标签</h1>
        <p>
            article 标签一般用于完整的文章，在article内编写对应的内容
        </p>
        <aside>
            <h4>aside 标签</h4>
            <p>这里的 aside 标签是用来做辅助区域内容标注</p>
        </aside>
    </article>
    <article>

结果： 

 hgroup标签

hgroup 主要是对连续的标题做统一的组合

<hgroup>
            <h1>这是一个标签</h1>
            <h2>这是其他的标题</h2>
        </hgroup>
        <p>
            hgroup 主要是对连续的标题做统一的组合
        </p>

figure 标签 

figure 标签用于标注图像

代码：

<h2>figure 标签用于标注图像</h2>
        <figure>
            <img src="./img/1.png" width="200" height="200">
            <!--img 是图片标签，用于显示图片，src 表示图片来源，后面是图片的路径（所在位置）-->
        </figure>

 结果：

 video 标签

video 标签用于标注视频 

<h2>video 标签用于标注视频</h2>
        <!--video 是视频标签，用于在内部显示视频，内部的 source 表示视频的来源 source 内的 src是视频来源
            type="video/mp4" 表示视频类型 -->
        <video width="200" height="200" controls>
            <source src="./mp4/movie.mp4" type="video/mp4">
        </video>

 结果：

mark 标签

mark 标签用于凸显<mark>某些</mark>文本 

代码：

 <h2>mark 标签</h2>
        <p>mark 标签用于凸显<mark>某些</mark>文本</p>

结果： 

 progress 标签

 progress 标签用于进度条显示，例如单独使用 progress 标签不做任何在不同浏览器上有不同的效果

代码： 

<h2>progress 标签</h2>
        <p>progress 标签用于进度条显示，例如单独使用 progress 标签不做任何在不同浏览器上有不同的效果</p>
        <progress>

            <p>progress 可以给予 value值以及 max 值指定当前进度条显示，例如如下：</p>
            <progress value="10" max="100">
            </progress>

结果： 

 footer 标签

 footer 标签一般用于标注作者、版权信息等

代码：

 <footer>
        <p>footer 标签</p>
        <p>footer 标签一般用于标注作者、版权信息等</p>
    </footer>

结果：

 meter 标签

代码：

<h2>meter 标签</h2>
    <p>有一个标签跟进度条在显示上有一点类似用法也十分简单，value 表示当前值 min 表示最小值、max表示最大值
        根据不同值之间的比例从而显示一个进度条类似的显示
    </p>
    <meter value="3" min="0" max="10">10分之3</meter><br>
    <meter value="0.9">0.9就是90%</meter>

结果： 

time 标签

time 标签用于对时间进行标准，例如“我明天早上:59起床 

代码：

 <h2>time 标签</h2>
    <p>time 标签用于对时间进行标准，例如“我明天早上<time>11:59</time>起床”
    </p>

结果：

 wbr 标签

代码：

<h2>wbr 标签</h2>
    <p>一段文字在网页中显示时，会随着窗口大小进行换行，若一些文字或者英文换行会导致“不适”，这个时候使用 wbr 标签就可以规定在
        长度不够时某处进行换行，例如“我喜欢你在吃苹果时笑起来的样子真好看”，若在“我喜欢你”时进行换行，这样就在一起了不是很好，
        所以咱们可以选择在“吃苹果时”后面寄一个 wbr 标签，这样就不会有可怕的事情发生了，所以代码可以写成如下示例。
    </p>
    <p>我喜欢你<wbr>在吃苹果时笑起来的样子真好看</p>

 结果：

 datalist 标签

代码一：

<h2>datalist 标签</h2>
    <p>
        datalist 标签可以给输入框，也就是input 标签元素添加一些待选值；input 标签是输入框标签，例如如下示例：
    </p>
    <input type="text">

 结果：

 代码二：

<p>
        以上input标签中 type是类型，text 表示是文本，所以是一个输入框标签。
        那么 datalist 可以给这个文本框一些待选项，例如在 input 标签中添加一个 list 即可，例如如下标签所示：
    </p>
    <input type="text" list="data">
    <p>
        以上input标签中添加了一个 list="data" 其中 data 指的是 datalist 标签的id，用来规定待选项的来源，
        现在咱们就来给这个 input 添加一个 id值为 data 的 datalist 标签，如下：
    </p>
    <datalist id="data">
        <option value="这是待选项1">
        <option value="这是待选项2">
        <option value="这是待选项3">
        <option value="这是待选项4">
        <option value="这是待选项5">
    </datalist>
    <p>
        以上的datalist 标签中的option为选项值列，每个 option 表示当前 datalist 的值之一。
    </p>

 结果：

 

 details标签

 details标签是详情标签

代码：

h2>details 标签</h2>
    <p>
        details 是详情标签，只能在谷歌浏览器和Safari 6浏览器上使用，暂时其他浏览器不支持。
        details 标签可以给一段内容增加详情，例如如下使用案例：
    </p>
    <details>
        <summary>Copyright 1999-2011.</summary>
        <p> - by Refsnes Data. All Rights Reserved.</p>
        <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
    </details>
    <p>
        以上示例中，summary 标签是整个详情标签 details 的标题，而其他内容例如 p 标签将会收起。
    </p>

 结果：

 address 标签

 address 标签用于对地址进行标准，并且有对应自带的地址样式。

代码：

<h2>address 标签</h2>
    <p>
        address 标签用于对地址进行标准，并且有对应自带的地址样式。
    </p>
    <address>
        邮编：518000<br />
        xxxxxxxxxxxxxxxxxxxx<br />
        高新南一道
    </address>

结果：