一篇让你速成HTML

久随818

已于 2024-07-12 09:10:25 修改

阅读量831

点赞数 9

文章标签： html 前端

于 2024-07-10 22:00:13 首次发布

本文链接：https://blog.csdn.net/qq_64184032/article/details/140334561

版权

一.html简单标签

h1-h6：标题标签

p：段落标签，自动换行，间距样式

div：块标签，自动换行，页面布局

span：间隔标签，个性化样式设置

hr：水平线

br：换行

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

    <p>段落标签</p>

    <div>块标签</div>
    <div>布局标签</div>
    <br>
    <span>间隔标签</span>

    <hr>

二.个性化标签

strong和b——字体加粗

em和i——字体倾斜

u——下划线

del——删除线

sub——下标标签

sup——上标标签

ruby--rt——上标签

progress和meter——进度条

    <strong>加粗标签</strong>
    <b>加粗标签</b>
    <em>倾斜标签</em>
    <i>倾斜标签</i>
    <u>下划线</u>
    <del>删除线</del>
    h<sub>a</sub>v
    9<sup>2</sup>
    <ruby>内容<rt>nrirong</rt></ruby>
    <progress value="20" max="100"></progress>
    <meter value="80" max="100"></meter>

三.列表标签

ul>li——无序标签，自动缩进，自动生成圆点

ol>li——有序标签，自动缩进，自动生成序号

dl>dt——没有缩进

dl>dd——自动缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <!--列表标签-->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ol>
        <li>q</li>
        <li>a</li>
        <li>z</li>
        <li>x</li>
        <li>s</li>

    </ol>

    <dl>
        <dt>hu</dt>
        <dt>li</dt>
        <dt>wang</dt>
        <dt>chen</dt>
        <dt>ai</dt>
    </dl>

    <dl>
        <dd>yi</dd>
        <dd>xiang</dd>
        <dd>he</dd>
        <dd>xi</dd>
        <dd>ni</dd>
    </dl>
</body>
</html>

四.表格标签

table--属性：border边框，width宽度，height高度，cellspacing边框间隙，align位置属性

th--属性：align位置属性

tr--属性：align位置属性

td--属性：align位置属性，colspan左右合并，rowspan上下合并

    <table border="1" width="50%" height="600" cellspacing="0" align="center">
        <tr>
            <th colspan="4">学生信息</th>
        </tr>
        <tr align="center">
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>总人数</th>
        </tr>
        <tr align="center">
            <td>王五</td>
            <td>男</td>
            <td>22</td>
            <td rowspan="3">3</td>
        </tr>
        <tr align="center">
            <td>刘七</td>
            <td>女</td>
            <td>25</td>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>男</td>
            <td>28</td>
        </tr>
    </table>

五.媒体标签

a--超链接：href-目标地址。有外部链接和内部链接

target--属性：_self——当前页面打开

target--属性：_black——新的页面打开

img图片：src-指向链接的图片地址，有外部地址和内部地址

width宽度，height高度，alt提示语

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./1.简单标签.html" target="_blank">
    <img src="./image/1.webp" alt="图片丢失" width="500" height="500" >
    </a>
    <img src="./image/2.webp" alt="图片丢失" width="500" height="1000">
</body>
</html>

audio音频：src-带播放的音乐文件的目标地址，有外部链接但大部分是内部链接

controls-播放器的控制按钮

video视频：src-目标地址，有外部地址和内部地址

width-设置播放器的宽度

height-设置播放器的高度

contrils-播放器的控制按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="./yinyue/1.mp3" controls></audio>
    <br>
    <br>
    <br>
    <video src="./shipin/mda-qe066hqzj8iv4wjw.mp4" controls></video>
    <br>
    <br>
    <br>
    <video src="https://vdept3.bdstatic.com/mda-qf86874js255agki/cae_h264/1718007964954836684/mda-qf86874js255agki.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1719834140-0-0-a55693729cd7f95409ddd75158299af5&bcevod_channel=searchbox_feed&cr=0&cd=0&pd=1&pt=3&logid=2540488862&vid=9667164270129610062&klogid=2540488862&abtest=101830_1-102148_1-17451_2-3000185_2" controls></video>
    <br>
    <br>
    <br>
</body>
</html>

六.框架标签

iframe——页面的嵌套子页面：

src--指向子页面的内容

width--宽度

height--高度

frameborder--子页面的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一个页面</p>
    <iframe src="./6.音频和视频.html" width="500" height="500"></iframe>
</body>
</html>