HTML

HTML

标签的学习

块级标签

  • div
  • p
  • h1-h6
  • ul
  • li

内联标签

  • span
  • a

小样例

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<!--html 5 文档声明（语义化） -->
<html lang="en">
<!--括号 标记语言 通常成对出现 单标签也要闭合  -->

<head>
    <!-- 包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果 -->
    <meta charset="UTF-8">
    <!-- 浏览器必须知道使用何种字符集。
                            -- ASCII HTML4 8字节
                            -- GBK,GB2312(汉字字符编码)  Big5（繁体字）
                            -- UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="html基础标签">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="../day-1/img/favicon.ico">
    <link rel="stylesheet" href="./HelloWord.css">
    <title>How To Make L</title>
    </meta>
</head>>


<body>
    <a href="#kkk">kkk</a>
    <div>
        <h1>This is a heading</h1><h2>This is a heading</h2><span>jjjjj</span><span>kkkk</span>
        <h3>This is a heading</h3>
    </div>
    <div>
        <p>This is paragraph</p>
        <p>This is paragraph</p>
        <p>This is paragraph</p>
        <span>this is span</span>
        <span>another this is span</span>
    </div>
    <div>
        <ul>
            <li>This is ul->li</li>
            <li>This is ul->li</li>
            <li><ul>
                <li>this is ul->li->ul</li>
                <li>this is ul->li->ul</li>
                <li>this is ul->li->ul</li>
            </ul></li>
        </ul>
        <ol>
            <li>This is Ol->li</li>
            <li>This is Ol->li</li>
            <li>This is Ol->li</li>

    </div>
    <div>
        <a href="./test.html#lll" name='kkk' target="_blank">百度一下，你就知道</a>
    </div>
    <div>
        <form action="MAILTO:747097149@qq.com" method="post">
            <fieldset>
                <legend>登录</legend>
                账号：<br />
                 <input type="text" name="count" value="">
                <br />
                密码:<br>
                <input type="password" name="password" value="">
                <br><br>
            </fieldset>
            <Select name="province">
                <option value="north">黑龙江</option>
                <option value="north">吉林</option>
                <option value="north">辽宁</option>
                <option value="south" selected>广东</option>
                <option value="south">江西</option>
            </Select> 省<br />
            <input list="browsers" autocomplete type="text">
            <datalist id="browsers">
                <option value="Internet Explorer">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
            </datalist>
            <br />

            <br />
            backetball:<input type="checkbox" name="habbit" value="backetball">
            bamin:<input type="checkbox" name="habbit" value="bamin">
            table:<input type="checkbox" name="habbit" value="table">

            <br />
            man:<input type="radio" name="sex" value="man">
            woman:<input type="radio" name="sex" value="woman">
            mid:<input type="radio" name="sex" value="mid">
            <br />
            <input type="submit" value="Submit">
            <button>opop</button>

        </form>
        <button>lllll</button>
    </div>
    <div>
        <img src="../img/person.jpg" alt="wrong!!">
        <img src="../img/a.jpg" alt="">
    </div>
    <article>
        <header>
            <p>This is an article</p>
        </header>
        <section>
            reader reviews
        </section>
    </article>
    <figure>
        <figcaption>流内容（图片图表代码） </figcaption>
        <p>例如：</p>
        <img src="../img/dufu.jpg" alt="">
        <figcaption>
            <code>
                coding...
            </code>
        </figcaption>
    </figure>
</body>

</html>

效果可复制进ide查看

前端 学习 HTML

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！