目录
网页存在固定的结构，如：整体、头部、标题、主体
网页中的固定结构是通过特定的HTML标签进行描述的
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>一些快捷键：
vscode创建HTML骨架：输入+回车
vscode运行HTML文件：Alt+B
vscode创建HTML注释：ctrl+/
查看自动换行：Alt+Z（适用于一行很多字）
1.HTML标签的结构：
<strong>文字变粗</strong>
<br>换行结构说明：
- 标签由<、>、/、英文单词或字母组成。并且把标签中的<>包括起来的英文单词或字母称为标签名
- 常见的标签有两部分组成，称之为双标签，前部分为开始标签，后部分为结束标签，两部分之间包裹内容
- 少数标签由一部分组成，称之为单标签，自成一体，无法包裹内容
2.HTML标签与标签之间的关系：
父子关系（嵌套关系）
<head>
<title></title>
</head>兄弟关系（并列关系）
<head></head>
<body></body>3.HTML各类文本标签
h系列标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>特点：
- 文字都有加粗
- 文字都有变大，并且从h1到h6逐渐减小
- 独占一行
段落标签：
<p>段落标签</p>换行标签：
<br>水平分割线标签：
<hr>文本格式化标签：（strong、ins、em、del表达的强调语义更强烈）
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>4.HTML图片标签
<img src = "jdy.jpg" alt = "图片加载失败时显示" title = "这是title文字,图片悬停时显示" width = "800" height = "500"/>
<!-- alt:替换文本，当图片不显示的时候显示 -->
<!-- width和weight属性只需要给一个值，另一个等比例缩放 -->绝对路径：指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径
相对路径（常用）：从当前文件出发找目标文件的过程
相对文件的分类：
- 同级目录：路径为jdy.jpg 或者./jdy.jpg
- 下级目录：路径为./image/san.jpg
- 上级目录：返回上一级../ 例如：../jdy.jpg
5.HTML音频标签
<audio src = "./杨宇腾YU - 水蓝色情人.mp3" controls></audio>
<!-- 加上controls可以手动播放 -->
音频标签目前支持三种格式：MP3、Wav、Ogg
6.HTML视频标签
<video src = "./心理知识分享视频.mp4" controls autoplay muted loop></video>
<!--controls:显示播放的控件 -->
<!-- autoplay:自动播放（谷歌浏览器中需要配合muted实现静音播放 -->
<!-- loop:循环播放 -->
视频标签目前支持三种格式：MP4、WebM、Ogg
7.HTML链接标签
<a href="https://www.baidu.com/">跳转到百度</a><br>
<!-- 跳转到外部链接 -->
<a href="./图片标签.html">跳转到链接</a><br>
<!-- 跳转到自己的文件 -->
<a href="#">空链接</a>
<!-- 当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空链接） -->
链接标签的target属性
属性名：target
属性值：目标网页的打开形式
_self：默认值，在当前页面跳转（覆盖原网页）
_blank:在新窗口跳转（保留原网页）
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a><br>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
