基础认知

网页由文字、图片、音频、视频和超连接组成
Web标准由HTML，CSS，JavaScript构成
HTML骨架由html标签，head标签，body标签，title标签组成
vscode中，注释的快捷键是Ctrl+/

HTML标签学习

标题

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

特点：

文字加粗
文字变大，且从h1-h6逐渐减小
独占一行

段落

<body>
    <p>
      阿卡贝拉（意大利：Acappella)即无伴奏合唱。
      其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：
      阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella)
    </p>
    <p>
      “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：
      有一种悲伤（翻唱）-《A Kind of Sorrow》
    </p>
  </body>

特点：

段落间存在间隙
独占一行

换行

<body>
    <p>
      阿卡贝拉（意大利：Acappella)即无伴奏合唱。<br>
      其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：
      阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella)
    </p>
    <p>
      “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：
      有一种悲伤（翻唱）-《A Kind of Sorrow》
    </p>
  </body>

特点：

单标签
让文字强制换行

水平线

<body>
    <h1>这是文章标题</h1>
    <hr>
    <p>
      阿卡贝拉（意大利：Acappella)即无伴奏合唱。<br />
      其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：
      阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella)
    </p>
    <p>
      “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：
      有一种悲伤（翻唱）-《A Kind of Sorrow》
    </p>
  </body>

特点：

单标签
在页面中显示一条水平线

文本格式化

标签	说明
`<b></b>`	加粗
`<u></u>`	下划线
`<i></i>`	倾斜
`<s></s>`	删除线

图片

<body>
    <!-- alt : 替换文本, 当图片不显示的时候显示的文字 -->
    <!-- width和height属性只需要给出一个值, 另一个等比例缩放 -- 好处就是图片不变形 -->
    <img
      src="cat.gif"
      alt="这是一只猫"
      title="这是title文字, 鼠标悬停的时候显示"
      width="200"
      height="200"
    />
  </body>

音频

<body>
    <audio src="./music.mp3" controls autoplay loop></audio>
</body>

属性名	功能
src	音频的路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

视频

<body>
    <!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
    <video src="./video.mp4" controls autoplay muted loop></video>
</body>

属性名	功能
src	视频的路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

超链接

<body>
    <!-- href : 跳转地址 -->
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

    <br>

    <a href="./01-标题标签.html">点我呀, 点了就去01-标题标签</a>

    <!-- 当开发网站初期, 我们还不知道跳转地址的时候, href的值书写#(空链接) -->

    <br>
    <a href="#">空链接, 不知道跳到哪里去</a>
</body>

target属性

取值	效果
_self	默认，在当前窗口打开
_blank	在新窗口打开

HTML认知 | 青训营

基础认知

HTML标签学习

标题

段落

换行

水平线

文本格式化

图片

音频

视频

超链接