<!DOCTYPE html>
<!-- <!DOCTYPE> 为文档声明，声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 -->
<html lang="zh">
<!-- lang的作用是向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，
语言的意思，而“en”即表示english，<html lang="zh">为中文 -->
<head>
<!--charset 属性规定 HTML 文档的字符编码。提示：charset 属性可以通过任意元素上的 lang 属性来重写。
charset 属性是 HTML5 中的新属性，且替换了：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">-->
<meta charset="UTF-8">
<!-- name为所使用的功能名称，例如这里的keywors就代表着关键字的功能，content为相关功能的具体内容 -->
<meta name="keywords" content="该内容只要在搜索引擎里搜索，本网页将会出现" >
<!-- description用于指定网站的描述 -->
<meta name="description" content="该内容会显示在搜索引擎的结果中">
<!-- author用于定义页面作者 -->
<meta name="author" content="liyi">
<!-- 将页面重定向到另一个页面：xx秒后自动跳转,content里的3就是跳转时间，意为3秒后跳转 -->
<!-- <meta http-equiv="refresh" content="3600;url=https://www.baidu.com/"> -->
<!-- title的内容会作为超链接上的文字显示在搜索结果中 -->
<title>html5初识(一)</title>
</head>
<body>
© <!-- 版权符号，这种叫实体，也称转义字符 -->
<p>标题标签分重要性，h1重要性最高，h6最低，一般一个页面只有一个h1</p>
<p>在页面中独占一行的元素称为块元素，例如p标签</p>
<!-- hgroup标签用来为标题分组，可以将一组相关标题放到里面 -->
<hgroup>
<!-- em标签，表示为强调内容(语气)，即内容不一定重要，在浏览器中默认表现为斜体的形式，而控制字体为斜体的标签为i标签
，别搞混淆了 -->
<!-- 不会独占一行的元素叫行内元素，例如em标签 -->
<h1>道<em>德</em>经</h1>
<!-- strong标签，类似于em标签，表示为重要内容 -->
<h2>第<strong>一章</strong></h2>
</hgroup>
<blockquote>
<!-- blockquoto标签长引用，<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进
行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。 -->
道可道，非常道。
</blockquote>
<!-- q标签表示短引用 -->
<q>名可名，非常名。</q>
<!-- 不能在p标签中放任何块元素，一般写了浏览器会自动纠正，但不建议使用 -->
<p>道<h1>法自</h1>然</p>
<!-- 语义标签，例如分区块用的section、header、main、nav、footer、article -->
<header>
<p>header标签表示网页的头部(或者网页中某一个部分的头部)</p>
</header>
<main>
<p>main标签表示网页的主体部分(一个页面中只有一个)</p>
</main>
<footer>
<p>footer标签表示网页的底部(或者网页中某一个部分的底部)</p>
</footer>
<nav>
<p>nav标签表示网页中的导航</p>
</nav>
<aside>
<p>aside标签表示和主体相关的内容，但又不属于主体(侧边栏)</p>
</aside>
<article>
<p>article标签表示文章</p>
</article>
<section>
<p>section标签表示一个独立的区块</p>
</section>
<span>行内布局元素</span>
<div>常用块级布局</div>
<dl>
<!-- 使用dl来创建一个列表，块元素 -->
<dt>结构</dt>
<dd>结构表示网页的结构</dd>
<dd>列表之间可以互相嵌套</dd>
</dl>
<!-- 这里用到了相对路径，target属性，指定超链接打开的位置，_self表示当前页打开，_blank表示在空白页打开 -->
<a href="html5_1.html" target="_blank">超链接a标签，行内元素，用于跳转(外部内部皆可)，但里面可以嵌套任何元
素(包括块元素)除了它自身以外</a>
<!-- href里面写#，表示回到顶部 -->
<br><a href="#">回到顶部</a>
<br><a href="javascript:;">javascript:;作为占位符使用</a>
<!-- 替换元素img，src为图片路径，alt为图片注释，在图片加载不出来时显示里面的内容，此外搜索引擎会根据alt中的内容来识别图
片，图片的宽度和高度如果只改了其中的一个，另一个会等比例缩放 -->
<!-- 一般在PC端不建议改图片的大小，最好要多大用多大，但在移动端经常需要对图片进行缩放 -->
<!-- 图片格式
jpeg(jpg)支持颜色比较丰富，但不支持透明效果，不支持动图，一般用来显示照片
gif支持的颜色比较少，支持简单透明，支持动图，适合颜色单一的图片、动图
png支持颜色丰富，支持复杂透明，不支持动图，专为网页而生
webp谷歌推出的专门用来表示网页中的图片的一种格式，它具备其他格式的所有优点，而且文件还特别小，就是兼容性不好,例如IE -->
<!-- 图片选择原则:效果一样用小的，效果不一样用好的(酌情考虑) -->
<!-- 将图片进行base64编码(加密)，这样可以直接将图片转换为字符，然后通过字符的格式来引入图片，一般是一些需要和网页一起加
载的图片才会使用base64(请上网百度找工具自行转换) -->
<br><img src="http://mat1.gtimg.com/sports/soccerdata/images/player/135363.jpg" alt="足球运动员">
<!-- iframe内联框架，可以在网页里嵌套另一个网页，frameborder为内嵌网页的边框属性，0位没有边框 -->
<!-- 一般情况下很少使用 -->
<iframe src="https://www.qq.com" width="600px" height="600px" frameborder="0"></iframe>
<!-- 音视频文件引入时，默认情况下不允许用户自己控制，要加controls，该属性可以不用值 -->
<!-- autoplay自动播放，但是大部分浏览器不会自动对音乐进行播放 -->
<!-- loop循环播放 -->
<br>
<audio src="https://webfs.yun.kugou.com/202004091412/88ca73c63effae053b6524e162728728/G009/M08/12/08/qYYBAFUMq7SAFvE
7ADu05O-Fov8513.mp3" controls autoplay loop></audio>
<!-- 除了src，source也可以 -->
<!-- 为了兼容性作出的代码规范 -->
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="https://webfs.yun.kugou.com/202004091412/88ca73c63effae053b6524e162728728/G009/M08/12/08/qYYBAFUMq7
SAFvE7ADu05O-Fov8513.mp3">
<!-- <source src="https://webfs.yun.kugou.com/202004091412/88ca73c63effae053b6524e162728728/G009/M08/12/08/qYYB
AFUMq7SAFvE7ADu05O-Fov8513.ogg"> -->
<!-- 老版本浏览器所用的音频文件标签 -->
<embed src="" type="" width="" height="">
</audio>
<!-- video标签，引入视频，使用方式基本与audio一样 -->
<br>
<video controls>
<source src="https://apd-1b13776bbe68b28c309e644e359aa2f0.v.smtcdns.com/om.tc.qq.com/AJAfiGYZwuj63qU78FYGoPPZOU-
mVGEx5i0COhL9e1Vw/uwMROfz2r5zEIaQXGdGnC2dfDmafRkP9ujxgqKjuATzMrE-2/o0684ccgiea.mp4?sdtfrom=v1010&guid=9c635261a3
d15029388522c8a54fa2f3&vkey=A03C117D5F158C69B33C395DE22C11538866093C6C45E37014C250B2F4C7E59CE3073DB4590C2D2B579E
B94FF5D73D12AAB4218E93A34EADEFA1EA588D1F36B6D4E34FABD4B69F2574C476249F88FDB3CBC43313738ACA87676DC3084E00BA9F48D8
75342299D19B44EE2DC96D3124284DABCB0438EFB412C4E02905DD00A2AC">
</video>
<iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132017557&page=26" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>
浙公网安备 33010602011771号