HTML5第一个网页

  • Hyper Text Markup Language

  • 超文本标记语言

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标签代表网页头部 -->
<head>
<!-- meta描述性标签,描述网站信息 -->
<meta charset="UTF-8">

<!-- title网页标题 -->
<title>第一个网页</title>
</head>

<!-- body表示网站主题 -->
<body>
Hello Mr.T
</body>

</html>

基本标签

1
2
3
4
5
6
7
8
9
10
### 行内元素:行内元素之间无换行,会排成一行
### 块元素:元素独占一行,相当于会自动换行
<h1></h1>·····<h6><h6/> 1~6级标题
<p></p> 段落标签
<hr/> 分割线
<br/> 换行
<strong></strong> 粗体
<em></em> 斜体
&nbcp; 空格 > 大于 < 小于 # & + 字符 搭配合成特殊符号

图片

1
2
3
4
5
6
7
8
9
10
11
12
<!--
图片相关
src:地址
相对路径:相对于html
绝对路径:电脑内路径
../上一级目录

alt:图片未加载的显示的字符串
titie:鼠标悬停图片出现的文字
height、width 长、宽
-->
<img src="../img/danwan.jpg" alt="图片404" title="弹丸论破" width="1020" height="689">

链接

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
a标签
href:跳转的网页链接
target:新窗口在哪打开(新页面、本页面·····)
name:命名,方便传送。如顶部设name。
随后另写一个链接<a href:"#name">点击回顶部<a/>
-->
<a href="我的第一个网页.html" target="_blank">点击跳转到页面1</a><br/>

<!-- 点击项目还可以是图片 -->
<a href="基本标签.html" >
<img src="../img/yuanchuang1.jpg" height="640" width="800">
</a><br/>

列表

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
<!-- 有序列表 -->
<ol>
<li>aaa</li>
<li>ssdc</li>
<li>sdsdsdsd</li>
</ol>

<!-- 无序列表 -->
<ul>
<li>i</li>
<li>jjj</li>
<li>alsla</li>
</ul>

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

<dd>sdsds</dd>
<dd>ccc</dd>
<dd>ccesce</dd>

<dt>地址</dt>

<dd>wuhan</dd>
<dd>shanghai</dd>
<dd>guangzhou</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--表格 table
tr 行
- colspan 跨列
- rowspan 跨行
td 列
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<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>
</tr>
</table>

媒体元素

1
2
3
4
5
6
7
<!--媒体文件
src:路径
controls:控制条
autoplay:自动播放 chrome浏览器加上 muted静音属性 才能自动播放
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/audio/1%20序曲·折纸信笺.mp3" controls autoplay></audio>

页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--页面结构
header:头部区域
footer:脚步区域
section:标签定义文档中的节。比如章节、页眉、页脚或文档中的其他部分
article:独立文章内容,外部内容
aside:侧边栏
nav:导航链接
-->
<header><h1>网页头部</h1></header>

<section><h1>section</h1></section>

<article><h1>aricle</h1></article>

<aside><h1>aside</h1></aside>

<nav><h1>nav</h1></nav>

<footer><h1>网页脚部</h1></footer>

iframe内联框架

1
2
3
4
5
6
<!--iframe
可以设置框架大小,给框架命名,然后用链接的target属性更改窗口跳转目标
最后便可在框架中看到网页
-->
<iframe src="" name="site" frameborder="0" width="1500px" height="720px"></iframe><br/>
<a href="https://www.bilibili.com" target="site">跳转</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
<h1>注册</h1>
<!--表单form
action:表单提交的位置,网站、请求地址等
method:post,get提交方法
get方式可在url中看到提交的信息,效率高,不安全
post方式看不见信息,安全,可传输大文件
input:输入框
type:定义input元素的类型
radio:单选框,要规定为同一name即同一组,才可单选,没有组限制仍可单选
checkbox:多选框
button:按钮
image+src:图片按钮
submit:提交
reset:重置
file:提交文件
range:滑块
step:每次增量
search:搜索
checked:单选和多选的默认选择项
value:默认值
maxlength:最长显示字符
size:文本框的长度
readonly:只读
hidden:隐藏,常用来传默认值
disabled:禁用,不能选择
placeholder:虚字提示
required:不为空
pattern:正则表达式,可用正则表达式定义自验证邮箱
-->
<form action="我的第一个网页.html" method="get">
<p>用户名:<input type="text" name="username" value="xxxxx" maxlength="8" size="20" ></p>
<p>密码:<input type="password" name="password" placeholder="请输入密码" required></p>

<p>性别:
<input type="radio" value="boy" name="sex" checked >
<input type="radio" value="girl" name="sex">
</p>

<p>爱好:
<input type="checkbox" value="1" name="hobby" checked>1
<input type="checkbox" value="2" name="hobby">2
<input type="checkbox" value="3" name="hobby">3
</p>

<p>
按钮:
<input type="button" name="bt1" value="按钮1"><br/>
图片按钮:<br/>
<input type="image" src="../resource/img/yuanchuang1.jpg" width="500px" height="350px">
<br/>
上传文件:
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--下拉框、列表框
select:列表框
option:下拉的选项
selected 默认选项
-->
<p>下拉框:
<select name="列表">
<option value="值1">1</option>
<option value="值2">2</option>
<option value="值3" selected>3</option>
<option value="值4">4</option>
</select>
</p>
<!--textarea 文本域
cols 列
rows 行
-->
<p>
反馈:<br/>
<textarea name="textarea" cols="50" rows="10">请输入文本内容</textarea>
</p>

<!--验证
input type:
email 邮箱验证
url url验证
number 数字验证
-->
<p>邮箱验证:
<input type="email" name="email">
</p>
<p>url验证:
<input type="url" name="url">
</p>
<p>数字验证:
<input type="number" name="number">
</p>

<p>自定义邮箱:
<input type="text" name="diyemail" pattern="^[A-Za-z0-9\u4e00-\u9fa5][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>

<p>滑块:
<input type="range" name="voice" min="0" max="100" step="5">
</p>

<p>搜索:
<input type="search" name="search">
</p>

<!--
"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
-->
<label for="mark">点点我:</label>
<input type="text" id="mark">

<p>
<input type="submit">
<input type="reset">
</p>
</form>

小结

下一站css,前端基础简单过一遍。。。