HTML入门基础标签（结构标签，文本标签，特殊字符转义标签，多媒体标签）

小萌新上大分

于 2022-08-10 08:28:22 发布

阅读量314

点赞数 1

分类专栏：前端文章标签： html 基础标签 img标签 audio标签 Html特殊字符

本文链接：https://blog.csdn.net/m0_64365315/article/details/126247125

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

HTML(HyperText Markup Language)：超文本标记语言：

HTML(HyperText Markup Language)：超文本标记语言：

超文本：

超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。

标记语言：

由标签构成的语言

W3C标准：

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

结构：对应的是 HTML 语言

表现：对应的是 CSS 语言

行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

结构标签

基础标签

<!--html5标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
</head>
    <body>
        <h1>我是h1标签</h1>
        <h2>我是h2标签</h2>
        <h3>我是h3标签</h3>
        <h4>我是h4标签</h4>
        <h5>我是h5标签</h5>
        <h6>我是h6标签</h6>
    <hr>
    <P > 新的段落 </P>
        <!--  html 颜色标识
              1： 英文单词：red，blue
              2:rgb(值1，值2，值3) 值的取值范围0到255 
              3：#值1值2值3：值的范围：00到FF
              -->
    <font face="楷体" size="10" color="red"> 简单字体格式优化</font>
    <center> 水平居中</center>
    <i> 倾斜 并换行</i> <br>
    <b>  加粗 并换行</b> <br>
    <u> 下划线并换行</u><br>
    </body>
</html>

显示效果

特殊字符

图片，音频，视频

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片音频视频标签应用</title>
</head>
<!--    资源路径
        1：绝对路径：完成路径  具体到盘符，或者网页连接
        2：相对路径:相对位置关系
        在同级目录下可以直接写  ./文件名，或者省略 直接写文件名
        在同级目录的文件夹   ./文件夹名/文件名
        在上一级目录下， ../退一级/文件夹名/文件名<img src="../test/pi2.jpg">
        -->

<!--      尺寸单位
        1：px：像素(默认)
        2：百分比-->

  <body>
        <img src="pi.jpg" width="355" height="632" >
        <audio src="mu.mp3" controls></audio>
        <video src="vi.mp4"  width="300" height="300" controls></video>
  </body>
</html>

效果

img：定义图片

src：规定显示图像的 URL（统一资源定位符） height：定义图像的高度 width：定义图像的宽度

audio：定义音频

支持的音频格式：MP3、WAV、OGG src：规定音频的 URL controls：显示播放控件

video：定义视频

支持的音频格式：MP4, WebM、OGG src：规定视频的 URL controls：显示播放控件

路径问题

1：绝对路径：完成路径具体到盘符，或者网页连接
2：相对路径:相对位置关系
在同级目录下可以直接写 ./文件名，或者省略直接写文件名
在同级目录的文件夹 ./文件夹名/文件名
在上一级目录下， ../退一级/文件夹名/文件名

尺寸单位：

height属性和width属性有两种设置方式：

像素：单位是px

百分比占父标签的百分比：例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

小萌新上大分

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML入门基础标签（结构标签，文本标签，特殊字符转义标签，多媒体标签）

src：规定显示图像的 URL（统一资源定位符） height：定义图像的高度 width：定义图像的宽度支持的音频格式：MP3、WAV、OGG src：规定音频的 URL controls：显示播放控件支持的音频格式：MP4, WebM、OGG src：规定视频的 URL controls：显示播放控件。......
复制链接

扫一扫