二、HTML标签学习

最新推荐文章于 2024-07-25 22:24:14 发布

m0_58061685

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量17

点赞数

分类专栏： html学习文章标签：学习前端

本文链接：https://blog.csdn.net/m0_58061685/article/details/132443377

版权

html学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 排版标签

1. 标题标签

<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

2. 段落标签

<body>
    <p>这是第一段</p>
    <p>这是第二段</p>
</body>

3. 换行标签

<body>
    <p>这是 <br> 第一段</p>
    <p>这是第二段</p>
</body>

4. 水平线标签

<body>
    <h1>文章标题</h1>
    <hr>
    <p>这是 <br> 第一段</p>
    <p>这是第二段</p>
</body>

2. 文本格式化标签

标签1	标签2	说明
strong	b	加粗
ins	u	下划线
em	i	倾斜
del	s	删除线

<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
</body>

3. 媒体标签

1. 图片标签

<body>
    <!-- src属性：图片地址
        alt属性：替换文本（图片加载失败时出现）
        title属性：鼠标在图片悬停时，显示文字 
        width、hight属性：设置图片尺寸（只需设一个，另一个等比改变）-->
    <img src="./image-20230628110514475.png" alt="图片加载失败" title="这是标题图片">
</body>

2. 路径

绝对路径：通常从盘符开始的路径
相对路径：从当前文件出发找目标文件
- 同级目录：“文件名” / “./文件名”
- 下级目录：“文件夹名/文件名”
- 上级目录：…/ 返回上一级目录

<body>
   <!-- 同级目录 -->
   <img src="./image-20230628110514475.png" >
   <img src="image-20230628110514475.png" >

   <!-- 下级目录 -->
   <img src="image/image-20230628110514475.png" alt="">

   <!-- 上级目录 -->
   <img src="../图片/image-20230628110514475.png" alt="">
</body>

3. 音频标签

常见属性

属性名功能
src 音频路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

<body>
   
    <audio src="./futuristic-beat-146661.mp3" controls></audio>
</body>

4. 视频标签

<body>
    <!-- 浏览器支持使用autoplay muted使视频静音自动播放 -->
    <video src="./G.E.M.邓紫棋 - 让世界暂停一分钟.mp4" controls autoplay muted></video>
</body>

属性
- onerror：视频加载失败时，跳转到对应的方法

4.链接标签

<body>
    <!-- href：跳转地址 -->
    <!-- target：目标网页打开形式 （_self：默认，覆盖原网页；_blank：在新窗口跳转）-->

    <a href="https://www.baidu.com/?tn=59189121_5_oem_dg" target="_blank">跳转到百度</a>
    <br>
    <a href="./01.html">进入01标签</a>
    <!-- 开发初期，跳转网页不确定   空链接-->
    <a href="#">空链接</a>  
</body>