【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素
注意：手机（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 零基础到实战（一）基础代码结构详解
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022/02/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
