前端第一次学习
一. 网页的基本框架
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
这样我们就简单搭建好骨架了，这些在web中称为标签，相信你一定注意到了其对偶的特点，但其实不一定总是如此，后面会讲到。接下来，我们会从其基本结构开始。
二.基础认知
HTML标签结构
<开始标签>内容</结束标签>
完整结构图
<开始标签 属性名 = 属性值> 内容 </结束标签>
显然，我们会注意到开始完整标签后跟了一些属性，这实际上就是"标签的属性"。
属性注意点：
1.标签的属性在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格 隔开
4.标签名与属性之间必须以“空格”隔开
5.属性之间没有顺序之分
讲完了标签自身的知识，我们自然就会想，那标签与标签呢？
当然，他们可有着室友般简单又复杂的关系
1.父子关系(嵌套关系)
<head>
<title></title>
</head>
2.兄弟关系(并列关系)
<head></head>
<body></body>
三.HTML标签学习
1.排版标签
1.1标题标签
代码:
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点：
1.文字加粗
2.文字变大，且h1—>h2文字逐一减小
3.独占一行
1.2段落标签
代码:
<p> 内容</p>
特点：
1.段落之间存在空隙
2.独占一行
1.3换行标签
代码:
<br>(注意，这就是之前提到的非对偶标签)
特点：
1.单标签
2.让文字强制换行
1.4水平线标签
代码:
<hr>(同样，这也是之前提到的非对偶标签)
特点：
1.单标签
在页面中显示一条水平线
但是，在网站中，如果只是单调的文字，未免有些枯燥，且让人难以快速发现作者想让我们看到重点，所以接下来呢，我们开始讲文本的格式化。
2.文本格式化标签的介绍
话不多说，直接上代码:
| 效果 | 代码1 | 代码2 |
|---|---|---|
| 加粗 | <strong></strong> | <b></b> |
| 下划线 | <ins></ins> | <u></u> |
| 倾斜 | <em></em> | <i></i> |
| <del></del> | <s></s> |
以上代码就是文本格式化的基本标签，你只需要选择自己喜欢的一种。
3.媒体标签
3.1图片标签 img标签（单标签）
代码：
<img src=" " alt=" " title=" " width=“” heigth=“”>
以下是其introduction：
| 属性 | 介绍 |
|---|---|
| src(source) | 用于展示图片 “ ”内放入展示图片的路径(后面会讲到路径)，故为图片的source(来源) |
| alt | 用于展示文字 若src内图片读取失败，会显示出的文字，即替换文本 |
| title | 用于展示文字 当鼠标悬停于图片时会显示出的文字(不仅适用于img标签，还有其他标签) |
| width | 图片的宽度 |
| height | 图片的高度 |
注：若只单一改 width 或 height，另一属性会相对应变化，即等比例缩放，以保证图片本身不变形。
3.2路径 src
首先，介绍一下路径，路径是用于让网站本身找到需要加入的具体内容，就好比，要知道一个物体在哪里，才能找到他。
路径分为：
1.绝对路径：一个完完全全具体准确的地址，它可以是别人问你衣服的链接，也可以是你c盘或d盘里具体一个细分到不能再细分的目录。
2.相对路径：从**“当前文件夹”**开始出发找到目标文件的过程（记住这句话）
又分为“同级目录”，“下级目录”，“上级目录”。
| 分类 | 解释 | VS快捷键 |
|---|---|---|
| 同级目录 | 目标文件和当前文件在一个文件夹中 | ./ |
| 下级目录 | 目标文件在当前文件的下级目录，即点开当前文件到下一级后才能看到 | ./ |
| 上级目录 | 目标文件在当前文件的上级目录，即返回当前文件到上一级后才能看到 | ../ |
注：当前文件为当前html文件。
3.3音频标签
代码：
<audio src=“目标路径” controls></audio>
以下是其introduction：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件，也就是控制音乐播放还是暂停 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注意：音频标签目前支持三种格式：MP3，WAV，OGG
3.4视频标签
代码：
<video src=“目标路径” controls></video>
以下是其introduction：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件，也就是控制视频播放还是暂停 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
注意：音频标签目前支持三种格式：MP4 ,WebM，OGG
4.链接标签
代码：
<a href=“目标网页” target=" " >链接名称</a>
显示特点：
1.默认文字下面又下划线
2.若从未点击过，默认文字颜色为蓝色
3.点击之后，文字显示为紫色，清楚浏览器记录可恢复蓝色
若target取值为_self，新网页会覆盖原网页
若target取值为_blank，新网页在新窗口打开，不覆盖原网页
补充：空连接
代码：
<a href=“#”>回到顶部（任意链接名）</a>
顾名思义，其作用简单就是 点击后回到网页顶部，或者是在不确定跳转位置时，用于占位置。
2806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
