02-HTML标签学习

目录

一、排版标签

1)标题标签

2)段落标签

 3)换行标签

4)水平线标签

二、文本格式化标签

三、媒体标签

1)图片标签

2)路径

3)音频标签(目前支持MP3、Wav、Ogg)

4)视频标签

四、链接标签

五、综合案例

1)招聘

2)跳转

一、排版标签

(标题标签、段落标签、换行标签、水平线标签)

1)标题标签

        1.文字都加粗

        2.文字都有变大,从h1至h6逐渐减小

        3.独占一行

        4.h系列标签

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

        

        5.ctrl+D(替换)

2)段落标签

        1.段落之间有间隙且独占一行

        2.<p>一段文字</p>

    <p>我是第一段</p>
    <p>我是第二段</p>
    <p>我是第三段</p>

 3)换行标签

        1.文字强制换行显示

        2.<br>

    <p>我是第一段 这里换行了吗</p>
    <p>我是第二段</p>

    <p>我是第一段 <br>这里换行了吗</p>
    <p>我是第二段</p>

                         

4)水平线标签

        1.页面中显示一条水平线

        2.<hr>

                 

                  

二、文本格式化标签

(加粗、下划线、倾斜、删除线)

标签1标签2说明
bstrong加粗
uins下划线
iem倾斜
sdel删除线
    <b>加粗1</b>    <strong>加粗2</strong><br>
    <u>下划线1</u>  <ins>下划线2</ins><br>
    <i>倾斜1</i>    <em>倾斜2</em><br>
    <s>删除线1</s>  <del>删除线2</del>

三、媒体标签

(图片标签、路径、音频标签、视频标签)

1)图片标签

        <img src="" alt="">

<img src="./小black羊.gif" alt="这是一只小黑🐏" title="小羊酱">

        1.src:标签属性(./: 当前文件夹

属性注意点:
1.标签属性写在开始标签内部
2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名和属性之间必须以空格隔开
5.属性之间没有顺序之分

        2.alt:替换文本(当图片加载失败时,才显示alt文本)

           

        3.title:提示文本(鼠标悬停时显示的文本)

        

        4.width和height(若只设置其中一个,会自动等比例缩放)

2)路径

(绝对路径、相对路径)

        1.绝对路径:通常是从盘符开始的路径

        2.相对路径:从当前文件开始出发找目标文件的过程(常用)

                ·同级目录:当前文件和目标文件在同一目录中

                        方法一:<img src="目标图片.gif">

                        方法二:<img src="./目标图片.gif">

                ·下级目录:目标文件在下级目录中

                        <img src="文件夹/目标图片.gif">

                ·上级目录

                        <img src="../目标图片.gif">

3)音频标签(目前支持MP3、Wav、Ogg)

        <audio src="./music.mp3" controls></audio>

        1.常见属性

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

4)视频标签

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

属性名功能
src视频的路径
controls显示播放的控件
autoplay自动播放(谷歌配合静音muted使用)
loop循环播放

四、链接标签

(又称a标签、超链接、锚链接)

        <a href="./目标网页.html">超链接</a>

        1.当开发网站初期,还不知道跳转地址时,hred的值书写#(空链接)

        2.target:控制目标网页的打开形式

        <a href="./目标网页.html" target="_blank">超链接</a>

取值效果
_self默认值 在当前窗口中跳转(覆盖原网页)
_blank在新窗口中跳转(保留原网页)

五、综合案例

1)招聘

<body>
    <h1>腾讯科技高级web前端开发岗位</h1>
    <hr>

    <h2>职位描述</h2>

    <p>负责重点项目的前端技术方案和架构的研发和维护工作</p>

    <h2>岗位要求</h2>

    <p>5年以上前端开发经验, <b>精通html5/css3/javascript等</b> web开发技术;</p>
    <p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
    <p>代码风格严谨,能高保真还原设计稿,能兼容各种浏览器;</p>
    <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
    <p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
    <p>责任心强,思路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</p>

    <h2>工作地址</h2>

    <p>上海市-徐汇区-腾云大厦</p>
    <img src="./腾云大厦地图.png" height="270" alt="腾云大厦地图" title="腾云大厦">

</body>

2)跳转

index

<body>
    <h1>今日搜索热词</h1>
    <hr>

    <h2>1.左手右手</h2>

    <p>很好听的歌,巴拉巴拉巴拉巴拉。音频示例:<a href="./左手右手.html" target="_blank">左手右手</a></p>

    <h2>2.可爱小猫</h2>

    <p>可爱小猫,巴拉巴拉巴拉巴拉。视频示例:<a href="./可爱小猫.html" target="_blank">可爱小猫</a></p>

</body>

左手右手

<body>
    <h1>左手右手</h1>
    <hr>
    <h2>歌曲</h2>
    <audio src="./左手右手.mp3" controls></audio>
</body>

可爱小猫

<body>
    <h1>可爱小猫</h1>
    <hr>
    <h2>视频</h2>
    <video src="./cat-eat.MP4" controls height="400"></video>
</body>

                       

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

biank trrrry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值