注意：手机（APP）打开，内容显示更佳，不会的私聊博主即可（知识点结构参考《HTML5入门到精通》）
想要拿代码或加入学习计划（** 博主会监督你并且教你写文章 **）的拉到最下面（PC端Web打开）加博主即可，目录也在最下面。
参加1_bit博主前端学习计划发文时再头部记得机上本专栏链接，示例如下：
我已加入 1_bit 博主的免费前端 站起来 学习计划，专栏链接：https://blog.csdn.net/a757291228/category_11609526.html
基础 HTML5 元素
👸小媛：这一节咱们讲啥？
🐶1_bit：这一节我们缓解一下压力，将下面的这个代码拿去本地保存为html就可以了，然后要讲的内容都在里面，然后通过以下学习的内容自己做一个文档的web页出来基本上这一节就ok了。这篇可能你看完有不少疑问，在下一篇有一个很大的疑问将会让你明白其答案。
princess:小媛：问题不大，收到。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端实战课程 基本H5元素</title>
</head>
<body><!--导航使用 nav 组合，nav 的作用是标注--><nav><a href="#">导航链接1</a> <a href="#">导航链接2</a> <a href="#">导航链接3</a> <a href="#">导航链接4</a></nav><section><h1>section 标签</h1><p>section 标签一般用作定义一个明确主题的文本，通常内部将会有 h 标签例如章节、一个文档的某个区域、页脚等</p></section><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><h1>这是一个标签</h1><h2>这是其他的标题</h2></hgroup><p>hgroup 主要是对连续的标题做统一的组合</p><h2>figure 标签用于标注图像</h2><figure><img src="./img/1.png" width="200" height="200"><!--img 是图片标签，用于显示图片，src 表示图片来源，后面是图片的路径（所在位置）--></figure><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><h2>mark 标签</h2><p>mark 标签用于凸显<mark>某些</mark>文本</p><h2>progress 标签</h2><p>progress 标签用于进度条显示，例如单独使用 progress 标签不做任何在不同浏览器上有不同的效果</p><progress><p>progress 可以给予 value值以及 max 值指定当前进度条显示，例如如下：</p><progress value="10" max="100"></progress><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><h2>time 标签</h2><p>time 标签用于对时间进行标准，例如“我明天早上<time>11:59</time>起床”</p><h2>wbr 标签</h2><p>一段文字在网页中显示时，会随着窗口大小进行换行，若一些文字或者英文换行会导致“不适”，这个时候使用 wbr 标签就可以规定在长度不够时某处进行换行，例如“我喜欢你在吃苹果时笑起来的样子真好看”，若在“我喜欢你”时进行换行，这样就在一起了不是很好，所以咱们可以选择在“吃苹果时”后面寄一个 wbr 标签，这样就不会有可怕的事情发生了，所以代码可以写成如下示例。</p><p>我喜欢你<wbr>在吃苹果时笑起来的样子真好看</p><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><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><h2>details 标签</h2><p>details 是详情标签，只能在谷歌浏览器和Safari 6浏览器上使用，暂时其他浏览器不支持。details 标签可以给一段内容增加详情，例如如下使用案例：</p><h2>address 标签</h2><p>address 标签用于对地址进行标准，并且有对应自带的地址样式。</p><address>邮编：518000<br/>广东省深圳市高新科技园南区<br/>高新南一道</address></article><footer><p>footer 标签</p><p>footer 标签一般用于标注作者、版权信息等</p></footer>
</body>
</html>
目录
【前端就业课 第一阶段】HTML5 零基础到实战（九）列表
【前端就业课 第一阶段】HTML5 零基础到实战（八）表单详解
【前端就业课 第一阶段】HTML5 零基础到实战（七）文字及图片样式
【前端就业课 第一阶段】HTML5 零基础到实战（六）表格详解
【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素
【前端就业课 第一阶段】HTML5 零基础到实战（四）伪类与伪元素
【前端就业课 第一阶段】HTML5 零基础到实战（三）一篇文CSS基础入门
【前端就业课 第一阶段】HTML5 零基础到实战（二）超链接
【前端就业课 第一阶段】HTML5 零基础到实战（一）基础代码结构详解
函数的兼容性问题)
__Instances__表)
