标签
在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".