HTML学习笔记 (一)-CSDN博客

本文链接：https://blog.csdn.net/2402_82857752/article/details/147196397

文章目录

HTML学习笔记 (一)

HTML学习笔记 (一)

HTML基本骨架

在VS Code中.html后缀的文件中!加Enter和Tab键可以快速生成HTML基本骨架

<html> <!--包裹的为整个网页-->
  <head> <!--网页头部，存放给浏览器看的代码，如CSS-->
    <title>网页标题</title> <!--网页标题-->
  </head>
  <body> <!--网页主体，存放给用户看的代码，如图片、文字-->
    网页主体
  </body>
</html>

在VS Code中添加和删除注释的快捷键Ctrl/command+/

标题标签

一共有h1-h6六个级别的标签

<h1>一级标题</h1>
<h2>二级标题</h2>

段落标签

<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一
  个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这
  是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这
  是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
</p>
<p>
  这是一个段落这是一个段落这是一个段落这是一个段落这是一
  个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这
  是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这
  一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
</p>

段落自成一行,并且段落之间会有间隔

换行和水平线标签

<br> <!--换行标签-->
<hr> <!-- 水平线标签 -->

文本格式化标签

下面每种文本格式化会给出两种实现方式, 在实际运用的时候常使用上面的那种

<strong>这是加粗文本</strong>
<b>这是加粗文本</b>
<br>
<!-- 倾斜 -->
<em>这是倾斜文本</em>
<i>这是倾斜文本</i>
<br>
<!-- 下划线 -->
<ins>这是下划线文本</ins>
<u>这是下划线文本</u>
<br>
<!-- 删除线 -->
<del>这是删除线文本</del>
<s>这是删除线文本</s>

图像标签

<!-- 格式：<img src="图片的URL"> -->
<!-- src 用于指定图像的位置和名称，是<img>的必须属性 -->
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/iaOFdmeX4GO5GEVV4iaiby2ngJaB8I8Wa6LVmwOuXyqD4oVpJjG6iaxS6pSvPiaAMTAKGN4aBfbf3KYyQ7QYznTzKdg/640?wx_fmt=jpeg&amp;from=appmsg">
<br>
<!-- 属性 -->
<!-- alt 作用：替换文本，在图片无法显示的时候显示的文字 -->
<!-- title 作用：提示文本，鼠标悬停在上面的时候显示文字 -->
<img src="1" alt="这是1" title="这是1">
<br>
<!-- width 作用：图片的宽度 -->
<!-- height 作用：图片的宽度 -->
<!-- 浏览器默认是等比缩放 -->

超链接标签

<!-- 格式：<a href="链接的URL">链接的文本</a> -->
<!-- href 用于指定链接的位置和名称，是<a>的必须属性 -->
<a href="https://www.baidu.com">百度</a>
<br>
<!-- target 作用：指定在何处打开链接 -->
<!-- _blank 在新窗口打开 -->
<a href="https://www.baidu.com" target="_blank">百度</a>
<br>
<!-- title 作用：提示文本，鼠标悬停在上面的时候显示文字 -->
<a href="https://www.baidu.com" title="百度">百度</a>
<br>

开发过程中不知道超链接跳转地址，href 属性值写#，表示空链接，不会跳转

音频标签

<!-- 格式：<audio src="音频的URL" controls></audio> -->
<!-- src 用于指定音频的位置和名称，是<audio>的必须属性 -->
<!-- controls 作用：显示音频播放器 -->
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls></audio>
<br>
<!-- autoplay 作用：自动播放音频 -->
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls autoplay></audio>
<!-- 浏览器都会禁用自动播放 -->
<br>
<!-- loop 作用：循环播放音频 -->
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls autoplay loop></audio>
<br>
<!-- preload 作用：预加载音频 -->
<!-- none 不预加载 -->
<!-- auto 预加载 -->
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls autoplay loop preload="none"></audio>
<br>

视频标签

<!-- 格式：<video src="视频的URL" controls></video> -->
<!-- src 用于指定视频的位置和名称，是<video>的必须属性 -->
<!-- controls 作用：显示视频播放器 -->
<video src
="https://www.runoob.com/try/demo_source/movie.mp4" controls></video>
<br>
<!-- autoplay 作用：自动播放视频 -->
<video src
="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay></video>
<br>
<!-- muted 作用：静音 -->
<video src
="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay muted></video>
<!-- 浏览器支持在静音状态自动播放，想要自动播放必须要有 muted -->
<br>
<!-- loop 作用：循环播放视频 -->
<video src
="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay loop></video>
<br>
<!-- preload 作用：预加载视频 -->
<!-- none 不预加载 -->
<!-- auto 预加载 -->
<video src
="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay loop preload="none"></video>
<br>

锚点

<!-- 创建目标锚点 -->
<h2 id="section1">第一部分</h2>
<p>这里是第一部分的内容。</p>
<!-- 跳转到指定锚点 -->
<a href="#section1">跳转到第一部分</a>
<br>