網頁編程：如何在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 對象常用屬性和方法

直線的繪制

繪制直線示例完整代碼

用直線畫一個三角形

您的項目需求