这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

一、本次笔记的重点内容：

HTML 基础标签使用
HTML 属性值的认识与使用

二、详细知识点介绍：

1.常用标签介绍

    <h1>一级标题</h1>
    <h2>二级标题（总共6级）</h2>
    <a href=""></a> <!-- a标签 -->
    <img src="" alt=""> <!-- 图片 -->
    <dl>
        <dt>
            <dd>
                <!-- 列表标签 -->
            </dd>
        </dt>
    </dl>
    <ul> </ul> <!-- 无序列表 -->
    <ol> </ol> <!-- 有序列表 -->
    <table></table><!-- 表格 -->
    <audio src=""></audio>  <!-- 音频 -->
    <video src=""></video>  <!-- 视频 -->

2.一些标签的属性值详细介绍

a标签

1. a标签：跳转链接

2. href：要跳转的网址

3. target：设置页面跳转方式

4. _self: 当前页面打开

5. _blank: 重新打开新页面

跳转锚点：

1. href="#+id属性(名称)"

2. href="#+name属性（名称）"（必须时两个a标签配合）

table标签

1. table:定义表格的外层容器先有行再有列

2. caption：表格的标题

3. tr：表格的行

4. th：表格的列，表头

5. td：列

音频与视频标签

1. audio：音频

2. scr：音频的路径

3. controls ：控制，用来显示音频和视频的控件

4. video：视频

音频视频都有的属性：

1. loop：循环属性

2. muted：静音属性

3. autoplay：自动播放，chrome以上66不支持自动播放

4. preload：预加载

5. auto：自动加载

6. none：不提前加载

7. metadata：提前加载元数据（名称，时长等基本信息）

只有视频有的属性

1. Poster：视频播放前显示图片

三、实践练习例子：

1.h1到h6标签

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

2.有序标签和无序标签

     <ul> <!-- 无序列表 -->
        <li>苹果🍎</li>
        <li>香蕉🍌</li>
    </ul>
    <ol> <!-- 有序列表 -->
        <li>苹果🍎</li>
        <li>香蕉🍌</li>
    </ol>

3.a标签

 <a href="http://baidu.com" target="_blank">打开新的页面并跳转至百度</a>

4.img标签

<img src="./image/路飞.webp" alt="">

img的大小由初始图片大小决定，可以通过css进行调整
src的路径可以是绝对路径，也可以是相对路径，这边使用的是相对路径

5.table标签

<table border="1px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

这是一个3*3的带边框的表格

还有音频和视频标签留给大家回去尝试

四、总结：

以上就是学习html记录的笔记啦，虽然只是一些常用的html标签以及用法并没有什么难点，但也希望可以帮助一些前端小白

希望大家可以多去尝试并使用，开始自己愉快的前端之旅！

如有错误欢迎指正！

前端与HTML | 青训营笔记