Akemi

前端入门--HTML基础标签

2024/12/30

基础标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<!-- 这是一个注释，!DOCTYPE用以说明是htlm文档 -->

<!-- html是html的根元素 -->
<html>
<body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <p>这是一个段落</p>
        <strong>这是一段很重要的内容,使用strong标签(特别加粗)</strong><br/>
        <b>这是一段很重要的内容,使用b标签(普通加醋)</b><br/>
        <i>这段内容是斜体,使用i标签</i><br/>
        <!-- 这是一个图片 -->>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度logo"><br/>
        使用br标签进行换行<br/>
        <a href="https://www.baidu.com">使用href标签跳转超链接</a><br/>
        <br/>
        <a href="https://www.baidu.com" target="_blank">
        使用target跳转超链接,并从空白页打开</a><br/>
        <a href="https://www.baidu.com">
        使用target跳转超链接,并从当前页打开</a><br/>
        <br/>
        <b>图片标签</b><br/>
        使用img标签插入图片,src指定图片的地址<br/>
        alt参数是当图片无法显示时显示的文字<br/>
        border是否显示图片的边框(默认无边框)<br/>
        wideth指定图片的宽度,height指定图片的高度<br/>
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="111" border="1" width="100" height="200"><img><br/>
        <br/>
        <a href="mailto:1320991378@qq.com" target="_blank">使用链接发送邮件</a><br/>
        <a href="tel:+8615157551349">使用链接拨打电话</a><br/>
        <br/>
</body>
</html>

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <body>
        表格标签包括table,tr,th,td等元素<br/>
        table: 用于创建表格包含一行或多行tr元素,参数border指定表格边框宽度<br/>
        tr: 行,包含一个或多个th或td元素<br/>
        th: 表头数据<br/>
        td: 表中数据<br/>
        <table border="1">
        <!--第一行表头tr-->
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        <!--第二行表中数据-->
            <tr>
                <td>王盛</td>
                <td>25</td>
                <td>男</td>
            </tr>
    </body>
</html>

列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
    <body>
        列表标签分为 有序列表,无序列表,列表描述,下拉列表<br/>
        无序列表: ul=unordered list<br/>
        有序列表: ol=ordered list,有几种方式进行排序:<br/>
        type=1,使用数字排序,默认<br/>
        type=a,使用小写字母排序<br/>
        type=A,使用大写字母排序<br/>
        type=i,使用小写罗马数字排序<br/>
        type=I,使用大写罗马数字排序<br/>

        列表元素: li=list item<br/>
        列表描述: dl=description list<br/>
        定义术语: dt=description term<br/>
        术语描述: dd=description data<br/>

        <ul>
            <b>这是一个无序列表(即用重点表示的列表)</b>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
        </ul>
        <ol>
            <b>这是一个有序列表</b>,有序列表的序号就是type的值默认为数字
            <li>学习html</li>
            <li>学习css</li>
            <li>学习js</li>
        </ol>
        <ol type="A" start="3">
            这也是一个有序列表,使用大写字母作为序号,并使用start,指定从C开始编号
            <li>这是第一个</li>
            <li>这是第二个</li>
            <li>这是第三个</li>
        </ol>
        <ol>
            这也是一个有序列表,但通过value值来设定某项的具体编号
            <li value="2">学习css</li>
            <li value="1">学习html</li>
            <li value="3">学习js</li>
        </ol>
        <ul><b>在一个列表中嵌套一个列表</b>
            <li>水果
                <ol>
                    <li>苹果</li>
                    <li>香蕉</li>
                </ol>
            <li>蔬菜
                <ul>
                    <li>番茄</li>
                    <li>黄瓜</li>
                </ul>
            </li>
        </ul>

        <dl><b>定义列表和列表描述</b>
            <dt>HTML</dt>
            <dd>用于创建网页的标记语言</dd>
            <dt>CSS</dt>
            <dd>用于样式设计和网页布局的语言</dd>
        </dl>
        <br/>
        <b>下拉列表</b>
            select元素具有name,multiple,size属性:<br/>
            multiple属性:允许用户选择多个选项<br/>
            size属性:设置下拉列表的可见选项数<br/><br/>
            option元素具有value,selected,disabled属性:<br/>
            value元素:设置选项的值<br/>
            selected元素:设置默认选项<br/>
            disabled元素:禁用选项<br/>
        <select name="fruit" multiple size="3">
        <!-- 页面上是苹果,但是向后端提交时,是apple英文单词-->
            <option value="apple">苹果</option>
            <option value="banana" selected>香蕉</option>
            <option value="orange" disabled>橘子</option>
        </select>
    </body>
</html>

