打卡HTML5+CSS3学习（1）

月亮不亮了---

已于 2022-03-14 17:07:08 修改

阅读量188

点赞数 2

分类专栏： HTML+CSS网页学习文章标签： html5 css3 visual studio code

于 2022-02-25 12:04:12 首次发布

本文链接：https://blog.csdn.net/weixin_64665051/article/details/123129876

版权

HTML+CSS网页学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

01-标题标签

<body>
    <!-- ctrl+D 选中多个 修改 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
</body>

02-段落标签

<body>
    <h1>王源</h1>
    <hr>
    <!-- ALT+Z自动换行 -->
    <!--  <br>换行<p>段落 -->
    <p>王源，2000年11月8日出生于重庆。 <br> 中国内地男歌手、演员、主持人、作家，中国内地男子演唱组合TFBOYS成员 。</p>
</body>

03-文本格式化标签

<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
    <!-- 后者表示的强调语义更强烈！ -->
</body>

04-图片标签

<body>
    <!-- ./相对路径 -->
    <!-- 一个标签可以存在多个属性，空格隔开 -->
    <!-- alt是替换文本，当图片不显示的时候显示的属性 -->
    <!-- 对于width height属性只需要给出一个值，另一个等比缩放  好处是图片不会变形 -->
    <img src="./羊.jpg" alt="这是一只羊" title="这是title属性，鼠标悬停的时候显示" width="3000">
</body>

05-相对路径

<body>
    <img src="./羊.jpg">
    <img src="羊.jpg" >
</body>

06-音频标签

<body>
    <!-- autoplay某些浏览器不会自动播放 -->
    <!-- controls显示播放的控件 -->
    <!-- loop循环播放 -->
    <!-- src音频的路径 -->
    <!-- 音频标签只支持三种格式：MP3、Mav、Ogg -->
    <audio src="./王源 - 骄傲.MP3" controls></audio>
</body>

07-视频标签

<body>
    <!-- 谷歌浏览器可以自动播放，但必须是静音模式muted-->
    <!-- controls显示播放的控件 -->
    <!-- loop循环播放 -->
    <!-- src音频的路径 -->
    <video src="./video.mp4" controls autoplay muted loop width="1000"></video>
</body>

08-链接标签

<body>
    <!-- a href:跳转地址 -->
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
    <br>
    <!-- target(目标网页的打开形式)取值—_self(默认值，覆盖原网页)_blank(在新窗口中跳转（保留原网页) -->
    <a href="01-标题标签.html">点我就去01—标题标签</a>
    <br>
    <!-- 当开发网站初期，我们不知道跳转地址的时候，href的值书写#（空链接）-->
    <a href="#">空链接，不知道往哪里去</a>
</body>

（根据哔哩哔哩黑马程序员学习笔记记录）