0
点赞
收藏
分享

微信扫一扫

入门初学者一定要了解的HTML标签(1)

小亦同学321 2022-03-23 阅读 87
前端html5

一、排版标签

1.标题标签

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

快捷更改:ctrl+d

特点:字体设置大小和加粗、独占一行、上下有距离

2.段落标签

<p></p>

特点:段落之间存在间隙、独占一行、文字一行放不下会自动换行

3.换行标签

<br>

特点:单标签、让文本强制换行、没有明显的间隙

4.水平线标签

<hr>

特点:单标签、在页面显示一条水平线

二、文本格式化标签

场景:文字加粗、下划线、倾斜、删除线等效果

b 加粗

strong 加粗

u 下划线

ins 下划线

i 倾斜

em 倾斜

s 删除线

del 删除线

语义:突出强调

标签语义化

根据语义选择正确的标签

特点:方便理解记忆、便于解析,方便搜索引擎化

三、媒体标签

图片标签

<img src="./1.jpg " alt="替换文本 " title="提示文本">

特点:单标签、显示对应的效果需要设置标签属性

同级的情况下直接写图片名称

属性名:alt

属性值:替换文本,图片没出来文本告知

特点:图片加载失败时才会显示alt属性值,图片加载成功则不会显示alt属性值

属性名:title

属性值:鼠标触碰显示的内容

特点:不仅仅可以用于图片标签,还可以用于其他标签

图片常见属性

 四、路径

相对路径

从当前文件开始出发找目标文件的过程

1、./同级

2、../上一级

3、文件名或文件夹名为开头

同级目录:直接写:目标文件名字!

下级目录:直接写:文件夹名/目标文件名字!

上级目录:直接下:../目标文件名字!

绝对路径

目录下的绝对位置,可直接到达目标位置

1.从盘符开始的路径

2.完整的网络地址

五、音频标签

<audio src="images/music.mp3" controls autoplay muted loop></audio>

audio:音频标签

src:引入路径

controls:控制器

autoplay :自动播放(需要和静音连用 谷歌不支持)

muted :静音

loop:循环播放

注意点:

音频标签是HTML5中新增标签,老版本浏览器无法识别(兼容性问题)

音频标签目前支持三种格式:MP3、Wav、Ogg

六、视频标签

<video src="./video.mp4" controls></video>

常见属性:

src:指定播放视频的路径

controls:显示播放视频的控件(该属性属性值可省略)

autoplay:视频加载完毕会自动播放(拓展:在谷歌浏览器中可以配合muted属性实现自动静音播放)

loop:当视频结束时重新开始播放(了解)

注意点:

视频标签是HTML5中新增标签,老版本浏览器无法识别(兼容性问题)

视频标签目前支持三种格式:MP4, WebM, 和 Ogg

七、链接标签

a标签是anchor的简写

作用:进行页面跳转

<a href="#"></a>

空链接:回到页面顶部

特点:

双标签,内部可以包裹内容

如果需要a标签点击之后去指定页面,需要设置a标签的href属性

属性名:href

属性值:目标网页的路径(点击之后跳转去哪一个网页)

外部链接:href属性中写网页的路径

内部链接:直接在href属性中写文件路径(./或../)

显示特点(了解):

a标签从未点击过,默认文字显示蓝色

a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)

a标签默认文字有下划线

链接标签的target属性

作用:打开网页的形式

_self:默认值,在当前窗口中跳转(会覆盖原网页)

_blank:在新窗口中跳转(原网页保留)

以上是HTML标签的第一部分解析,适合入门的初学者

举报

相关推荐

0 条评论