Day-01 HTML 基本标签

37 阅读2分钟

1.HTML定义

  • HTML超文本标记语言 —— HyperText Markup Language
  • 超文本是什么?—— 链接
  • 标记是什么? ——标记也叫标签,带尖括号的文本

2.标签语法

image.png

3.HTML基本骨架

  • 快速生成骨架的方法: 英文!+Enter
image.png

4.标签的关系

  • 父子关系(嵌套):html和head
  • 兄弟关系(并列):head和body
<html>
    <head></head>
    <body>
        
    </body>
</html>

5.注释

  • <!--内容-->
  • 快捷键:ctrl+/

6.标题标签

  • 一般在新闻标题、文章标题、网页区域名称、产品名称
  • 标签名h1~h6
  • h1标签在一个网页中只能使用一次

特点

  • 文字加粗
  • 字号逐渐减小
  • 独占一行

7.段落标签

  • 一般用在新闻段落、文章段落、产品描述信息
  • 标签名:p

特点:

  • 独占一行
  • 段落之间存在间隙

8.换行和水平线标签

image.png

9.文本格式化标签

  • 作用:为文本添加特殊格式,以突出重点,如加粗、倾斜、下划线、删除线
  • 一般都用左边

image.png

10.图像标签

  • 作用:在网页中插入图片
  • <img src="图像的URL">
  • src用来指定图像的位置和名称,是的必须属性
  • vscode可以./开头

图像标签属性

  • 前两个掌握,后两个了解,因为图片的宽高一般用CSS设置

image.png

11.路径

相对路径

image.png

绝对路径

  • Window可以用\,其他系统是/,所以一般都用/
  • 也可以直接用网上的图片,复制图片链接就可以
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="D:\照片\壁纸图片\蓝.jpg" height="500">
    <img src="D:/照片/壁纸图片/蓝.jpg" height="500">

</body>
</html>

12.超链接标签

  • 作用:点击跳转到其他页面
  • <a href="https://www.bilibili.com/">跳转到B站</a>
  • 加一个属性target可以实现打开其他标签的同时保留原有标签
  • <a href="./09-图像标签.html" target="_blank">跳转到图像标签</a>
  • <a href="#">跳转到B站</a>,井号表示这是一个空连接,不会跳转,方便后期添加跳转页面

13.音频标签

  • HTML中属性名与属性值完全一样,可以简写为一个单词
  • <audio src = "./haha.mp3" controls loop> <audio> image.png

14.视频标签

  • 有muted属性才能写autoplay,要不然实现不了自动播放
  • <video src="./1408f909f4455bb06953c9ead7652ef0.mp4 " controls loop muted autoplay></video> image.png