<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<!-- 开头的标题-->
<title> 第一个题目 </title>
<!-- 设置文件的字符集 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 -->
<meta name=" keywords" content="HTML,XXX,XXX,XXX>"
<!--定义关键字时需要遵守以下几点:
1、定义关键字之间,需要使用英文逗号隔开
2、keywors 不是 keyword
3、关键字是单词,而不是语句-->
<!--可以使用description 对网页进行描述-->
<meta name="description" content="这是对这个网页进行描述第一个网页">
<!--meta 自动刷新本页面以及跳转到某一个页面上去-->
<!-- 本网页每隔5秒自动刷新一次 -->
<!--<meta http-equiv = "refresh" content="5">-->
<!--设置定时跳转-->
<!--<meta http-equiv="refresh" content="5;https://www.baidu.com">-->
<!--head 中还可以放置 style 、script 标签-->
</head>
<!--主题标记body需要显示的网页模块定义在其中-->
<body>
<!--在 body 里面出现的内容:-->
<!--1、注释:html中的注释格式:<!–注释XXX内容–>-->
<!--2、文本信息:可以分为两大类:普通文本、一些特殊字符文本.-->
<!--a:普通文本:汉子、英文或者在键盘上我们可以输出的字符.-->
<!--b:特殊字符文本以&开头,使用;结束. -->
<!--例如: 大小括号 .....-->
<!--在html特殊字符文本有以下几点:-->
<!--  半大角的空格 一个代表半个汉子空格-->
<!--  全大角的空格 一个代表一个汉子空格-->
<!-- 不断行的空格空格 一个代表一个汉子空格-->
<!--> 大于符号 < 小于符号-->
<!--≥ 大于等于符号 ≤ 小于等于符号-->
<!--& & 符号 " " 符号-->
<!--© © 版权符号 ® ◎ 注册商标符号-->
<!--× 代表乘号符 ÷代表除号符-->
<!--在浏览器中,浏览器显示网页时,完全采用html标记来进行解释,会自动忽略多余的空格以及空行!-->
<!--无论你输入多少空格,都只能识别一个空格,无论你输入多少空行,都直接自动被忽略;-->
<!--如果要使用空格就使用 、 、 使用空行就使用 <br/>标签-->
<!--主题元素<h1>--<h6>)从大到小字体,<h1>级别最高标题最重要其他的一次递减--<h6>级别最低-->
<h1>主题1</h1>
<h2>主题1</h2>
<h3>主题1</h3>
<h4>主题1</h4>
<h5>主题1</h5>
<h6>主题1</h6>
<!--换行标签-->
<br/>
<!--p 标签 段落标签-->
<p>段落</p>
<!--加粗标签-->
<b>加粗字体</b> <strong>也是加粗字体</strong>
<!--斜体字标签-->
<em>斜字体</em> <i>也是倾斜字体</i>
<!--sup 上标签相当于平方;-->
<p>4<sup>2</sup>×3<sup>2</sup></p>
<!--sub 下标签 相当于化学成分二氧化氢的符号一样;-->
<p>H<sub>2</sub>O</p>
<!--用于定义文本分割线-->
<hr/>
<!--文本无序列表表示-->
<h1>编程语言介绍</h1>
<ul>
<li>C语言</li>
<li>Java语言
<lu>
<li>Java</li>
<li>Javascript</li>
</lu>
</li>
<li>C<sup>#</sup> (C xia pu)</li>
<li>php</li>
<li>.net</li>
</ul>
<!--文本有序列表-->
<ol>
<li>C语言</li>
<li>Java语言
<ol>
<li>Java</li>
<li>Javascript</li>
</ol>
</li>
<li>C<sup>#</sup> (C xia pu)</li>
<li>php</li>
<li>.net</li>
</ol>
<!--HTML中,除了可以添加文字之外,还可以添加图片,当然添加图片,需要使用标记是.-->
<!--在浏览器,可以支持的图片格式,非常的多: GIF, JPEG, BMP, PNG,TIFI-->
<!--支持最多的是GIF,JPEG.-->
<!--GIF最多只能使用256色的图像,图片大小都非常的小,下载速度比较块,帧数比较低. 它是采用多张帧数图片组合完成动画效果.-->
<!--JPEG可以支持16M颜色,它展现的效果非常高清,但是它也支持压缩,但是它的压缩,是以牺牲图片的质量为代价,压缩月高,图片越模糊.-->
<!--HTML在使用图片时,我们不是直接把图片存入到HTML中,而是在HTML中使用某些属性,指向图片所在目录位置-->
<!--定位一个资源文件的路径,有两种方式:1、绝对路径, 2、相对路径-->
<!--1、绝对路径,是以盘符为参照路径,来进行寻址-->
<!--2、过路径,是以当前文件来作为参照路径,进行寻址-->
<h3>显示图片的方式一:绝对路径</h3>
<!--提升:在WebStorm 工具中 不支持这个绝对路径,但是用页面打开还是可以显示-->
<!--下面属性 src :绝对路径地址 alt :进行图片描述(图片不显示时提示文字) width :设置宽度 height :设置高度-->
<!--也可以在有网的情况下,在绝对路径地址上面输入网站上面的图片地址也可以显示,但是推荐使用相对路径.-->
<img src="D:html/img/1.jpg" alt="美丽的草原" width="300px" height="50px "/>
<h3>显示图片的方式二:相对路径</h3>
<!--以这个html文件来相对图片的位置来找这个路径.点点点...代表往上个文件找与img相同级的文件-->
<img src=".../.../img/1.jpg" alt="美丽的草原" width="300px" height="50px "/>
<!--address 通常用来描述个人信息. a 为超链接. 点击后跳转到该页面 href :描述跳转的地址-->
<address>
联系人:某某某
<br/>
联系方式:XXXXXXXXXXX
<br/>
联系个人网站:<a href="http://www.w3school.com.cn">某某某</a>
</address>
</body>
</html>
如果不熟悉可以在工具里面自己尝试一下。便OK