1.HTML定义
- HTML超文本标记语言 —— HyperText Markup Language
- 超文本是什么?—— 链接
- 标记是什么? ——标记也叫标签,带尖括号的文本
2.标签语法
3.HTML基本骨架
- 快速生成骨架的方法: 英文!+Enter
4.标签的关系
- 父子关系(嵌套):html和head
- 兄弟关系(并列):head和body
<html>
<head></head>
<body>
</body>
</html>
5.注释
<!--内容-->- 快捷键:ctrl+/
6.标题标签
- 一般在新闻标题、文章标题、网页区域名称、产品名称
- 标签名h1~h6
- h1标签在一个网页中只能使用一次
特点
- 文字加粗
- 字号逐渐减小
- 独占一行
7.段落标签
- 一般用在新闻段落、文章段落、产品描述信息
- 标签名:p
特点:
- 独占一行
- 段落之间存在间隙
8.换行和水平线标签
9.文本格式化标签
- 作用:为文本添加特殊格式,以突出重点,如加粗、倾斜、下划线、删除线
- 一般都用左边
10.图像标签
- 作用:在网页中插入图片
<img src="图像的URL">- src用来指定图像的位置和名称,是
的必须属性
- vscode可以./开头
图像标签属性
- 前两个掌握,后两个了解,因为图片的宽高一般用CSS设置
11.路径
相对路径
绝对路径
- 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>
14.视频标签
- 有muted属性才能写autoplay,要不然实现不了自动播放
<video src="./1408f909f4455bb06953c9ead7652ef0.mp4 " controls loop muted autoplay></video>