中国石油大学(华东)visual cpp上机实验报告指导

visual c++

实验一熟悉Visual C++程序调试方法

一、实验目的

(1) 熟悉Visual C++ 6.0 开发环境；

(2) 掌握在Visual C++ 6.0 开发环境调试程序的方法。

二、实验内容

(1) 创建三个项目，项目类型分别为：Win32 Console Application、Win32 Application 和MFC AppWizard(exe)，分别编译运行各个程序，观察各种项目类型 程序的特点。

(2) 创建一个Win32 Console Application 类型的项目，输入下面的代码，按 照要求对代码进行调试。

#include "iostream.h" #include "math.h"

void narcissus(); // 求水仙花数 void main() {

narcissus(); }

void narcissus() {

int x1; // 百位数字

int x20; // 十位数字＋个位数字 int x2; // 十位数字 int x3; // 个位数字 2

int count = 0; // 找到的水仙花数的总数 for(int x=100; x<1000; x++) {

x1 = x/100; x20 = x%100; x2 = x20/10; x3 = x20%10;

if(x1*x1*x1+x2*x2*x2+x3*x3*x3 == x) { count++;

cout<<"One narcissus number found:"<<x<<endl; } }

cout<<"The total number of narcissus numbers is:"<<count<<endl; }

调试要求：

在程序代码的 main 函数中设置断点，启动程序执行到断点处停止； 在函数 narcissus 调用处进入函数内部，跟踪函数执行的过程； 单步执行程序，观察各个变量值的变化情况；

visual c++

单步执行若干步后，跳出函数体，回到 main 函数。

三、实验报告

(1) 观察三种项目类型对应的程序特点，做出简要说明；

答：API是Windows系统与Windows应用程序之间的标准程序接口，Windows应用程序可以利用大量的标准API函数调用系统功能。

MFC库中包含用来开发C++应用程序和Windows应用程序的一组类。这些类封装了大部分的WindowsAPI,用来表示窗口、对话框、设备上下文。公共GDI对象如画笔、调色板、控制框和其他标准的Windows部件。

(2) 列出C++程序清单，以及程序的运行结果；

程序清单如上，结果如下：

(3) 记录调试过程中变量值的变化情况；

答：首先，F9 设置/清除断点

然后，F5 Build | Start Debugging 启动调试程序 F11 Debug | Step into 进入函数体内部

visual c++

F10 Debug | Run to cursor 单步执行程序

(5) 总结实验的心得体会，实验中遇到的困难以及解决的方法等。

此次为Visual C++的首次实验，我舒心了vc++6.0的开发环境。此次实验的编程并不困难。但对API和MFC比较陌生，通过查阅资料，对其有了初步的了解。通过实验，我对Windows程序编程有了较为全面的了解，熟练的掌握了C++程序调试的方法，

实验二熟悉Windows 源程序基本结构

一、实验目的

(1) 熟悉Visual C++ 6.0 开发环境；

(2) 熟悉Windows 系统事件驱动的运行机制； (3) 熟悉Windows 应用程序源程序基本结构；

二、实验内容

创建一个空白的 Win32 Application 应用程序，建立相关文件，手工输入下列 代码，实现一个Windows 窗口程序。 #include "windows.h"

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae, WPARAM wParam,LPARAM lParam);

int WINAPI WinMain (HINSTANCE hThisInst, HINSTANCE hPrevInst, LPSTR lpszCmdLine, int nCmdShow) {

WNDCLASS ws; HWND hWnd; MSG msg; ws.style = 0;

ws.lpfnWndProc = WndProc; ws.cbClsExtra = 0; ws.cbWndExtra = 0;

ws.hInstance = hThisInst;

ws.hIcon = LoadIcon(NULL, IDI_HAND);

ws.hCursor = LoadCursor(NULL,IDC_CROSS);

ws.hbrBackground = (HBRUSH) GetStockObject(WHITE_BRUSH); ws.lpszMenuName = NULL;

ws.lpszClassName = "DemoClass";

5

if(!RegisterClass(&ws)) {

return -1; }

hWnd = CreateWindow("DemoClass","My First Windows Program", WS_OVERLAPPEDWINDOW,100,200,640,480, NULL,NULL,hThisInst,NULL);

ShowWindow(hWnd,nCmdShow); UpdateWindow(hWnd);

visual c++

while(GetMessage(&msg,NULL,0,0)) {

TranslateMessage(&msg); DispatchMessage(&msg); }

return msg.wParam; }

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae, WPARAM wParam,LPARAM lParam) {

switch(messgae) {

case WM_DESTROY: PostQuitMessage(0); break; default:

return DefWindowProc(hwnd,messgae,wParam,lParam); }

return 0; }

