HTML基础、canvas

简介: 介绍了html的一些基础和标签

开发环境

网络异常,图片无法展示
|

编辑器vscode下载地址:code.visualstudio.com/

vscode插件的推荐:

  • open in browser
  • Chinese
  • Auto Rename Tag

第一个html程序

从h1到h6一共有六个标题,字体大小逐级递减,p是段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    .....
    <h6>六级标题</h6>
    <p>段落</p>
</body>
</html>
复制代码

按下键盘中的Alt+b就可以在浏览器上运行html代码,相当于一个解析的dom树

网络异常,图片无法展示
|

html的语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如input、meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略,比如required、readonly

html基础

<a href="https://www.bytedance.com/">字节跳动官网</a> <br>
   <a href="https://juejin.cn/">稀土掘金官网</a>
   <a href=""></a>
   <input type="text">
   <p>这个<br>段落<br>演示了分行的效果</p>
复制代码
  • 链接:<a href=""></a>,链接的地址在 href 属性中指定
  • 换行: <br>
  • 表单类的输入:<input type="text">
  • 插入图片:<img src="" alt="">

image.png

遵循语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 有序用ol,无序用ul
  • lang属性表示内容所使用的语言

H5新增

<canvas>:标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

<canvas id="myCanvas" width="200" height="200"
style="border:1px solid red;">
</canvas>
复制代码

绘画一个红色的正方形

网络异常,图片无法展示
|

总结

html的上手很简单,也是前端的入门,现在新增了一些h5的新元素可以去官网看看。



目录
相关文章
|
2月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
64 29
|
2月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
22 1
|
3月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
56 5
|
4月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
42 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
4月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
58 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
8月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
140 0
|
9月前
|
移动开发 前端开发 API
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke)
115 3
|
4月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
49 5
|
6月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
6月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。

热门文章

最新文章