前端第一次学习
一. 网页的基本框架
<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>
顾名思义,其作用简单就是 点击后回到网页顶部,或者是在不确定跳转位置时,用于占位置。