三、实验报告

(1) 列出源程序清单，以及程序的运行结果； 运行结果如下

:

visual c++

(2) 总结Windows 源程序的结构特点，说明各个主要程序段的作用；

答：结构特点：可以看出源程序主要有WinMain和WinProc两个函数组成，WinMain是入口函数，WinProc是出口函数。

WinMain主要功能是完成一系列定义和初始化工作，产生消息循环。

WinProc定义了接受不同消息当应用程序接收到消息时，相应的响应模块便会被执行。 (3) 总结实验的心得体会，实验中遇到的困难以及解决的方法等。

此次实验，我了解了API编程步骤和板块，对其有了整体的认识。但由于初次试图编写API程序，对其中的大小写字母经常弄错，细心改正后便得到正确程序。将实践和理论结合了起来，对其理解能力得到提高。

实验三 Windows 图形绘制编程实验

一、实验目的

(1) 熟悉Visual C++ 6.0 开发环境； (2) 掌握Windows 图形输出的方法；

(3) 理解设备环境、画笔、画刷的概念，掌握常用的绘图函数。

二、实验内容

请编写程序，要求如下：

(1) 定义一支黄色画笔，绘制一条线段； (1) 定义一支紫色画笔，绘制一条多段线；

(3) 定义一支红色画笔，绘制一个正方形，并用适当的画刷填充图形内部； (4) 定义一支绿色画笔，绘制一个圆，并用适当的画刷填充图形内部；

(5) 定义一支蓝色画笔，绘制一个正六边形，并用适当的画刷填充图形内部。

三、实验报告

(1) 列出图形绘制程序代码清单； #include"windows.h" #include<math.h>

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae, WPARAM wparam,LPARAM lparam);

int WINAPI WinMain (HINSTANCE hThisInst,HINSTANCE hPrevInst, LPSTR lpszCmdLine, int nCmdShow) {

WNDCLASS ws; HWND hWnd; MSG msg; ws.style=0;

ws.lpfnWndProc=WndProc; ws.cbClsExtra =0; ws.cbWndExtra=0;

ws.hInstance =hThisInst;

visual c++

ws.hIcon =LoadIcon(NULL,IDI_HAND);

ws.hCursor =LoadCursor(NULL,IDC_CROSS);

ws.hbrBackground =(HBRUSH)GetStockObject(WHITE_BRUSH); ws.lpszMenuName =NULL;

ws.lpszClassName ="DemoClass"; if(!RegisterClass(&ws)) {return -1; }

hWnd=CreateWindow("DemoClass","windows 绘图编程 ", WS_OVERLAPPEDWINDOW,100,200,640,480,NULL,NULL,hThisInst,NULL);

ShowWindow(hWnd,nCmdShow); UpdateWindow(hWnd);

while(GetMessage(&msg,NULL,0,0)) { TranslateMessage(&msg); DispatchMessage(&msg); }

return msg.wParam ; }

LRESULT CALLBACK WndProc(HWND hwnd ,UINT messgae, WPARAM wParam,LPARAM lParam)

