html从零开始1【搬代码】-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52001174/article/details/136063103

本文详细介绍了HTML中的各种基本元素，包括标题标签（h1-h6）、换行与水平线、段落(p)、图片(img)、链接(a)、文本格式化(如em,b,i,strong,del)，以及列表(有序和无序)和表格(table,td,tr)的使用方法，展示了HTML结构和CSS样式的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签和表格简单元素表示

<!DOCTYPE html><!---避免浏览器的怪异模式--->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <!--快捷键：h$*6-->
    <h1 align="left">一级标题</h1><br>
    <h2 align="center">二级标题</h2><br>
    <h3 align="right">三级标题</h3><br>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    段落（P）
    换行（br）
    水平线（hr）
    <p>p段落标签</p><br>
    <p>br是换行标签</p>
    <hr color="red" width="300" size="20" align="left">
    <hr color="red" width="300" size="20" align="center">
    <hr color="red" width="300" size="20" align="right">

    <p>图片标签</p>
    <p><img src="1.png" alt="图片不对的时候会显示" title="鼠标悬停提示" width="500" height="400"></p>
    <p><img src="2.jpg" alt="图片不对的时候会显示" title="鼠标悬停提示" width="500" height="400"></p>
    <p><img src="D:\Ruanjian\VScode\htmlfile\2.jpg" alt="图片不对的时候会显示" title="鼠标悬停提示绝对路径" width="500" height="400"></p>

    <p>超文本链接</p>
    <a href="http:\\wwww.baidu.com">百度超文本连接</a>
    <a href="http:\\wwww.baidu.com">
        <img src="1.png" alt="不显示图片时提示该文字" title="悬停时显示为百度超文本连接" width="200" height="50">
    </a><br>
    <em>定义着重文字</em><br>
    <b>定义粗体文本</b><br>
    <i>定义斜体字</i><br>
    <strong>定义加重语气</strong><br>
    <del>定义删除文字</del><br>
    <span>元素没有特定含义</span><br>
    <p>有序列表</p>
    <ol type="1">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ol>
    <ol type="A">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ol>
    <ol type="a">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ol>
    <ol type="i">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ol>
    <ol type="I">
        <li>水果
            <ol>
                <li>苹果</li>
                <li>苹果2</li>
            </ol>
        </li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ol>

    <p>无序标签，快捷键输入：ul>li*2</p>
    <ul type="disc">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ul>
    <ul type="circle">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ul>
    <ul type="square">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>大米</li>
    </ul>
    <ul type="none">
        <li>评估</li>
        <li>香蕉</li>
        <li>梨子
            <ul>
                <li>大</li>
                <li>甜</li>
            </ul>
        </li>
        <li>大米</li>
    </ul>
    <p>table,td,tr，快捷键：table>tr*2>td</p>
    <table border="1" width="200" height="100">
        <tr>
            <td>表格</td>
            <td>头一行</td>
        </tr>
        <tr>
            <td>表格</td>
            <td>第二行</td>
        </tr>
    </table>

    <p>合并单元格,合并单元格6.7，14.19</p>
    <table border="1">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td rowspan="2">单元格14</td>
            <td>单元格15</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格20</td>
        </tr>
        <tr>
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格23</td>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>
</body>
</html>