H5初识

HTML

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

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

1
HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。 这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、 图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
idea快捷键ctrl+/

image-20230226175648673

1.1、HTML基本结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>

</body>
</html>

<!DOCTYPE>

声明位于文档中的最前面的位置，处于 标签之前。

声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

image-20230226175723078

image-20230226175737270

< meta>

设置网页的编码，SEO

1
2
<meta charset="UTF-8">
<meta name="keywords" content="是兄弟就来kan我">

1.2、网页的基本标签

1、标题标签

h1最大，h6最小

1
2
3
4
5
6
<h1>修</h1>
<h2>修</h2>
<h3>修</h3>
<h4>修</h4>
<h5>修</h5>
<h6>修</h6>

2、段落标签

1
<p>yyds</p>

3、换行标签

1
<br />

4、水平线标签

1
<hr />

5、特殊符号

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>
<!--空格-->
<p>
yyds<br/>
yy   ds<br/>
 yy&nbsp;&nbsp;&nbsp;&nbsp;ds<br/>
</p>
<!--大于小于-->
<p>
 > < <br>
  &gt; &lt;
</p>
<!--引号-->
<p>
  &quot;修&quot;
</p>
<!--版权-->
<p>
  &copy; 安全圈
</p>
<!--&符号+xxx-->
</body>
</html>

1.3、图像标签

常见的图像格式：jpg、gif、png(受浏览器兼容性限制)

1
<img src="图片的位置" alt="图片异常替代文字" title="鼠标悬停文字">

1.4、链接标签

页面间链接：从一个页面链接到另外一个页面

1
2
<a href="path" target="_self">文本或者图像</a>
<a href="path" target="_blank">文本或者图像</a>

锚链接

ctrl+d 复制当前行到下一行

1
2
<a name="top">顶部</a>
<a herf="#top">跳转到顶部</a>

功能性链接

qq推广