{ HDC hDC; HBRUSH hBr;

PAINTSTRUCT PtStr; HPEN hPen; double add=sqrt(3);

POINT pt1[]={{100,50},{200,100},{300,50}}; POINT

pt2[]={{100,250},{150,250},{175,250+25*add},{150,250+50*add},{100,250+50*add},{75,250+25*add}};

switch (messgae) {

case WM_PAINT:

hDC=BeginPaint(hwnd,&PtStr);

visual c++

SetMapMode(hDC,MM_ANISOTROPIC); hPen=CreatePen(PS_SOLID,2,RGB(0,0,0)); //此为绘制直线代码 SelectObject(hDC,hPen); MoveToEx(hDC,40,40,NULL); LineTo(hDC,80,80); hPen=CreatePen(PS_SOLID,2,RGB(0,255,255)); //此为绘制多段线代码 SelectObject(hDC,hPen); Polyline(hDC,pt1,3);

hBr=CreateSolidBrush(RGB(0,255,255)); //此为绘制矩形代码 SelectObject(hDC,hBr);

hPen=CreatePen(PS_SOLID,1,RGB(255,0,0)); SelectObject(hDC,hPen);

Rectangle(hDC,350,50,550,200);

hBr=CreateSolidBrush(RGB(255,0,0)); //此为绘制椭圆代码 SelectObject(hDC,hBr);

hPen=CreatePen(PS_SOLID,1,RGB(0,255,0)); SelectObject(hDC,hPen);

Ellipse(hDC,150,150,250,250);

hBr=CreateSolidBrush(RGB(0,0,255)); //此为绘制多边形代码 SelectObject(hDC,hBr);

hPen=CreatePen(PS_SOLID,1,RGB(0,0,255)); SelectObject(hDC,hPen); Polygon(hDC,pt2,6);

EndPaint(hwnd,&PtStr); break;

case WM_DESTROY: PostQuitMessage(0); return 0; default:

return DefWindowProc(hwnd,messgae ,wParam,lParam); }

return 0; }

visual c++

(2) 总结在Windows 程序中绘制图形的基本操作步骤； 答：1、获取设备环境（BegainPaint和GetDC）； 2、选用工具与颜色；

3、选择绘图函数进行绘制。

(3) 总结实验的心得体会，实验中遇到的困难以及解决的方法等。

图形绘制需要我们熟悉函数作用及调用格式，实验中我对于多段线及多边形绘制的参数选择遇到了困难，在查阅网上资料与实例后编写成功。

实验四鼠标和键盘编程实验

一、实验目的

(1) 掌握键盘和鼠标的消息传递机制；

(2) 掌握在Windows 程序中处理键盘和鼠标消息的方法； (3) 掌握在Visual C++的程序调试方法。

二、实验内容

请编写程序，要求如下：

(1) 在屏幕上绘制一个矩形，并将举行内部划分成4 个矩形区域；

(2) 在矩形内移动鼠标时，在上面划分的4 个区域中显示不同的光标，并在屏 幕左上角显示光标坐标；

(3) 当用户按下SHIFT 和CTRL 键并移动鼠标时，显示一个消息框，提示用户 按下的是哪个键。

三、实验报告

(1) 列出消息处理程序代码清单；

visual c++

