【HTML】标签学习

一、排版标签

1、标题标签

        <h1>1级标题</h1>

        <h2>2级标题</h2>

        <h3>3级标题</h3>

        <h4>4级标题</h4>

        <h5>5级标题</h5>

        <h6>6级标题</h6>

2、段落标签

        <p>这是一个段落</p>

3、换行标签

        <br>

4、水平线标签

        <hr>

二、文本格式化标签

1、加粗标签

    <b>加粗</b>

    <strong>加粗</strong>

2、下划线标签

    <u>下划线</u>

    <ins>下划线</ins>

3、倾斜标签

    <i>倾斜</i>

    <em>倾斜</em>

4、删除线标签

    <s>删除线</s>

    <del>删除线</del>

三、媒体标签

1、图片标签

    src 图片路径

    alt 图片不显示时显示alt的内容

    title 鼠标悬停的时候显示的内容

    width 图片宽度 height 图片高度 只设置其中一个时会等比例缩放

    <img src="./cat.jpg" alt="乖巧猫猫" title="猫~" height="100">

2、路径

2.1 绝对路径

    <img src="C:\Users\gzy\Pictures\63795393310487.png" alt="" width="200">
    <br>
    <img src="http://zhongguose.com/img/logo.png" alt="" height="200">

2.2 相对路径

    上级 ../

    上级 ./图片名

    下级 ./文件夹/图片名

    <img src="./images/dog.jpg" alt="" width="200">

3、音频标签

    src 音频路径

    controls 显示播放的控件

    autoplay 自动播放（一般不支持）

    loop 循环播放

    <audio src="H:\PR素材\克烈直播素材\克烈语音素材\胡桃语音-败在本小姐手下是你的荣幸.mp3" controls autoplay loop></audio>

4、视频标签

    src 视频路径

    controls 显示播放的控件

    autoplay 自动播放（需配合muted实现静音播放）

    loop 循环播放

    <video src="./振个刀.mp4" controls autoplay muted loop width="500"></video>

四、链接标签

1、链接标签

    target

    _self：当前页面加载。（默认）

    _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开

    <a href="https://www.baidu.com/">跳转到百度</a>
    <br>
    <a href="./cat.jpg">这是猫猫</a>
    <br>
    <a href="#">空链接</a>
    <a href="https://www.baidu.com/" target="_blank">新开一个标签页跳转</a>

五、列表标签

1、无序列表

        ul、li

2、有序列表

        ol、li

3、自定义列表

        dl、dt、dd

六、表格标签

1、表格的基本标签

        table、tr、td

2、表格的相关标签

        border、width、height

3、表格标题和表头单元格标签

        captain：表格标题，写在table下面

        th：表头单元格

4、表格的结构标签

        thead：表格头部

        tbody：表格主题

        tfoot：表格底部

5、合并单元格

        rowspan：跨行合并

        colspan：跨列合并

七、表单标签

1、input系列标签

• input type属性值为text或者password时，常用属性有①placeholder：占位符
• input type属性值为radio或者checkbox时，常用属性有①name：分组，②checked：默认选中
• input type属性值为file，常用属性有①multiple:多文件
• input type属性值为submit、reset、button，value 按钮提示文字
• 表单域标签 form：用来规定按钮实现提交、重置等功能的作用域

2、button按钮标签

type属性值为submit、reset、button

    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>

3、select下拉菜单标签

select、option

    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
        <option value="" selected>武汉</option>
    </select>

4、textarea文本域标签

cols：可见宽度

rows：可见行数

5、label标签

第一种方法：用label标签把内容包裹起来，在表单标签上添加id属性，label标签的for属性设置成对应的id属性值

第二种方法：直接使用label标签把内容和表单标签一起包裹起来，把label的for属性删除

    性别：
    <input type="radio" name="gender" id="nan"><label for="nan">男</label>
    <label><input type="radio" name="gender" id="">女</label>

八、语义化标签

1、无语义的布局标签

div 独占一行

span 不换行

2、有语义的布局标签

    <header>网页头部</header>
    <nav>网页导航</nav>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
    <footer>网页底部</footer>

九、字符实体

HTML的空格合并现象

空格：&nbsp;