HTML

HTML：Hyper Text Markup Language(超文本标价语言)
超文本包括：文字、图片、音频、视频、动画等

W3C标准

W3C(World Wide Web Consortium（万维网联盟)），成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括：

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

网页基本信息

1
2
3
- DOCTYPE声名
- <title>标签
- <meta>标签

第一个网页&基本标签

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
<!-- DOCTYPE:告诉浏览器，我们要是用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，用来描述网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords",content="王同学">
    <meta name="description",content="blog">

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

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

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

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

<!--换行标签-->
<!-- <br> <br/>都可 只是换行，仍是一段-->

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

<h1>字体样式标签</h1>
粗体：<strong>I love you!</strong>
斜体：<em>I love you!</em>

<!--特殊符号-->
空格
空&nbsp;&nbsp;&nbsp;格
<br/>
大于号：&gt;
<br/>
小于号：&lt;
<br/>
版权符号：&copy;
<br/>

<!--特殊符号记忆方式：
&  ;
-->

Helo,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>
<!--img学习
src:图片地址
绝对地址：E:\代码\HTML\resources\image\1.jpg
相对地址（推荐使用）：../  --上一级目录

alt:图像的代替文字
title:鼠标悬停提示文字
width:图像宽度
height：图像高度

-->
<img src="../resources/image/1.jpg" alt="王同学头像" title="悬停文字">
<a href="4.链接标签.html#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
37
38
39
<!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.我的第一个网页&2.基本标签.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="1.我的第一个网页&2.基本标签.html"><img src="../resources/image/1.jpg" alt="王同学头像" title="悬停文字"></a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down"></a>

<!--功能性链接
邮件链接：mailto:
QQ链接(QQ推广工具似乎失效，生成qq链接只需把下边的xxx改成自己qq号即可)
-->
<a href="mailto:1562063077@qq.com">联系我</a>
<a href="<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin={{xxx}}&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:3153717369:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>

</html>

块元素：无论内容多少，该元素独占一行。 (p、h1-h6…)

行内元素：内容撑开宽度，左右都是行元素的可以排在一行。 (a、strong、em…)

列表

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ul>

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

应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dd>C++</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格标签
行 tr row
列 td
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
<table border="1.5px">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

媒体元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>
</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>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

path:引用页面地址

mainFrame:框架标识名

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>内联框架iframe</title>
</head>
<body>
<!-- <iframe src="//player.bilibili.com/player.html?aid=558604675&bvid=BV1Xe4y1r7bq&cid=846057246&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
-->
<iframe src="" name="Hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="链接" target="Hello">点击跳转</a>
</body>
</html>

表单

post和get提交

表单元素格式

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
      get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
      post:比较安全，可以传输大文件
-->
<form action="" method="post">

    <!--文本输入框：input type="text"
    value="王同学"  默认初始值
    maxlength="8"  最长能写几个字符
    size="30"      文本框的长度

    -->
    <p>名字：<input type="text" name="username"></p>

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

    <!--单选框标签
    input type="radio"
    value：单选框的值
    name： 表示组,加上name之后单选框只能选一个
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--多选框标签
    input type="checkbox"
    checked:默认选中
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/1.jpg">-->
    </p>

    <!--下拉框，列表框
    selected：默认选择
    -->
    <p>国家：
        <select name="列表名称">
            <option value="">中国</option>
            <option value="">美国</option>
            <option value="" selected>瑞士</option>
            <option value="">印度</option>
        </select>
    </p>

    <!--文本域
    cols="30" rows="10"
    -->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>

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

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
    <!--URL验证-->
    <p>URL：
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <!--滑块
    input type="range"
    -->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

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

    <!--增强鼠标可用性
    label:鼠标指向某一个位置
    -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <!--
    placeholder 提示信息
    required    非空判断
    pattern     正则表达式
    -->

    <p><input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>

</body>
</html>