#include"windows.h" #include<stdio.h>

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae,WPARAM wParam,LPARAM lParam); int WINAPI WinMain(HINSTANCE hThisInst,HINSTANCE hPrevInst,LPSTR lpszCdLine,int nCmdShow) {

WNDCLASS ws; HWND hWnd; MSG msg; ws.style=0;

ws.lpfnWndProc=WndProc; ws.cbClsExtra=0; ws.cbWndExtra=0; ws.hInstance=hThisInst;

ws.hIcon=LoadIcon(NULL,IDI_HAND); ws.hCursor=LoadCursor(NULL,IDC_CROSS);

ws.hbrBackground=(HBRUSH) GetStockObject(WHITE_BRUSH); ws.lpszMenuName=NULL; ws.lpszClassName="DemoClass"; if(!RegisterClass(&ws)) { }

return -1;

hWnd=CreateWindow("DemoClass","鼠标消息编程

",WS_OVERLAPPEDWINDOW,100,200,640,480,NULL,NULL,hThisInst,NULL); ShowWindow(hWnd,nCmdShow); UpdateWindow(hWnd); }

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae,WPARAM wParam,LPARAM lParam) {

HDC hdc; HPEN hpen; HCURSOR hcursor; HFONT hF;

while(GetMessage(&msg,NULL,0,0)) { }

return msg.wParam;

TranslateMessage(&msg); DispatchMessage(&msg);

PAINTSTRUCT PtStr; WORD x,y;

char str[20];

visual c++

switch(messgae) {

case WM_MOUSEMOVE:

InvalidateRect(hwnd,NULL,TRUE); x=LOWORD(lParam);

y=HIWORD(lParam); hdc=GetDC(hwnd);

sprintf(str,"x=%d,y=%d",x,y); TextOut(hdc,10,10,str,strlen(str));

if(x>=50&&x<=250&&y>=50&&y<=150) {

if(x>=50&&x<=150&&y>=50&&y<=100) { hcursor=LoadCursor(NULL,IDC_IBEAM);

SetCursor(hcursor);}

if(x>=150&&x<=250&&y>=50&&y<=100)

{ hcursor=LoadCursor(NULL,IDC_SIZEALL); SetCursor(hcursor);}

if(x>=50&&x<=150&&y>=100&&y<=150)

{ hcursor=LoadCursor(NULL,IDC_UPARROW); SetCursor(hcursor);}

if(x>=150&&x<=250&&y>=100&&y<=150)

{hcursor=LoadCursor(NULL,IDC_WAIT); SetCursor(hcursor);}} SetCursor(hcursor);}

else {hcursor=LoadCursor(NULL,IDC_ARROW); ReleaseDC(hwnd,hdc); break;

case WM_PAINT:

hdc=BeginPaint (hwnd,&PtStr); SetMapMode(hdc,MM_ANISOTROPIC);

hF=(HFONT)GetStockObject(SYSTEM_FONT); hpen=(HPEN)GetStockObject(BLACK_PEN);

SelectObject(hdc,hpen); Rectangle(hdc,50,50,250,150); MoveToEx(hdc,50,100,NULL); LineTo(hdc,250,100);

visual c++

MoveToEx(hdc,150,50,NULL); }

return 0;

EndPaint(hwnd,&PtStr); break;

switch(wParam) {

case VK_CONTROL:

MessageBox(hwnd,"你按下的是control",NULL,MB_OK); break;

MessageBox(hwnd,"你按下的是shift",NULL,MB_OK); break;}

LineTo(hdc,150,150);

case WM_KEYDOWN:

case VK_SHIFT:

break;

case WM_DESTROY: PostQuitMessage(0); }

return 0;

return DefWindowProc(hwnd,messgae,wParam,lParam);

default:

visual c++

(2) 总结鼠标消息、按键消息和字符消息的字参数和长字参数包含信息的意义以及处理方法；

答：1、鼠标消息

长字参数lParam 包含了鼠标位置（相当于窗口的左上角为原点的坐标值）。

低位包含鼠标位置的 x 坐标值高位包含鼠标位置的 y 坐标，字参数wParam 包含了指示各种虚键状态的值

2、按键消息的两个参数

wParam：包含了识别按下的键的虚键码。

lParam（32 位的变量）：重复计数位（0～15 位）、OEM 扫描码（16～23 位）、

扩展键标志（24 位）、保留位（25～28 位）、关联码（29 位）、键的先前状态（位 30）、转换状态（31位）。 3、字符消息

系统字符消息：WM_SYSKEYDOWN和WM_SYSKEYUP按键消息只能产生系统消息。 非系统字符消息：WM_KEYDOWN 和 WM_KEYUP 的按键消息只能产生非系统消息。 (3) 总结实验的心得体会，实验中遇到的困难以及解决的方法等。

通过实验，我掌握键盘和鼠标的消息传递机制和在Windows 程序中处理键盘和鼠标消息的方法。实验中对于坐标的显示遇到困难，主要原因是没有有效刷新引起的，在查阅相关实例后改正，使其能够有效刷新，得到了源程序。

实验五定时器编程实验

一、实验目的

(1) 熟悉Visual C++ 6.0 开发环境；

(2) 掌握API 编程模式中定时器的使用方法

(3) 熟练掌握在Visual C++ 6.0 开发环境调试程序的方法。

二、实验内容

设计一个窗口，在窗口中间位置绘制一个红色粗实线的圆角矩形，并用交替使 用三种不同样式的画刷填充矩形的内部，每次刷新的时间间隔为1.0 秒。

三、实验报告

(1) 列出定时器操作相关的程序清单；

#include"windows.h" #include<stdio.h>

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae,WPARAM wParam,LPARAM lParam); int WINAPI WinMain(HINSTANCE hThisInst,HINSTANCE hPrevInst,LPSTR lpszCdLine,int nCmdShow) {

WNDCLASS ws; HWND hWnd; MSG msg; ws.style=0;

ws.lpfnWndProc=WndProc; ws.cbClsExtra=0; ws.cbWndExtra=0; ws.hInstance=hThisInst;

ws.hIcon=LoadIcon(NULL,IDI_HAND); ws.hCursor=LoadCursor(NULL,IDC_CROSS);

ws.hbrBackground=(HBRUSH) GetStockObject(WHITE_BRUSH);

visual c++

}

