HTML的一些基本标签

L_X_zhao

已于 2024-06-13 21:51:28 修改

阅读量261

点赞数 3

文章标签： html

于 2024-06-13 21:50:30 首次发布

本文链接：https://blog.csdn.net/L_X_zhao/article/details/139664316

版权

HTML

一、创建一个HTML文件

首先在vscode中创建一个文件夹，在文件夹中创建一个以.html结尾的文件，那么就可以书写，html文件啦。

我们可以使用英文状态下的！号来快速创建HTML文件的基本框架

<!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>
    
</body>
</html>

接下来就可以尽情的书写代码啦！

二、HTML基本标签

（1）标题标签

从h1到h6标题标签大小逐级递减，都有默认的加粗样式，且一个页面中h1只存在一个，一般用来做logo使用。

    <h1>部落冲突启动</h1>
    <h2>部落冲突启动</h2>
    <h3>部落冲突启动</h3>
    <h4>部落冲突启动</h4>
    <h5>部落冲突启动</h5>
    <h6>部落冲突启动</h6>

（2）段落标签

p标签，用于文本分段，单个p标签独占一行，结尾强制换行

（3）快捷样式标签

-- 给文字加粗

<ins> -- 给文本添加下划线

-- 将文本倾斜

<del> -- <s> 给文本添加下划线

（4）a标签

一般可用于页面跳转，点击下载操作，高阶用法锚点链接，配合id使用

<body>
    <a href="./index.html"></a>
    <a href="#one">跳转到本人的喜欢</a>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p id="one">部落冲突，全面开战,本人就喜欢完部落冲突</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
    <p>部落冲突，全面开战</p>
</body>

（5）img标签

用于在页面中添加图片，src中填写照片的相对路径，绝对路径一般不推荐使用；alt中当用户加载不出来图片资源时，提示用户信息。

<body>
    <p>你说过永远不会让我伤心，我信了~</p>
    <img src="./image/01.jpg" alt="图片加载失败" title="你的婚礼" width="400px">
</body>

（6）列表

1、无序列表

ul和li配合使用，特点：没有顺序，且每个li标签的文本内容前面都会有一个默认的小黑点

    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>香蕉</li>
    </ul>

2、有序列表

ol和li配合使用，特点: 有顺序，且每个li标签的文本内容前面都会出现一个默认的有顺序的数字。

    <ol>
        <li>校长</li>
        <li>老师</li>
        <li>学生</li>
    </ol>

3、自定义列表

dl、dt和dd组合而成，特点：dt中是作为dd的标题提示，有错落感。

    <dl>
        <dt>计本2101班</dt>
        <dd>班长</dd>
        <dd>学委</dd>
        <dd>纪委</dd>
        <dd>团支书</dd>
    </dl>

（7）表单

用form作为表单的容器，里面可填写各种各样的表单元素，其中method属性可以设置表单的提交方式，其中如果想要实现单选框的单项选择，则需要对一组单选框设置相同的name值，，复选框也相同。

    <form action="" method="post">
        账号：<input type="text" name="zhanghao"><br>
        密码: <input type="password" name="mima"><br>

        <input type="radio" name="zimu" value="a">a
        <input type="radio" name="zimu" value="b">b
        <input type="radio" name="zimu" value="c">c
        <input type="radio" name="zimu" value="d">d <br>

        <input type="checkbox" name="zifu" value="a">a
        <input type="checkbox" name="zifu" value="b">b
        <input type="checkbox" name="zifu" value="c">c
        <input type="checkbox" name="zifu" value="d">d <br>

        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>