HTML学习笔记|基本用法与超链接

标签

在HTML中,标签是组成HTML的基本语法。通常使用<>括起,而在尖括号中输入不同的代码就可以实现不同的效果。

基本框架

<html>
    <head>
        <title>网站标题</title>
    </head>

    <body>

    </body>
</html>

以上代码为HTML的基本框架,所有代码都会放在<html></html>标签中,而<head></head>标签中则存放給浏览器看的数据,比如CSS;<body></body>标签则存放给用户看的信息,例如图片,视频等。(在vscode中输入!+Enter可快速搭建框架)

注释

HTML中使用<!-- 注释内容 -->来进行注释。<!-- -->并非单行注释,只需要把注释内容放在<!--和-->之间就可以实现跨行注释。

标题

在HTML中共有6级标题,分别使用h1,h2,h3,h4,h5,h6来表示,其效果如图:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

 从上图我们可以看到,标题都为粗体字,并且字体随着标题级数增大而减小。

段落

在HTML中使用<p></p>表示段落,其特点为:

独占一行

段落与段落之间有两个换行符(也就是段落与段落之间还会空着一行)

水平线标签

水平线标签<hr>可以实现在 文字之间家伙是那个一个类似于分割线的效果:

 文本格式化标签

我们在写段落文字时,通常需要对文字进行“格式化”,比如:加粗,倾斜,下划线等等。这是我们就可以使用文本格式化标签实现我们想要的效果。常见的文本格式化标签如表格:

文本格式化标签
标签名效果
strong加粗
em倾斜
ins下划线
del删除线

 路径

如果我们想要引入一个文件,比如:一张图片,一段视频,一段音频等等,我们就要使用路径来告诉程序我们想要加入的文件位置。

路径分为相对路径和绝对路径。

相对路径就是从当前文件开始寻找,我么通常使用 ./ 表示本级文件夹中的文件,../ 表示上级文件夹中的文件。

绝对路径则是从盘符开始寻找,例如:c:/website/img/photo.jpg。在上面的绝对路径中程序便会在c盘进入website文件夹,再进入img文件夹中找到photo.jpg文件。

超链接标签

在我们的网页中通常会有点击文字实现跳转到另外一个页面的效果,这就是使用超链接来实现的。下面是一个例子:

<a href = "https://www.baidu.com/">百度</a>

 在你点击“百度”后,浏览器就会自动在当前窗口打开百度的首页,如果想要让浏览器再新页面打开网址就可以在简括后后面写上 target = "_blank" 。同样的,如果你想打开的不是一个网址而是一张图片或一段视频,那么只需要在href后面输入文件的路径就好了。

图片标签

想要在HTML中插入一张图片则可以使用图片标签:

<img src="图片路径" alt="替换文本" title="提示文本">

其中 alt 为图片无法加载时的替换文字,title 为鼠标悬停在图片上出现的文字。

音频标签和视频标签

<!--音频标签-->
<audio src="音频路径" controls loop>

<!--视频标签-->
<vedio src="视频路径" controls loop muted>

在上面的标签中 controls 表示显示控制面板 loop 表示循环播放,而在食品标签中的 muted 表示静音播放。 这些属性与前面的 src 属性不同的是他们并没有等号。这是因为在HTML5中,在等号后面的内容与属性相同时,可以省略。因此 controls 属性的完整写法应该是 controls = "controls".

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值