HTML基础_lang="en

作者：一键难忘520 | 2024-07-18 12:53:30

踩

lang="en

W3C标准

结构化标准语言（HTML,XML）.
表现标准语言（CCS）.
行为标准语言（DOM，ECMAscript）

1. HTML基本结构

<body> <-body>等成对的标签分别叫做开放标签和闭合标签
单独出现的叫自闭合标签
1
2

<!--DOCTYPE用来定义标准-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页的头部-->
<head>
<!--meta描述性标签，用来描述一些网站的信息-->

    <meta charset="UTF-8">
    <!--设置一些关键词-->
    <meta name="keyword" content="java">
    <!--关于网页的描述-->
    <meta name="description" content="第一次尝试" >
    <!--title网页的名字-->
    <title>Title</title>
</head>
<!--body标签代表网页的主体-->
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>标签</h1>
<h2>标签</h2>
<h3>标签</h3>
<h4>标签</h4>
<h5>标签</h5>
<h6>标签</h6>
<!--水平线标签-->
<hr/>
<!--段落标签-->
<p>我的</p>
<p>第一次</p>
<p>尝试</p>
<!--换行标签-->
我的 <br/>
第一次 <br/>
尝试 <br/>
<!--粗体，斜体-->
<strong>Hello World</strong><br/>
<em>Hello World</em>
</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

2.1 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
src(必填) 绝对路径 相对路径（推荐）
-->
<img src="../resources/image/1.jpg" alt="帅气自拍" title="悬停" height="250" width="250">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2 链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--
a标签
href ：必填，表示要跳转到那个页面
target：表示窗口在哪里打开  _blank  在新标签中打开
                        _self(默认)在当前网页打开
-->
<a name="top">顶部</a>

<br/>
<a href="基本标签.html" target="_blank">
    <img src="../resources/image/1.jpg" alt="帅气自拍" title="点击图片跳转" height="250" width="250">
</a>
<br/>

<!--锚链接
1.需要一个锚标记(name||tip)
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能型链接
邮件链接：mailto
-->
<a href="mailto:1536478643@qq.com">点击联系我</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
30
31
32

2.3 块元素和行内元素

块元素：无论内容多少都会占据一行。
行内元素：内容撑开宽度，左右都是行内元素的可以放在一行。

2.4 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
</ul>
<hr/>
<!--自定义列表-->
<dl>
    <dt>学科</dt>

    <dd>C++</dd>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>Python</dd>
</dl>
</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

2.5 表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格table
行 tr
列 td
更改边框粗细：border
跨列：colspan
跨行：rowspan
-->
<table border="1px">
    <tr>
        <td >姓名</td>
        <td colspan="2">成绩</td>
    </tr>

    <tr>
        <td>一号</td>
        <td>80</td>
        <td>60</td>
    </tr>

    <tr>
        <td>二号</td>
        <td>90</td>
        <td>50</td>
    </tr>
</table>
</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

2.6 媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--
音频 video
视屏 audio
控制 controls
自动播放 autoplay
-->
<video src="../resources/video/歌曲.mp3" controls>音乐</video>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 内联框架 ifram

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
内联框架iframe
name:标记

-->
<iframe src="" name="mark" frameborder="0" width="1000px" height="800px">内联</iframe>
<!--target 跳转到mark打开-->
<a href="https://123.sogou.com" target="mark">点击跳转</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4. 表单 form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--表单
action： 表单提交的地址，可以是一个网站地址，也可以是请求处理地址。
method： 提交方式 post get
post： 相对比较安全，传输大文件。
get： 相对没有那么安全，但是高效。
submit: 提交
reset： 重置
button: 普通按钮
image： 图片按钮
-->
<form action="1.我的第一个网页.html" method="get">
    <p>账号: <input type="text" name="username"> </p>
    <p>密码: <input type="password" name="pwd"> </p>
<!--使用单选框时书写选择初始值
如果要单选 将两个元素写进一个组中（name相同）
-->
    <p>
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="girl">女
    </p>
    <!--按钮-->
    <p>
        <input type="button" value="点击出发" name="btn" >
        <input type="image" src="../resources/image/1.jpg" name="ima">
    </p>
    <!--下拉框-->
    <p>国家
        <select name="国家" id="国家">
            <option value="中国" selected>中国</option>
            <option value="韩国" >韩国</option>
            <option value="英国" >美国</option>
        </select>
    </p>
    <!--文本域-->
    <p>

        反馈 <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files" >
    </p>
<!--滑块-->
    <p>亮度:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!-- 邮箱验证-->
    <p>邮箱:
        <input type="email" name="email" >
    </p>

    <p>数字:
        <input type="number" name="num" max="100" min="0" step="1" value="0">
    </p>

    <p>URL:
        <input type="url" name="url">
    </p>
<!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</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

表单应用

隐藏：hidden
禁用：disabled
只读：readonly
提示信息：placeholder
必填项（非空判断）：required

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/845752