HTML(5) 笔记 | 青训营

菜包苟
99 阅读2分钟

HTML

HTML(HyperText MarkUp Language) 超文本标记语言
权威网址：MDN Web Docs (mozilla.org)

HTML 语法

<!DOCTYPE html>
<html>

<head>
    <title>文档标题</title>
</head>

<body> 可见文本... </body>

</html>
  • <!DOCTYPE html> 即 documentType html，用于说明文档类型为 html
  • <html></html> 内部分为 <head></head> 和 <body></body> 两个主体
    • <head></head> 用于存放一个文档的头部元素，大致有
      标签含义
      title文档标题
      meta搜索引擎信息
      stylecss样式
      link链接外部资源
    • <body></body> 这是文档主体部分，浏览器的界面就是在这个元素中
      HTML 速查列表 | 菜鸟教程 (runoob.com)

DOM 树

DOM(Document Object Model) 是专门操作网页内容的一套对象和函数的总称
一个网页的所有内容，在浏览器内存中，都是以树形结构保存的，树形结构是最直观的展现上下级包含关系的结构。而网页内容中的元素结构，也是上下级包含关系。 image.png

页面框架

下图是一般网页采用的页面框架 image.png

HTML 5

是最新版的 HTML 其中包含了许多新功能，以下是新功能的介绍以及教程
HTML5 教程 | 菜鸟教程 (runoob.com)
HTML5 的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

Canvas 画布

canvas 参考手册：HTML 画布 | 菜鸟教程 (runoob.com)

下面简单介绍其用法：
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

<canvas> 默认没有边框和内容，自己设置，容器宽高等属性也可以自己设置

创建 canvas 画布

  1. 创建画布

    <style>
    #myCanvas {
      border: 1px solid #000;
      width: 200px;
      height: 100px;
    }
</style>
<body>
  <canvas id="myCanvas">你的浏览器不支持该标签</canvas>
</body>

    效果如上图image.png

  2. 使用 JavaScript 绘制图像

    <script>
    var c=document.getElementById("myCanvas");  // 获取元素
    var ctx=c.getContext("2d");  // 创建对象
    ctx.fillStyle="#FF0000";  // 设置填充颜色
    ctx.fillRect(0,0,150,75);  // 设置填充大小 (起始点x，起始点y，终点x，终点y)
</script>

    效果如上图image.png

canvas 坐标

左上角为原点，往右为 x 坐标，往下为 y 坐标

image.png

canvas 路径

实例 1
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);  // 起始位置
ctx.lineTo(200,100);  // 终止位置
ctx.stroke();
</script>

效果如上图image.png

实例 2 使用 arc() 方法 绘制一个圆:

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>

效果如上图image.png

canvas SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是一种使用 XML 描述 2D 图形的语言

总结

通过课程学习，我重新复习了一下 HTML 的语法知识，并了解了 DOM 树，对 HTML 有了更深入的认知。研究学习了 HTML5 的一些新特性。

avatar
文章
阅读
粉丝