内部标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <body>
        <h1><a href="#section1">这是一个一级标题</a></h1>
        <h2><a href="#section2">这是一个二级标题</a></h2>
        <h3><a href="#section3">这是一个三级标题</a></h3>
        <h1 id="section1">一级标题跳转位置</h1>
        <p>这是一个段落。<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文
        <br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文</p>
        <h2 id="section2">二级标题跳转位置</h2>
        正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>
        <h3 id="section3">三级标题跳转位置</h3>
        正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>正文<br/>
    </body>
</html>

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
    <!--页面的标题-->
    <head>
        <titile>表单标签</titile>
    </head>
    <body>
        <h3>表单标签form用以让用户与页面之间进行交互</h3>
        以下是一些常用的元素:<br/>
        text: 文本框<br/>
        password:   密码框,输入内容会被隐藏<br/>
        radio:      单选按钮(圆形)<br/>
        checkbox:   复选框(方形)<br/>
        number:     数字输入框<br/>
        submit:     提交按钮<br/>
        reset:      重置表单<br/>
        date:       日期输入框<br/>
        button:     普通按钮,用以执行自定义js操作<br/>
        search:     关键词搜索框<br/>
        color:      颜色选择器<br/>
        select:     创建下拉列表<br/>
        option:     下拉列表选项<br/>
        <!--这部分是前后端交互的部分-->
        <form action="/register" method="post">
            <!--向后端提交的是value的英文单词-->
            (文本框)用户名: <input type="text" id="user" name="user" value="user" required><br/>
            (单选)性别: <input type="radio" name="sex" id="sex" value="male">男
                <input type="radio" name="sex" id="sex" value="female">女<br/>
            <!--复选框,如果打钩,发送yes-->
            (多选)订阅邮件: <input type="checkbox" value="yes"><br/>
            (列表)国家: <select>
            <option id="China" value="China">中国</option>
            <option id="USA" value="US">美国</option>
            <option id="UK" value="UK">英国</option>
            </select><br/>
            密码:
            <input type="password" value="password" required placeholder="请输入密码"><br/>
            重置按钮:
            <input type="reset" value="重置"><br/>
            自定义按钮:
            <!--通过onclick定义点击之后的操作-->
            <input type="button" value="自定义按钮" onclick="alert('hello')"><br/>
            请输入年龄18-100:<input type="number" min="18" max="100" value="age" required><br/>
            选择日期:<input type="date" value="date"><br/>
            这是一个搜索框: <input type="search" value="search" placeholder="请输入搜索内容"><br/>
            选择颜色: <input type="color" name="color" value="color"><br/>
            文本框只读: <input type="text" id="test" value="text" readonly><br/>
            (文本框限制最大字符数)手机号: <input type="text" id="phone" value="phone" maxlength="11"><br/>
            文本框自动填充(记住上次写的内容): <input type="text" value="test2" autocomplete><br/>
            选择上传多个文件: <input type="file" value="file" multiple><br/>

            多选项:<br/>
            <input type="checkbox" id="fruit1" name="fruit[]" value="apple">
            <!--定义一个label,通过for和id将两个匹配在一块-->
            <label for="fruit1">苹果</label>
            <input type="checkbox" id="fruit2" name="fruit[]" value="banana">
            <label for="fruit2">香蕉</label>
            <input type="checkbox" id="fruit3" name="fruit[]" value="orange">
            <label for="fruit3">橙子</label>

            <br/>
            多行文本输入框:(row表示可见行数,cols表示最大行数)<br/>
            <textarea rows="4" name="message" cols="50"></textarea>
            <br/>
            提交按钮:
            <input type="submit" value="提交"><br/>
        </form>
    </body>
</html>

div标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <body>
        <div>
            这是一个div块<br/>
            <img src="https://ws-blog-img.oss-cn-hangzhou.aliyuncs.com/wangsheng/2024/10/4b7bc987d8ba714caf4b93d97055c385.png" alt="百度logo" width="270" height="129">
        </div>
        <div>
            这是另一个div块<br/>
            <h1>这是一个网页</h1>
            <h2>这是一个二级标题</h2>
            <h3>这是一个三级标题</h3>
        </div>
    </body>
</html>

原文作者：王盛

原文链接：https://akemi.zj.cn/2024/12/30/HTML-tag/

发表日期：December 30th 2024, 8:15:41 pm

更新日期：February 20th 2025, 6:37:27 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 基础标签
  2. 2. 表格标签
  3. 3. 列表标签
  4. 4. 内部标签
  5. 5. 表单标签
  6. 6. div标签
Total : 203
2025
2024
2023
Linux 云原生 云计算 开发 mysql