1、标题标签
- 作为标题使用,每个标题独占一行
<head></head>
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<h2>java</h2>
<h2>sql</h2>
</body>
</html>
- 运行结果
2、段落标签
- 定义段落
<p>
段落
</p>
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<p>mysql在互联网应用较多</p>
<p>mysql是一个开源软件</p>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<h2>java</h2>
<h2>sql</h2>
</body>
</html>
- 运行结果
3、换行标签
- 强制文字另起一行显示
<br />
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<p>mysql在<br />互联网应用较多</p>
<p>mysql是一个开源软件</p>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<h2>java</h2>
<h2>sql</h2>
</body>
</html>
- 运行结果
4、文本格式化标签
- 设置文字以特殊方式显示
语义 | 标签 |
---|---|
加粗 | |
倾斜 | |
删除线 | |
下划线 |
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<p>mysql在<br /><em>互联网</em>行业应用较多</p>
<p>mysql是一个<strong>开源</strong>软件</p>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<h2>java</h2>
<h2>sql</h2>
</body>
</html>
- 运行结果
5、图像标签
- 定义HTML页面中的图像
<img src="图像url" title="提示文本(鼠标放上去显示)" alt="替换文本" width="500" height="100">
注意:宽度和高度一般只设置其中一个
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<p>mysql在<br /><em>互联网</em>行业应用较多</p>
<p>mysql是一个<strong>开源</strong>软件</p>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<img src="img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" width="500" /><br />
<img src="img1.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" height="100" />
<h2>java</h2>
<h2>sql</h2>
</body>
</html>
- 运行结果:
6、路径标签
- 路径:绝对路径&相对路径
相对路径:图片相对于html文件的位置
绝对路径:文件的绝对路径
注意:一般都使用相对路径
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<p>mysql在<br /><em>互联网</em>行业应用较多</p>
<p>mysql是一个<strong>开源</strong>软件</p>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<img src="img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" width="500" /><br />
<img src="E:\前端基础\html\img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" height="100" />
<h2>java</h2>
<h2>sql</h2>
</body>
</html>
- 运行结果
7、超链接标签
- 从一个页面链接到另一个页面链接,分为内部连接&外部链接
<a href="url地址" target="目标网页打开方式"> 链接命名<a>
target | 含义 |
---|---|
_self | 在当前窗口打开页面 |
_blank | 新窗口打开页面 |
- 代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据技术栈</title>
</head>
<body>
<h1>数据库</h1>
<h2>mysql</h2>
<p>mysql在<br /><em>互联网</em>行业应用较多</p>
<p>mysql是一个<strong>开源</strong>软件</p>
<h2>oracle</h2>
<h1>开发语言</h1>
<h2>sql</h2>
<img src="img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" width="500" /><br />
<img src="E:\前端基础\html\img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" height="100" />
<h2>java</h2><br />
<a href="https://www.csdn.net/" target="_self">CSDN</a> <br />
<a href="../第一个.html" target="_blank">第一个内部html连接</a>
<h2>sql</h2>
</body>
</html>
- 运行结果