ws.lpszClassName="DemoClass"; if(!RegisterClass(&ws)) { }

hWnd=CreateWindow("DemoClass","5、定时器消息编程ShowWindow(hWnd,nCmdShow); UpdateWindow(hWnd);

while(GetMessage(&msg,NULL,0,0)) { }

return msg.wParam;

TranslateMessage(&msg); DispatchMessage(&msg); return -1;

",WS_OVERLAPPEDWINDOW,100,200,640,480,NULL,NULL,hThisInst,NULL);

void CALLBACK TimerProc (HWND hwnd, UINT uMsg, UINT idEvent, DWORD dwTime )

{InvalidateRect(hwnd,NULL,TRUE); }

LRESULT CALLBACK WndProc(HWND hwnd,UINT messgae,WPARAM wParam,LPARAM lParam) {

HDC hdc; HPEN hpen; HBRUSH hbr;

PAINTSTRUCT PtStr; static s=0;

switch(messgae)

case WM_CREATE: SetTimer(hwnd,1,1000,NULL); break;

{

visual c++

hdc=BeginPaint (hwnd,&PtStr);

switch(s)

{ case 0:

{ hbr=(HBRUSH)CreateSolidBrush(RGB(0,0,0));

s++;

SetMapMode(hdc,MM_ANISOTROPIC); hpen=CreatePen(PS_DASH,2,RGB(0,255,0)); SelectObject(hdc,hpen);

case WM_PAINT:

break;} case 1:

SelectObject(hdc,hbr);

RoundRect(hdc,200,150,400,250,40,30); EndPaint(hwnd,&PtStr);

case WM_TIMER: InvalidateRect(hwnd,NULL,TRUE); break;

PostQuitMessage(0); KillTimer(hwnd,1); break;

{ hbr=(HBRUSH)CreateSolidBrush(RGB(255,255,0));

s++;

break;}

{ hbr=CreateHatchBrush(HS_CROSS,RGB(0,255,0));

case 2:

s=0;

break;}

}

case WM_DESTROY:

return 0; default:

visual c++

}

}

return 0;

(2) 总结定时器消息编程的步骤，以及程序设计过程中需要注意的问题； 答：步骤 1、启动定时器

使用 SetTimer 函数创建一个定时器，并制定超时时间，然后启动定时器。该 函数说明如下： UINT SetTimer(

HWND hWnd, // 创建定时器的窗口句柄 UINT nIDEvent, // 定时器标识符

UINT uElapse, // 定时时间，单位是毫秒

TIMERPROC lpTimerFunc // 定时器回调函数地址 );

步骤 2、销毁定时器

定时器在不使用时要使用KillTimer 函数进行销毁，该函数说明如下： BOOL KillTimer(

HWND hWnd, // 创建定时器的窗口句柄 UINT uIDEvent // 定时器标识符 );

(3) 总结实验的心得体会，实验中遇到的困难以及解决的方法等。

通过实验，我掌握了API 编程模式中定时器的使用方法。在对于定时器使用时遇到了

visual c++

困难，在课下查阅相关实例后得到解决。

实验六 MFC 消息映射编程实验

一、实验目的

(1) 熟悉Visual C++ 6.0 开发环境；

(2) 掌握消息映射机制的基本原理和手工添加消息映射的方法； (3) 熟练掌握在Visual C++ 6.0 开发环境调试程序的方法。

二、实验内容

设计MFC 应用程序，手工添加消息映射，实现下面的功能： （1）按下CTRL 键，拖动鼠标绘制矩形； （2）按下SHIFT 键，拖动鼠标绘制椭圆。

三、实验报告

(1) 总结手工添加消息映射的基本步骤；

答：步骤1、在BEGIN_MESSAGE_MAP 和END_MESSAGE_MAP 之间添加消息映射 宏；

BEGIN_MESSAGE_MAP(CDemoView, CView) ON_MESSAGE（WM_LBUTTONDOWN, OnLButtonDown）

ON_COMMAND(ID_OPER_TEST, OnOperTest) END_MESSAGE_MAP( )

步骤2、在类声明中声明成员函数； 步骤3、在类的实现部分实现成员函数。

(2) 列出鼠标绘图功能的实现代码； 头文件部分： #include<afxwin.h>

class CDrawWnd:public CFrameWnd {

protected:

INT x1,y1,x2,y2;BOOL Fid; void OnPaint(WPARAM wparam,LPARAM lparam); LRESULT OnLButtonDown(WPARAM wparam,LPARAM lparam); LRESULT OnMouseMove(WPARAM wparam,LPARAM lparam); DECLARE_MESSAGE_MAP() };

class CDrawApp:public CWinApp {

public:

BOOL InitInstance(); };

CDrawApp ThisApp; 源程序部分： #include"text6.h"

visual c++

BEGIN_MESSAGE_MAP(CDrawWnd,CFrameWnd)

ON_MESSAGE(WM_LBUTTONDOWN,OnLButtonDown) ON_MESSAGE(WM_MOUSEMOVE,OnMouseMove) ON_MESSAGE(WM_PAINT,OnPaint) END_MESSAGE_MAP()

void CDrawWnd::OnPaint(WPARAM wparam,LPARAM lparam) { CPaintDC dc(this); CBrush Brush,*pOldBrush; CPen Pen,*pOldPen;

Pen.CreatePen(PS_DASH,1,RGB(255,0,255)); pOldPen = dc.SelectObject(&Pen); Brush.CreateSolidBrush(RGB(0,0,0)); pOldBrush = dc.SelectObject(&Brush); if(Fid==1) { dc.Ellipse(x1,y1,x2,y2); }

if(Fid==2) { dc.Rectangle(x1,y1,x2,y2); } Fid=0; }

LRESULT CDrawWnd::OnLButtonDown(WPARAM wparam,LPARAM lparam) { x1=LOWORD(lparam); y1=HIWORD(lparam); return 0; }

LRESULT CDrawWnd::OnMouseMove(WPARAM wparam,LPARAM lparam) { if((wparam & MK_CONTROL)&&(wparam&MK_LBUTTON)) { InvalidateRect(NULL); Fid=1;

visual c++

x2=LOWORD(lparam); y2=HIWORD(lparam); } if((wparam & MK_SHIFT)&&(wparam&MK_LBUTTON)) { InvalidateRect(NULL); Fid=2;

x2=LOWORD(lparam); y2=HIWORD(lparam); } return 0; }

BOOL CDrawApp::InitInstance() {

CDrawWnd*pFrame=new CDrawWnd(); pFrame->Create(0,_T("SHUBIAO")); pFrame->ShowWindow(m_nCmdShow); this->m_pMainWnd=pFrame; return TRUE;

}

(3) 总结实验的心得体会，实验中遇到的困难以及解决的方法等。

实验中，我掌握了消息映射机制的基本原理和手工添加消息映射的方法，对MFC编程有

visual c++

了感性认识。实验中，对于图形绘制的条件设置中遇到困难，查阅资料后得到解决。

实验七 MFC 控件编程实验

一、实验目的

(1) 熟悉Visual C++ 6.0 开发环境；

(2) 掌握MFC 环境下标准控件的使用方法；

(3) 熟练掌握在Visual C++ 6.0 开发环境调试程序的方法。

二、实验内容

创建如图所示的基于对话框的应用程序，在图形显示区绘制一个矩形并用单色 画刷填充矩形内部。通过滚动条控件设置填充颜色，并在编辑框中显示颜色的RGB 值，通过单选按钮可以设置矩形的边框线型，“显示图形”复选框可以控制是否显 示矩形。设置完成后，单击“显示”按钮在“图形显示区”显示新的绘图效果。 单击“退出”按钮退出程序。

三、实验报告

(2) 列出控件功能的实现代码； #include "stdafx.h" #include "shiyan7.h" #include "shiyan7Dlg.h" #ifdef _DEBUG

#define new DEBUG_NEW

本文来源：https://www.bwwdw.com/article/srri.html