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

个人简介

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

目录

个人简介

nav标签

代码：

结果： 

 section标签

代码：

结果： 

 article 标签和aside 标签

代码：

结果： 

 hgroup标签

figure 标签 

代码：

 结果：​

 video 标签

 结果：​

mark 标签

代码：

结果： 

 progress 标签

代码： 

结果： ​

 footer 标签

代码：

结果：

 meter 标签

代码：

结果： 

time 标签

代码：

结果：​

 wbr 标签

代码：

 结果：

 datalist 标签

代码一：

 结果：

 代码二：

 结果：​

 details标签

代码：

 结果：​

 address 标签

代码：

结果： 

---

nav标签

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

代码：

    

        导航链接1
        导航链接2
        导航链接3
        导航链接4
    

结果： 

 section标签

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

代码：

        
section 标签
        

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

结果： 

 

 article 标签和aside 标签

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

代码：

        

            
header 标签
            
header 标签用于定义页眉
        
        
article 标签
        

            article 标签一般用于完整的文章，在article内编写对应的内容
        
        

            
aside 标签
            
这里的 aside 标签是用来做辅助区域内容标注
        
    
    

结果： 

 hgroup标签

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

            
这是一个标签
            
这是其他的标题
        
        

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

figure 标签 

figure 标签用于标注图像

代码：

figure 标签用于标注图像
        

            
            
        

 结果：

 video 标签

video 标签用于标注视频 

video 标签用于标注视频
        
        

 结果：

mark 标签

mark 标签用于凸显某些文本 

代码：

 
mark 标签
        
mark 标签用于凸显某些文本

结果： 

 progress 标签

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

代码： 

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

            
progress 可以给予 value值以及 max 值指定当前进度条显示，例如如下：
            
            

结果： 

 footer 标签

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

代码：

 

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

结果：

 meter 标签

代码：

meter 标签
    
有一个标签跟进度条在显示上有一点类似用法也十分简单，value 表示当前值 min 表示最小值、max表示最大值
        根据不同值之间的比例从而显示一个进度条类似的显示
    
    10分之3

    0.9就是90%

结果： 

time 标签

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

代码：

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

结果：

 wbr 标签

代码：

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

 结果：

 datalist 标签

代码一：

datalist 标签
    

        datalist 标签可以给输入框，也就是input 标签元素添加一些待选值；input 标签是输入框标签，例如如下示例：
    
    

 结果：

 代码二：

        以上input标签中 type是类型，text 表示是文本，所以是一个输入框标签。
        那么 datalist 可以给这个文本框一些待选项，例如在 input 标签中添加一个 list 即可，例如如下标签所示：
    
    
    

        以上input标签中添加了一个 list="data" 其中 data 指的是 datalist 标签的id，用来规定待选项的来源，
        现在咱们就来给这个 input 添加一个 id值为 data 的 datalist 标签，如下：
    
    
    

        以上的datalist 标签中的option为选项值列，每个 option 表示当前 datalist 的值之一。
    

 结果：

 

 details标签

 details标签是详情标签

代码：

h2>details 标签
    

        details 是详情标签，只能在谷歌浏览器和Safari 6浏览器上使用，暂时其他浏览器不支持。
        details 标签可以给一段内容增加详情，例如如下使用案例：
    
    

        
Copyright 1999-2011.
        
 - by Refsnes Data. All Rights Reserved.
        
All content and graphics on this web site are the property of the company Refsnes Data.
    
    

        以上示例中，summary 标签是整个详情标签 details 的标题，而其他内容例如 p 标签将会收起。
    

 结果：

 address 标签

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

代码：

address 标签
    

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

        邮编：518000

        xxxxxxxxxxxxxxxxxxxx

        高新南一道
    

结果：