HTML基础

数据处理能力 / 大数据 / HTML
字数统计: 3k   |   阅读时长≈ 15 分钟

什么是HTML

HTML：Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等。

浏览器打开网页，右键-检查，即可查看

image-20220827145402886

W3C标准

W3C：World Wide Web Consortium（万维网联盟）

成立于1944年，Web技术领域最权威和最具影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准包括：

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

网页的基本信息

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-->
<!DOCTYPE html>

<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta 一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="归一的个人博客">
    <meta name="description" content="数据分析师">

    <!-- title标签：网页标题 -->
    <title>我的第一个网页</title>
</head>

<!--body标签代表网页主体-->
<body>

Hello,world!

</body>
</html>

页面结构分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚步</h2>
</footer>

</body>
</html>

网页的基本标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
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
<!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>

<!--段落标签-->
<p>青花瓷-周杰伦</p>
<p>作词 方文山 作曲 周杰伦</p>
<p>素胚勾勒出青花笔锋浓转淡</p>
<p>瓶身描绘的牡丹一如你初妆</p>
<p>冉冉檀香透过窗心事我了然</p>
<p>宣纸上走笔至此搁一半</p>

<!--水平线标签-->
<hr>

<!--换行标签-->
青花瓷-周杰伦<br/>
作词 方文山 作曲 周杰伦<br/>
素胚勾勒出青花笔锋浓转淡<br/>
瓶身描绘的牡丹一如你初妆<br/>
冉冉檀香透过窗心事我了然<br/>
宣纸上走笔至此搁一半<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>

粗体：<strong>i love you</strong> <br/>
斜体：<em>i love you</em> <br/>

<!--特殊符号-->
空      格 <br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/>
&gt; <br/>
&lt; <br/>
&copy; <br/>

</body>
</html>

图像标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src: 图片地址（必填，推荐使用相对地址）

alt：图片名字（必填，图片加载不出时显示）
-->
<img src="../resource/image/微信头像.jpg" alt="微信头像" title="悬停文字" width="100" height="100">

<a name="down">down</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
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name作为锚标志-->
<a name="top">顶部</a>

<!--a标签
href:必填，表示要跳转到哪个页面
target: 表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开
-->
<a href="1.我的第一个页面.html" target="_blank">点击我跳转到页面1</a> <br/>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a> <br/>


<!--锚链接：可以定位到页面指定位置
1.需要一个标记（当前页或其他页都可以）
2.跳转到标记处
-->
<a href="#top">回到顶部</a>
<!--跳转到3.图像标签.html页中的down标记处-->
<a href="3.图像标签.html#down">跳转</a>

<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:342342342@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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>HTML</li>
    <li>Linux</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>HTML</li>
    <li>Linux</li>
</ul>

<hr/>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容

-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>

    <dt>位置</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>长沙</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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>

<!--表格table
tr: 表格行 table row
td: 表格单元 table data cell
th: 表头 table head
-->
<table border="1">
    <!-- 第1行-->
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <!-- 第2行-->
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<!--示例-->
<table border="1">
    <!-- 第1行-->
    <tr>
        <td colspan="3" align="center">学生成绩</td>
<!--        <td></td>-->
<!--        <td></td>-->
    </tr>
    <!-- 第2行-->
    <tr>
        <td rowspan="2">基础科目</td>
        <td>语文</td>
        <td>80</td>
    </tr>
    <!-- 第3行-->
    <tr>
<!--        <td></td>-->
        <td>数学</td>
        <td>98</td>
    </tr>
    <!-- 第4行-->
    <tr>
        <td rowspan="2">计算机</td>
        <td>Python</td>
        <td>98</td>
    </tr>
    <!-- 第5-->
    <tr>
<!--        <td></td>-->
        <td>Java</td>
        <td>89</td>
    </tr>
</table>

</body>
</html>

媒体标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--音频和视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->

<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/video/1.mp4" controls autoplay></audio>

</body>
</html>

iframe内联框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<iframe src="https://www.hao123.com" frameborder="0" width="800" height="500"></iframe>

<!--通过a标签跳转-->
<iframe src="" name="hao123" frameborder="0" width="800" height="500"></iframe>
<a href="https://www.hao123.com" target="hao123">点击跳转</a>


</body>
</html>

表单

表单的基本元素

  1. text文本框
  2. password密码框
  3. radio单选框
  4. checkbox多选框
  5. 下拉框
  6. 文本域
  7. 文件域
  8. 邮件（自带合规验证）
  9. URL（自带合规验证）
  10. 数字
  11. 滑块
  12. 搜索框
  13. 按钮
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<!--表单from

action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post, get 提交方式 --》 提交name=value键值对
    get方式提交：我们可以在url中看到我们提交的消息
    post方式提交：比较安全，可以传输大文件
-->

<form action="1.我的第一个网页.html" method="get">
<!-- input标签 type , name , value 必备参数
    初级验证：
    1）placeholder 提示信息，用于输入框中
    2）required 非空判断
    3）patten 正则表达式判断，如用于邮箱规范的判断

    隐藏域：hidden
    只读：readonly
    禁用：disabled
-->

    <!-- 1.text文本框 -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

    <!-- 2.password密码框 -->
    <p>密码：<input type="password" name="pwd"></p>

    <!-- 3.radio单选框 -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!-- 4.checkbox多选框 -->
    <p>课程：
        <input type="checkbox" value="Python" name="subject">Python
        <input type="checkbox" value="Java" name="subject">Java
        <input type="checkbox" value="C" name="subject">C
        <input type="checkbox" value="C++" name="subject">C++
    </p>

    <!-- 5.下拉框
    selected 默认选项
    -->
    <p>下拉框
        <select name="月份" id="">
            <option value="Jan">1月份</option>
            <option value="Feb">2月份</option>
            <option value="Mar" selected>3月份</option>
            <option value="Apr">4月份</option>
        </select>
    </p>

    <!-- 6.文本域-->
    <p>反馈
        <textarea name="" id="1" cols="50" rows="10">文本内容</textarea>
    </p>

    <!-- 7.文件域 -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!-- 8.邮件（自带合规验证） -->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!-- 9.URL（自带合规验证） -->
    <p>URL：
        <input type="url" name="url">
    </p>
    </p>
    <!-- 10.数字 -->
    <p>商品数量：
        <input type="number" name="num" max="100" min="5" step="1">
    </p>
    <!-- 11.滑块 -->
    <p>音量：
        <input type="range" name="range" max="100" min="5" step="1">
    </p>
    <!-- 12.搜索框 -->
    <p>搜索：
        <input type="search" name="search" >
    </p>

    <!-- 13.按钮
    input type="button"  普通按钮
    input type="image"   图像按钮
    input type="submit"  重置按钮
    input type="reset"   提交按钮
    -->
    <p><input type="button" name="btn1" value="点击跳转"></p>
    <p><input type="image" src="../resource/image/微信头像.jpg" width="100" height="100"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>

</body>
</html>

输出结果

image-20220827144825570

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 归一
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信