HTML学习 Part1

HTML骨架快捷键：！ +Tab

注释快捷键：Ctrl + /

代码格式化快捷键：Shift + Alt + F

自动闭合标签快捷键：输入开始标签后 按Tab


标签：<tag> </tag>

网页整体：<html>(双)

网页头部：<head>(双)

网页标题：<title>(双)

网页主体：<body>(双)

HTML骨架：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

常用标签

  1. 标题标签(双)：从<h1>到<h6>，表示不同级别的标题。(<h1>标签一般一个网页只能用一次)

  2. 段落标签(双): <p>用于创建段落。

  3. 表格标签：

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

​ 4.注释：<!--内容-->

​ 5.换行标签(单)：<br>

​ 6.水平线标签(单):<hr>

​ 7.加粗标签(双):<b> 和 <strong>

​ 8.斜体标签(双):<i> 和 <em>

​ 9.删除线标签(双):<s> 和 <del>

​ 10.下划线标签(双):<u> 和 <ins>

​ 11.上标(双):<sup>

​ 12.下标(双):<sub>

​ 13.强调标记(双):<mark>(高亮)

​ 14.图片标签(单):

<img src="url">
<img src="./casual.jpg" width="1<br>
属性 作用 说明
alt 为图片提供替代文本，当图片无法加载时显示，也用于屏幕阅读器等辅助设备。 该属性的值应该是对图片内容的简要描述，有助于搜索引擎优化（SEO）和提高网站可访问性。
title 提供关于图片的额外信息，当鼠标悬停在图片上时显示为提示文本。 虽然这个属性是可选的，但它可以为用户提供更多关于图片的上下文信息，增强用户体验。
width 设置图片在页面中显示的宽度。 可以使用像素（如 width="200"）或百分比（如 width="50%"）作为单位。如果只设置了宽度，高度会按比例自动调整。
height 设置图片在页面中显示的高度。 与 width 类似，可以使用像素或百分比作为单位。如果只设置了高度，宽度会按比例自动调整。

标签关系

父子关系（嵌套）：

<div class="container">
  <h1>标题</h1>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>
  • <div> 是 <h1>、<p> 和 <ul> 的父元素。
  • <h1>、<p> 和 <ul> 是 <div> 的子元素。
  • <ul> 是 <li> 的父元素，而 <li> 是 <ul> 的子元素。

兄弟关系（并列）：

<div class="container">
  <h1>标题</h1>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <button>按钮</button>
</div>
  • <h1>、<p> 和 <button> 都是兄弟元素，因为它们共享同一个父元素 <div>。
  • 两个 <p> 标签也是兄弟元素。

路径

相对路径

用 / 表示进入某个文件夹

用 . 表示当前文件所在文件夹

用 . .表示上一级文件夹 . . .表示上上一级文件夹

绝对路径

<img src="C:/images/hexo.jpg">
<img src="https://www.realfrog.top/image/.jpg">

超链接

跳转到其它页面

<body>
    <a href="https://www.realfrog.top">跳转到我的博客网站</a>
    <a href="./casual01.html"></a>
    <a href="./casual01.html"
       target="_blank"<!--开一个新窗口-->
       ></a>
</body>

如果不知道要跳转到哪个链接，可以先用#指代空链接

音频

<audio src="./music.mp3" controls loop></audio>
属性 作用 说明
src 用于指定音频文件的路径。 这是引用外部音频资源时必需的属性，路径可以是相对路径或绝对路径。
controls 使浏览器显示默认的音频控制界面。 控制界面包含播放、暂停、音量调节等功能，方便用户操作音频。
loop 让音频在播放结束后自动重新开始播放，形成循环播放效果。 无需用户干预，音频会不断重复播放。
autoplay 使音频在页面加载完成后自动开始播放。 许多浏览器出于用户体验考虑，对自动播放有限制，通常需用户先与页面交互。

视频

<video src="./video.mp4" controls muted></video>
属性 作用 说明
src 用于指定视频文件的路径。 这是引用外部视频资源时必需的属性，路径可以是相对路径或绝对路径。
controls 使浏览器显示默认的视频控制界面。 控制界面包含播放、暂停、音量调节、进度条等功能，方便用户操作视频。
loop 让视频在播放结束后自动重新开始播放，形成循环播放效果。 无需用户干预，视频会不断重复播放。
muted 将视频的音量设置为静音状态。 视频播放时不会发出声音，可通过 JavaScript 或控制界面取消静音。
autoplay 使视频在页面加载完成后自动开始播放。 许多浏览器出于用户体验考虑，对自动播放有限制，通常需视频处于静音状态或用户先与页面交互。