Bitmap

作者: 王多鱼2 | 来源:发表于2020-11-08 12:38 被阅读0次

    \color{red}{声明:内容禁止转载,总结来自享学课堂知识的搬运,一切为了查找资料的方便;}

    • 一:Bitmap相关方法总结
    • 二:单个像素的字节大小
    • 三:Bitmap加载方式
    • 四:Bitmap | Drawable | InputStream | Byte[ ] 之间进行转换
    • 五:Bitmap常用操作
    • 六:获取Bitmap的大小
    • 七:Bitmap占用内存大小计

    一:Bitmap相关方法总结

    Bitmap

    public void recycle()
    // 回收位图占用的内存空间,把位图标记为Dead

    public final boolean isRecycled()
    //判断位图内存是否已释放

    public final int getWidth()
    //获取位图的宽度

    public final int getHeight()
    //获取位图的高度

    public final boolean isMutable()
    //图片是否可修改

    public int getScaledWidth(Canvas canvas)
    //获取指定密度转换后的图像的宽度

    public int getScaledHeight(Canvas canvas)
    //获取指定密度转换后的图像的高度

    public boolean compress(CompressFormat format, int quality, OutputStream stream)
    //按指定的图片格式以及画质,将图片转换为输出流

    public static Bitmap createBitmap(Bitmap src)
    //以 src 为原图生成不可变得新图像

    public static Bitmap createScaledBitmap(Bitmap src, int dstWidth, intdstHeight, boolean filter)
    //以 src 为原图,创建新的图像,指定新图像的高宽以及是否可变。

    public static Bitmap createBitmap(int width, int height, Config config)
    //创建指定格式、大小的位图

    public static Bitmap createBitmap(Bitmap source, int x, int y, int width, intheight)
    //以 source 为原图,创建新的图片,指定起始坐标以及新图像的高宽。

    BitmapFactory工厂类

    Option 参数类

    public boolean inJustDecodeBounds
    //如果设置为 true ,不获取图片,不分配内存,但会返回图片的高度宽度信息。如果将这个值置为 true ,那么在解码的时候将不会返回 bitmap ,只会返回这个 bitmap 的尺寸。这个属性的目的是,如果你只想知道一个 bitmap 的尺寸,但又不想将其加载到内存时。这是一个非常有用的属性。

    public int inSampleSize
    //图片缩放的倍数, 这个值是一个 int ,当它小于1的时候,将会被当做1处理,如果大于1,那么就会按照比例(1 / inSampleSize) 缩小 bitmap 的宽和高、降低分辨率,大于1时这个值将会被处置为2的倍数。例如, width=100,height=100,inSampleSize=2 ,那么就会将 bitmap 处理为, width=50,height=50 ,宽高降为1 / 2,像素数降为1 / 4。

    public int outWidth
    //获取图片的宽度值

    public int outHeight
    //获取图片的高度值 ,表示这个 Bitmap 的宽和高,一般和inJustDecodeBounds 一起使用来获得 Bitmap 的宽高,但是不加载到内存。

    public int inDensity
    //用于位图的像素压缩比

    public int inTargetDensity
    //用于目标位图的像素压缩比(要生成的位图)

    public byte[] inTempStorage
    //创建临时文件,将图片存储

    public boolean inScaled
    //设置为 true 时进行图片压缩,从 inDensity 到inTargetDensity

    public boolean inDither
    //如果为 true ,解码器尝试抖动解码

    public Bitmap.Config inPreferredConfig
    //设置解码器,这个值是设置色彩模式,默认值是 ARGB_8888 ,在这个模式下,一个像素点占用4bytes空间,一般对透明度不做要求的话,一般采用 RGB_565 模式,这个模式下一个像素点占用2bytes。

    public String outMimeType
    //设置解码图像

    public boolean inPurgeable
    //当存储 Pixel 的内存空间在系统内存不足时是否可以被回收

    public boolean inInputShareable
    // inPurgeable 为 true 情况下才生效,是否可以共享一个 InputStream

    public boolean inPreferQualityOverSpeed
    //为 true 则优先保证 Bitmap 质量其次是解码速度

    public boolean inMutable
    //配置 Bitmap 是否可以更改,比如:在 Bitmap 上隔几个像素加一条线段

    public int inScreenDensity
    //当前屏幕的像素密度

    工厂方法

    public static Bitmap decodeFile(String pathName, Options opts)
    //从文件读取图片

    public static Bitmap decodeFile(String pathName)

    public static Bitmap decodeStream(InputStream is)
    //从输入流读取图片

    public static Bitmap decodeStream(InputStream is, Rect outPadding, Optionsopts)

    public static Bitmap decodeResource(Resources res, int id)
    //从资源文件读取图片

    public static Bitmap decodeResource(Resources res, int id, Options opts)

    public static Bitmap decodeByteArray(byte[] data, int offset, int length)
    //从数组读取图片

    public static Bitmap decodeByteArray(byte[] data, int offset, int length,Options opts)

    public static Bitmap decodeFileDescriptor(FileDescriptor fd) //从文件读取文件 与decodeFile 不同的是这个直接调用JNI函数进行读取 效率比较高

    public static Bitmap decodeFileDescriptor(FileDescriptor fd, Rect outPadding,Options opts)

    二:单个像素的字节大小

    单个像素的字节大小由Bitmap的一个可配置的参数Config来决定。
    Bitmap中,存在一个枚举类Config,定义了Android中支持的Bitmap配置:

    Config 占用字节大小(byte) 说明
    ALPHA_8(1) 1 单透明通道
    RGB_565(3) 2 简易RGB色调
    ARGB—4444(4) 4 已废弃
    ARGB—8888(5) 4 24位真彩色
    RGBA_F16 (6) 8 Android8.0新增(更丰富的色彩表现HDR)
    HARDWARE Special Android8.0新增 (Bitmap直接存储在graphicmemory))

    三:Bitmap加载方式

    Bitmap 的加载方式有 Resource 资源加载、本地(SDcard)加载、网络加载等加载方式。

    1. 从本地(SDcard)文件读取

    方式一

    /**
    * 获取缩放后的本地图片
    *
    * @param filePath 文件路径
    * @param width 宽
    * @param height 高
    * @return
    */
    public static Bitmap readBitmapFromFile(String filePath, int width, intheight) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeFile(filePath, options);
        float srcWidth = options.outWidth;
        float srcHeight = options.outHeight;
        int inSampleSize = 1;
        if (srcHeight > height || srcWidth > width) {
           if (srcWidth > srcHeight) {
                inSampleSize = Math.round(srcHeight / height);
            } else {
                  inSampleSize = Math.round(srcWidth / width);
                    }
          }
          options.inJustDecodeBounds = false;
          options.inSampleSize = inSampleSize;
          return BitmapFactory.decodeFile(filePath, options);
    }
    
    

    方式二 (效率高于方式一)

    /**
    * 获取缩放后的本地图片
    *
    * @param filePath 文件路径
    * @param width 宽
    * @param height 高
    * @return
    */
    public static Bitmap readBitmapFromFileDescriptor(String filePath, intwidth, int height) {
          try {
                FileInputStream fis = new FileInputStream(filePath);
                BitmapFactory.Options options = new BitmapFactory.Options();
                options.inJustDecodeBounds = true;
                BitmapFactory.decodeFileDescriptor(fis.getFD(), null, options);
                float srcWidth = options.outWidth;
                float srcHeight = options.outHeight;
                int inSampleSize = 1;
                if (srcHeight > height || srcWidth > width) {
                        if (srcWidth > srcHeight) {
                             inSampleSize = Math.round(srcHeight / height);
                          } else {
                            inSampleSize = Math.round(srcWidth / width);
                         }
              }
               options.inJustDecodeBounds = false;
               options.inSampleSize = inSampleSize;
        return BitmapFactory.decodeFileDescriptor(fis.getFD(), null,options);
             } catch (Exception ex) {
            }
           return null;
           }
    

    2. 从输入流中读取文件(网络加载)

    /**
    * 获取缩放后的本地图片
    *
    * @param ins 输入流
    * @param width 宽
    * @param height 高
    * @return
    */
    public static Bitmap readBitmapFromInputStream(InputStream ins, int width,int height) {
                    BitmapFactory.Options options = new BitmapFactory.Options();
                    options.inJustDecodeBounds = true;
                    BitmapFactory.decodeStream(ins, null, options);
                    float srcWidth = options.outWidth;
                    float srcHeight = options.outHeight;
                    int inSampleSize = 1;
                    if (srcHeight > height || srcWidth > width) {
                          if (srcWidth > srcHeight) {
                                inSampleSize = Math.round(srcHeight / height);
                            } else {
                                  inSampleSize = Math.round(srcWidth / width);
                          }
                   }
                  options.inJustDecodeBounds = false;
                  options.inSampleSize = inSampleSize;
                  return BitmapFactory.decodeStream(ins, null, options);
                }
    
    

    3.Resource资源加载

    Res资源加载方式:

    public static Bitmap readBitmapFromResource(Resources resources, intresourcesId, int width, int height) {
                       BitmapFactory.Options options = new BitmapFactory.Options();
                      options.inJustDecodeBounds = true;
                      BitmapFactory.decodeResource(resources, resourcesId, options);
                      float srcWidth = options.outWidth;
                     float srcHeight = options.outHeight;
                    int inSampleSize = 1;
                   if (srcHeight > height || srcWidth > width) {
                            if (srcWidth > srcHeight) {
                                  inSampleSize = Math.round(srcHeight / height);
                           } else {
                                 inSampleSize = Math.round(srcWidth / width);
                               }
                       }
                   options.inJustDecodeBounds = false;
                  options.inSampleSize = inSampleSize;
                   return BitmapFactory.decodeResource(resources, resourcesId, options);
    }
    

    此种方式相当的耗费内存 建议采用 decodeStream 代替 decodeResource 可以如下形式:

    public static Bitmap readBitmapFromResource(Resources resources, intresourcesId, int width, int height) {
                        InputStream ins = resources.openRawResource(resourcesId);
                        BitmapFactory.Options options = new BitmapFactory.Options();
                        options.inJustDecodeBounds = true;
                        BitmapFactory.decodeStream(ins, null, options);
                       float srcWidth = options.outWidth;
                       float srcHeight = options.outHeight;
                       int inSampleSize = 1;
                     if (srcHeight > height || srcWidth > width) {
                           if (srcWidth > srcHeight) {
                             inSampleSize = Math.round(srcHeight / height);
                            } else {
                              inSampleSize = Math.round(srcWidth / width);
                             }
                           }
                     options.inJustDecodeBounds = false;
                    options.inSampleSize = inSampleSize;
           return BitmapFactory.decodeStream(ins, null, options);
    }
    

    BitmapFactory.decodeResource 加载的图片可能会经过缩放,该缩放目前是放在 java 层做的,效率
    比较低,而且需要消耗 java 层的内存。因此,如果大量使用该接口加载图片,容易导致OOM错误
    BitmapFactory.decodeStream 不会对所加载的图片进行缩放,相比之下占用内存少,效率更高。
    这两个接口各有用处,如果对性能要求较高,则应该使用 decodeStream ;如果对性能要求不高,且需
    要 Android 自带的图片自适应缩放功能,则可以使用 decodeResource 。

    4.Assets资源加载方式:

    /**
    * 获取缩放后的本地图片
    *
    * @param filePath 文件路径,即文件名称
    * @return
    */
    public static Bitmap readBitmapFromAssetsFile(Context context, String filePath) {
                   Bitmap image = null;
                   AssetManager am = context.getResources().getAssets();
               try {
                    InputStream is = am.open(filePath);
                    image = BitmapFactory.decodeStream(is);
                    is.close();
                  } catch (IOException e) {
                 e.printStackTrace();
                }
              return image;
    }
    

    5.从二进制数据读取图片

    public static Bitmap readBitmapFromByteArray(byte[] data, int width, int height) {
                     BitmapFactory.Options options = new BitmapFactory.Options();
                     options.inJustDecodeBounds = true;
                     BitmapFactory.decodeByteArray(data, 0, data.length, options);
                     float srcWidth = options.outWidth;
                     float srcHeight = options.outHeight;
                     int inSampleSize = 1;
                     if (srcHeight > height || srcWidth > width) {
                          if (srcWidth > srcHeight) {
                                 inSampleSize = Math.round(srcHeight / height);
                             } else {
                                  inSampleSize = Math.round(srcWidth / width);
                                }
                          }
                   options.inJustDecodeBounds = false;
                   options.inSampleSize = inSampleSize;
          return BitmapFactory.decodeByteArray(data, 0, data.length, options);
     }
    

    四:Bitmap | Drawable | InputStream | Byte[ ] 之间进行转换

    1.Drawable转化成Bitmap

    public static Bitmap drawableToBitmap(Drawable drawable) {
            Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
                 drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565);
            Canvas canvas = new Canvas(bitmap);
             drawable.setBounds(0, 0, drawable.getIntrinsicWidth(),
            drawable.getIntrinsicHeight());
            drawable.draw(canvas);
            return bitmap;
    }
    
    

    drawable 的获取方式: Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);

    2.Bitmap转换成Drawable

    public static Drawable bitmapToDrawable(Resources resources, Bitmap bm) {
                  Drawable drawable = new BitmapDrawable(resources, bm);
               return drawable;
    }
    

    3.Bitmap转换成byte[]

    public byte[] bitmap2Bytes(Bitmap bm) {
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            bm.compress(Bitmap.CompressFormat.PNG, 100, baos);
         return baos.toByteArray();
    }
    

    4.byte[]转换成Bitmap

    Bitmap bitmap = BitmapFactory.decodeByteArray(byte, 0, b.length);
    

    5.InputStream转换成Bitmap

    InputStream is = getResources().openRawResource(id);
    Bitmap bitmap = BitmaoFactory.decodeStream(is);
    

    6.InputStream转换成byte[]

    InputStream is = getResources().openRawResource(id);//也可以通过其他方式接收一个InputStream对象
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    byte[] b = new byte[1024*2];
    int len = 0;
    while ((len = is.read(b, 0, b.length)) != -1)
    {
    baos.write(b, 0, len);
    baos.flush();
    }
    byte[] bytes = baos.toByteArray();
    

    五:Bitmap常用操作

    1.将Bitmap保存为本地文件:

    public static void writeBitmapToFile(String filePath, Bitmap b, int quality)
    {
    try {
       File desFile = new File(filePath);
       FileOutputStream fos = new FileOutputStream(desFile);
       BufferedOutputStream bos = new BufferedOutputStream(fos);
        b.compress(Bitmap.CompressFormat.JPEG, quality, bos);
        bos.flush();
         bos.close();
    } catch (IOException e) {
        e.printStackTrace();
      }
    }
    

    2.图片压缩:

    private static Bitmap compressImage(Bitmap image) {
    if (image == null) {
    return null;
    }
    ByteArrayOutputStream baos = null;
    try {
    baos = new ByteArrayOutputStream();
    image.compress(Bitmap.CompressFormat.JPEG, 50, baos);
    byte[] bytes = baos.toByteArray();
    ByteArrayInputStream isBm = new ByteArrayInputStream(bytes);
    Bitmap bitmap = BitmapFactory.decodeStream(isBm);
    return bitmap;
    } catch (OutOfMemoryError e) {
    } finally {
    try {
    if (baos != null) {
    baos.close();
    }
    } catch (IOException e) {
    }
    }
    return null;
    }
    
    

    3.图片缩放:

    /**
    * 根据scale生成一张图片
    *
    * @param bitmap
    * @param scale 等比缩放值
    * @return
    */
    public static Bitmap bitmapScale(Bitmap bitmap, float scale) {
    Matrix matrix = new Matrix();
    matrix.postScale(scale, scale); // 长和宽放大缩小的比例
    Bitmap resizeBmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
    bitmap.getHeight(),
    matrix, true);
    return resizeBmp;
    }
    

    4.获取图片旋转角度:

    /**
    * 读取照片exif信息中的旋转角度
    *
    * @param path 照片路径
    * @return角度
    */
    private static int readPictureDegree(String path) {
    if (TextUtils.isEmpty(path)) {
    return 0;
    }
    int degree = 0;
    try {
    ExifInterface exifInterface = new ExifInterface(path);
    int orientation =
    exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION,
    ExifInterface.ORIENTATION_NORMAL);
    switch (orientation) {
    case ExifInterface.ORIENTATION_ROTATE_90:
    degree = 90;
    break;
    case ExifInterface.ORIENTATION_ROTATE_180:
    degree = 180;
    break;
    case ExifInterface.ORIENTATION_ROTATE_270:
    degree = 270;
    break;
    }
    } catch (Exception e) {
    }
    return degree;
    }
    

    5.设置图片旋转角度

    private static Bitmap rotateBitmap(Bitmap b, float rotateDegree) {
    if (b == null) {
    return null;
    }
    Matrix matrix = new Matrix();
    matrix.postRotate(rotateDegree);
    Bitmap rotaBitmap = Bitmap.createBitmap(b, 0, 0, b.getWidth(),
    b.getHeight(), matrix, true);
    return rotaBitmap;
    }
    

    6.通过图片id获得Bitmap:

    Bitmap bitmap=BitmapFactory.decodeResource(getResources(),
    R.drawable.ic_launcher);
    
    

    7.通过 assest 获取 获得Drawable bitmap:

    InputStream in = this.getAssets().open("ic_launcher");
    Drawable da = Drawable.createFromStream(in, null);
    Bitmap mm = BitmapFactory.decodeStream(in);
    
    

    8.通过 sdcard 获得 bitmap

    Bitmap bit = BitmapFactory.decodeFile("/sdcard/android.jpg");
    
    

    9.view转Bitmap

    public static Bitmap convertViewToBitmap(View view, int bitmapWidth, int bitmapHeight){
    Bitmap bitmap = Bitmap.createBitmap(bitmapWidth, bitmapHeight,Bitmap.Config.ARGB_8888);
    view.draw(new Canvas(bitmap));
    return bitmap;
    }
    

    10.将控件转换为bitmap

    public static Bitmap convertViewToBitMap(View view){
    // 打开图像缓存
    view.setDrawingCacheEnabled(true);
    // 必须调用measure和layout方法才能成功保存可视组件的截图到png图像文件
    // 测量View大小
    view.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
    MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
    // 发送位置和尺寸到View及其所有的子View
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    // 获得可视组件的截图
    Bitmap bitmap = view.getDrawingCache();
    return bitmap;
    }
    
    public static Bitmap getBitmapFromView(View view){
    Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(),
    view.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(returnedBitmap);
    Drawable bgDrawable = view.getBackground();
    if (bgDrawable != null)
    bgDrawable.draw(canvas);
    else
    canvas.drawColor(Color.WHITE);
    view.draw(canvas);
    return returnedBitmap;
    }
    

    11.放大缩小图片

    public static Bitmap zoomBitmap(Bitmap bitmap,int w,int h){
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    Matrix matrix = new Matrix();
    float scaleWidht = ((float)w / width);
    float scaleHeight = ((float)h / height);
    matrix.postScale(scaleWidht, scaleHeight);
    Bitmap newbmp = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix,
    true);
    return newbmp;
    }
    

    12.获得圆角图片的方法

    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,float roundPx){
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
    .getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    return output;
    }
    

    13.对 bitmap 进行裁剪

    public Bitmap bitmapClip(Context context , int id , int x , int y){
    Bitmap map = BitmapFactory.decodeResource(context.getResources(), id);
    map = Bitmap.createBitmap(map, x, y, 120, 120);
    return map;
    }
    
    

    六:获取Bitmap的大小

    1. getByteCount()

    getByteCount()方法是在API12加入的,代表存储Bitmap的色素需要的最少内存。API19开始
    getAllocationByteCount()方法代替了getByteCount()。

    2. getAllocationByteCount()

    API19之后,Bitmap加了一个Api:getAllocationByteCount();代表在内存中为Bitmap分配的内存大
    小。

    public final int getAllocationByteCount() {
    if (mBuffer == null) {
    //mBuffer代表存储Bitmap像素数据的字节数组。
    return getByteCount();
    }
    return mBuffer.length;
    }
    

    3. getByteCount()与getAllocationByteCount()的区别

    一般情况下两者是相等的

    通过复用Bitmap来解码图片,如果被复用的Bitmap的内存比待分配内存的Bitmap大,那么
    getByteCount()表示新解码图片占用内存的大小(并非实际内存大小,实际大小是复用的那个
    Bitmap的大小),getAllocationByteCount()表示被复用Bitmap真实占用的内存大小(即mBuffer
    的长度)

    七:Bitmap占用内存大小计算

    Bitmap作为位图,需要读入一张图片每一个像素点的数据,其主要占用内存的地方也正是这些像素数
    据。对于像素数据总大小,我们可以猜想为:像素总数量 × 每个像素的字节大小,而像素总数量在矩形
    屏幕表现下,应该是:横向像素数量 × 纵向像素数量,结合得到:

    Bitmap内存占用 ≈ 像素数据总大小 = 横向像素数量 × 纵向像素数量 × 每个像素的字节大小

    但真是如此吗?

    我们来看下源码,Bitmap的decode过程实际上是在native层完成的,为此,需要从
    BitmapFactory.cpp#nativeDecodeXXX方法开始跟踪,最终在doDecode方法里面
    代码忽略,没必要什么都了解,只知道结论就行;
    ....
    ....
    ....

    从上述代码中,我们看到bitmap最终通过canvas绘制出来,而canvas在绘制之前,有一个scale的操
    作,scale的值由

    scale = (float) targetDensity / density;

    这一行代码决定,即缩放的倍率和targetDensity和density相关,而这两个参数都是从传入的options中
    获取到的

    • inDensity:Bitmap位图自身的密度、分辨率
    • inTargetDensity: Bitmap最终绘制的目标位置的分辨率
    • inScreenDensity: 设备屏幕分辨率
      其中inDensity和图片存放的资源文件的目录有关,同一张图片放置在不同目录下会有不同的值:
      111.png

    可以验证几个结论:

    1. 图片放在drawable中,等同于放在drawable-mdpi中,原因为:drawable目录不具有屏幕密度特
      性,所以采用基准值,即mdpi
    2. 图片放在某个特定drawable中,比如drawable-hdpi,如果设备的屏幕密度高于当前drawable目
      录所代表的密度,则图片会被放大,否则会被缩小
      放大或缩小比例 = 设备屏幕密度 / drawable目录所代表的屏幕密度

    因此,关于Bitmap占用内存大小的公式,从之前:

    Bitmap内存占用 ≈ 像素数据总大小 = 横向像素数量 × 纵向像素数量 × 每个像素的字节大小

    可以更细化为:

    Bitmap内存占用 ≈ 像素数据总大小 = 图片宽 × 图片高× (设备分辨率/资源目录分辨率)^2 × 每个像
    素的字节大小

    相关文章

      网友评论

        本文标题:Bitmap

        本文链接:https://www.haomeiwen.com/subject/mpgcbktx.html