什么是HTML
超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
W3C标准
网页基本信息
示例:
<!-- DOCTYPE: 告诉游览器,我们要使用什么样的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签 用来描述网站的一些信息 一般用来做SEO,搜索引擎优化（search engine optimization）-->
<meta charset="UTF-8">
<title>Title</title><!--title网站的标题-->
<meta name="keywords" content="HTML基础">
<meta name="description" content="零基础到高新就业">
</head>
<!--body标签代表网页主体-->
<body>
Hello World
</body>
</html>
网页基本标签
- 标题标签 h1–>h6
- 段落标签 p
- 换行标签 br
- 水平线标签 hr
- 字体样式标签: 粗体 strong 斜体 em
- 注释和特殊符号:
图像标签
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
scr: 图片地址,推荐使用相对路径
../ 上一级目录
alt: 图片名字(必填)
-->
<img src="Images/boy.jpg" alt="Boy" title="Boy" width="400px" height="400px">
</body>
</html>
运行结果:
链接标签(可以是图像链接也可以是文字链接)
页面间链接:从一个页面到另一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
href: 必填,表示要跳转到哪个页面
target: 表示窗口在哪里打开
_blank: 在新窗口打开
_self: 在当前页面打开
-->
<a href="01.我的第一个网页.html">跳转到我的第一个网页</a>
<a href="https:www.baidu.com">点击调转到百度</a>
<a href="https:www.baidu.com">
<!--点击图片跳转到百度-->
<img src="Images/boy.jpg" alt="">
</a>
</body>
</html>
运行结果:
锚链接
页面间也可以实现锚链接的跳转
<a href="04.锚链接.html#top">跨页面的锚链接</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
锚链接
1.需要一个锚标记 使用name作为标记
2.跳转到标记 通过#name
-->
<a name="top"></a>
<p>
<img src="Images/boy.jpg" alt="">
</p>
<p>
<img src="Images/boy.jpg" alt="">
</p>
<p>
<img src="Images/boy.jpg" alt="">
</p>
<p>
<img src="Images/boy.jpg" alt="">
</p>
<p>
<img src="Images/boy.jpg" alt="">
</p>
<a href="#top">回到顶部</a>
</body>
</html>
运行结果:
功能性链接
示例:
如何生成QQ链接?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
功能性链接:
邮箱链接: mailto:
QQ链接:
-->
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1585526224&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2:1585526224:53"
alt="点击领取福利" title="点击领取福利"/></a>
</body>
</html>
运行结果:
