什么是HTML
HTML是 HyperText Markup Language (超文本标记语言)的简称,是一种用于创建网页的标准标记语言。
HTML不是编程语言,而是一种标记语言,标记语言是一套标记标签。
HTML使用标记标签来描述网页。
HTML文档包含了标签及文本内容,HTML文档也叫做web页面。
HTML的基本组成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习</title>
</head>
<body>
<h1>是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
<!DOCTYPE html>
声明为HTML5文档
<html>
元素是HTML页面的根元素
<head>
元素包含了文档的元(meta)数据,如 <meta charset="utf-8">
定义网页编码格式为utf-8
<title>
元素描述了文档的标题
<body>
元素包含了可见的页面内容
<h1>
元素定义一个大标题
<p>
元素定义一个段落
这些就是HTML文档的基本组成部分,HTML标签是由尖括号包围的关键词,如 <html>
。这些标签通常是成对出现的,如 <b></b>
。标签对中第一个标签是开始标签,第二个是结束标签,也称开放标签和闭合标签。
<!DOCTYPE>声明
声明有助于浏览器中正确显示网页。doctype不区分大小写。UTF-8
对于中文网页需要使用 <meta charset="utf-8">
声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">
。
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。
HTML标题
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html的标题</title>
</head>
<body>
<h1>第一个标题</h1>
<h2>第二个标题</h2>
<h3>第三个标题</h3>
<h4>第四个标题</h4>
</body>
</html>
HTML段落
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html的段落</title>
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
</body>
</html>
HTML链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html的链接</title>
</head>
<body>
<a href="https://www.baidu.com">这是一个链接使用了href属性</a>
<a href="https://blog.csdn.net/MIMANCHI123?spm=1000.2115.3001.5343">这也是一个链接使用了href属性</a>
</body>
</html>
点击第一个链接
点击第二个链接
<body>
<p><a href="https://www.baidu.com">这是一个链接使用了href属性</a></p>
<p><a href="https://blog.csdn.net/MIMANCHI123?spm=1000.2115.3001.5343">这也是一个链接使用了href属性</a></p>
</body>`
可在两个链接前加上一对
进行换行。HTML图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html的图像</title>
</head>
<body>
<img src="https://profile.csdnimg.cn/B/8/C/1_mimanchi123"width="300"height="300"/>
</body>
</html>
1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下:
<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html 文件跟 *.jpg 图片在相同目录下:
<img src="*.jpg" width="300" height="120"/>
3、*.html 文件跟 *.jpg 图片在不同目录下:
a、图片 .jpg 在 image 文件夹中,.html 跟 image 在同一目录下:
<img src="image/*.jpg/"width="300" height="120"/>
b、图片 *.jpg 在 image 文件夹中,*.html 在 connage 文件夹中,image 跟 connage 在同一目录下:
<img src="../image/*.jpg/"width="300" height="120"/>
4、如果图片来源于网络,那么写绝对路径:
<img src="https://profile.csdnimg.cn/B/8/C/1_mimanchi123"width="300"height="300"/>