网页编程：如何在HTML中插入一条水平线？

天的主题是网页编程中的水平线。

同学们好，今天我来分享一些免费的少儿编程知识。只要每天坚持学习一行代码，你也可以成为编程高手！今天我们要学习如何在HTML中插入一条水平线，使用的是HR标签。HR是一个自闭合标签，虽然它没有标准的属性，但我们可以通过CSS来控制它的外观。

先来看看我们的实例效果。在页面上，两行文字被一条直线分开。这条直线就是HR标签，效果已经展示出来了。现在我们来看看实现的代码。HR标签的写法非常简单，但在最开始的时候，它有四个属性，现在已经不被标准支持了。尽管如此，我们仍然可以使用它。

今天的实例中，我们已经将这些标签加入到了代码中。如果你感兴趣，可以查看下方的代码。按下空格键可以看到过时的属性不会被智能提示，但这并不影响代码的正确性。将注释取消后保存，然后回到浏览器刷新，可以看到属性仍然有效。线条的高度为3，宽度为400，并且居中显示。取消阴影后，线条将变为纯色。

这只是一个演示，你可以参考一下。从这个示例中，我们可以看到，HR标签的宽度是根据页面宽度自动调整的。当它的宽度达到整个浏览器时，它会自动换行。既然属性已经过时了，那么我们如何通过HTML来控制外观呢？CSS是我们今天要学习的内容。

先取消注释的代码，让HTML失效，然后保存。回到浏览器刷新，就可以看到线条变成了蓝色。

今天的分享就到这里，希望各位同学可以试着写三遍，不需要看视频也可以掌握这个技巧。如果你需要案例和相关文档，可以向我咨询。

我们下期再见，想学习编程的同学记得关注哦。

anvas 简介

HTML Canvas，说得简单一点，就是使用 JavaScript 操作 Canvas 元素绘制各种图形的技术。

使用 Canvas 元素绘制图形大体需要三步：

获取 Canvas 对象；
获取上下文环境对象；
开始绘制图形。

入门示例

我们先来编写一个非常简单的入门示例 —— 绘制一条直线。

声明 Canvas DOM 元素

<canvas id="canvas" width="200" height="150" style="border: 1px dashed #333333"></canvas>

声明 Canvas DOM 元素时我们指定了4个属性：id、width、height 和 style。默认情况下，Canvas 的宽度为300px，高度为150px。

操作 Canvas 元素绘制图形

// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.moveTo(50, 100);
ctx.lineTo(150, 50);
ctx.stroke();

我们首先使用 document.getElementById()方法获取到 canvas 对象，然后使用 canvas 对象的getContext("2d")方法获取上下文环境对象 context，最后使用 context 对象的属性和方法绘制了一条直线。

Canvas 对象常用属性和方法

属性或方法	说明
width	Canvas 的宽度
height	Canvas 的高度
getContext("2d")	获取 Canvas 2D 上下文环境对象

获取 Canvas 的宽度和高度：

var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
console.log("Canvas的宽度为：", width, "，高度为：", height);

直线的绘制

在 Canvas 中，绘制一条直线需要 moveTo()和lineTo()两个方法配合使用。绘制一条直线的语法如下：

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

其中ctx表示上下文环境对象 context。

(x1, y1)表示直线的起点坐标。moveTo(x1, y1)的含义是将画笔移动到(x1, y1)位置。

(x2, y2)表示直线的终点坐标。lineTo(x2, y2)的含义是从起点(x1, y1)位置到终点(x2, y2)位置绘制一条直线。

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);

上面两行代码只是确定了直线的起点和终点，还没有真正绘制直线。只有调用了上下文对象的stroke()方法才是真的执行了绘制操作。

绘制直线示例完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绘制直线</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="border: 1px dashed #333333"
    ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
        ctx.moveTo(50, 100);
        ctx.lineTo(150, 50);
        ctx.stroke();
      };
    </script>
  </body>
</html>

用直线画一个三角形

立一个文本文档,复制粘贴如下代码.将文件的后缀名改为.html.用谷歌浏览器打开可查看效果

有的效果,可能别的浏览器不支持.

我是阿平,自学编程的小白!大神请绕道!

<!doctype html>

<html>

<head>

<title>爱你的阿平</title>

</head>

<body>

<!-- <p><b>定义粗体文本</b></p>

<p><em>定义着重文字</em></p>

<p><i>定义斜体字</i></p>

<p><small>定义小号字<small></p>

<p><strong>定义重要的文本<strong></p>

<p><ins>定义插入字</ins></p>

<p><del>定义删除字</del></p>

<nav>

<a href="/jquery">JQuery</a>

</nav>

<p>World Wide Web Consortium(W3C)是万维网联盟...</p>

</section>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World,Florida</p>

</aside>

你的浏览器不支持audio元素

</audio>

<br/>

你的浏览器不支持video标签

</video>

<!-- 下载进度:

<br/>

<!-- </svg>

<!-- <svg width="1000" height="1000">

<!-- </svg>

<!-- <svg width="500" height="510">

<line x1="20" y1="20" x2="300" y2="300"

style="stroke:#000000;stroke-linecap:round; stroke-width:20" />

<!-- </svg>

<!-- <svg width="2000" height="500" >

<polyline style="stroke-linejoin:miter; stroke:orange; stroke-width:12; fill=none;"

points="100 100,150 150, 200 100" />

<!-- </svg>

<!-- </svg>

<!-- <svg width="1000" height="1000">

<polygon points="100 100,200 200, 300 0"

style="fill:Cyan; stroke:black;" />

</svg>

<!-- <svg width="1000" height="250">

</rect>

</svg>

<!-- <svg width="500" height="500">

</svg>

<!-- ctx.font="bold 20px Arial;

<!-- ctx.fillText=("阿平加油!",20,40);

</canvas> -->

<br/>

<form>

username:<input type="text" name="username" placeholder="用户名" autofocus required autocomplete="爱你的阿平"/>

</form>

<option value="Internet Explorer">

</datalist>

<img src="http://m.qpic.cn/psb?/V13EM30s1KV4Be/cyuWdaEOm1w7Wj26pxCJ906Tr4iZc6FEBcwEZvRg7Mo!/b/dDIBAAAAAAAA&bo=CAc4BAAAAAARNzM!&rf=viewer_4" width="300" height="200" align="center" alt="思念" border="10"/>

</p>

</div>

<ul>

</ul>

<hr/>

<ol>

</ol>

<hr/>

</body>

</html>

<br>

注意: 有的标签是没有align属性的,本代码中有的align是无效的. 若要测试部分代码的效果,请把"<!--" 删除

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页编程：如何在HTML中插入一条水平线？

anvas 简介

入门示例

声明 Canvas DOM 元素

操作 Canvas 元素绘制图形

Canvas 对象常用属性和方法

直线的绘制

绘制直线示例完整代码

用直线画一个三角形

您的项目需求