web前端：html学习的第一天

发表于 | 更新于 | 分类于 ， | 阅读次数：

html5

常用的块级标签

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级标签</title>
</head>
<body>
<!-- 标题标签 h1~h6 -->
    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <h3>标题标签3</h3>

<!-- 段落标签 p -->
    <p>段落标签</p>

<!-- 有序列表标签 ol -->
    <ol>
        <li>有序1</li>
        <li>有序2</li>
    </ol>

<!-- 无序列表标签 ul -->
    <ul>
        <li>无序1</li>
        <li>无序2</li>
    </ul>

<!-- 定义描述标签 dl -->
    <dl>
        <dt>咖啡</dt>
        <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这种原料</dd>
        <dd>可以提神，刺激神经</dd>
    </dl>

<!-- 表格标签 table -->
    <table>
        <tr>
            <td>百度</td>
            <td>新浪</td>
        </tr>

    </table>

<!-- 表单 form -->
    <form>

    </form>

<!-- 分区标签 div -->
    <div>分区标签</div>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
<!-- 图像标签 img -->
    <img src="images/1.png" alt="你好,我丢失了" title="我是图片"/>

<!-- 范围标签 span  -->
    <span>文本等行级内容</span>

<!-- 换行标签 br -->
    <p>
        1234567890123456789012345678901234567890123456789012345678901234567890<br/>
        12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
        12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
        123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
        123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
        123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
    </p>
</body>
</html>

a标签

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
<a href="块级标签.html" target="_blank">块级标签</a>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
    <a id="top" href="#bottom">顶部</a><br/>
    <a href="#center">去找span</a><br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
    <span id="center">我是span</span><br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
        1234567890<br/>1234567890<br/>1234567890<br/>1234567890<br/>
    <a id="bottom" href="#top">底部</a><br/>
</body>
</html>

特殊符号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
    大于：&gt;<br/>
    小于：&lt;<br/>
    版权号：&copy;<br/>
    空格：a&nbsp;b<br/>
    引号：&quot;
</body>
</html>
文章推荐
文武科技社
新的天地，从扫码开始！
😆听说打赏我的人，都进了福布斯排行榜😆
-------------本文结束感谢您的阅读-------------
0%