網(wǎng)頁編程：如何在HTML中插入一條水平線？

天的主題是網(wǎng)頁編程中的水平線。

同學(xué)們好，今天我來分享一些免費(fèi)的少兒編程知識。只要每天堅(jiān)持學(xué)習(xí)一行代碼，你也可以成為編程高手！今天我們要學(xué)習(xí)如何在HTML中插入一條水平線，使用的是HR標(biāo)簽。HR是一個(gè)自閉合標(biāo)簽，雖然它沒有標(biāo)準(zhǔn)的屬性，但我們可以通過CSS來控制它的外觀。

先來看看我們的實(shí)例效果。在頁面上，兩行文字被一條直線分開。這條直線就是HR標(biāo)簽，效果已經(jīng)展示出來了。現(xiàn)在我們來看看實(shí)現(xiàn)的代碼。HR標(biāo)簽的寫法非常簡單，但在最開始的時(shí)候，它有四個(gè)屬性，現(xiàn)在已經(jīng)不被標(biāo)準(zhǔn)支持了。盡管如此，我們?nèi)匀豢梢允褂盟?/p>

今天的實(shí)例中，我們已經(jīng)將這些標(biāo)簽加入到了代碼中。如果你感興趣，可以查看下方的代碼。按下空格鍵可以看到過時(shí)的屬性不會被智能提示，但這并不影響代碼的正確性。將注釋取消后保存，然后回到瀏覽器刷新，可以看到屬性仍然有效。線條的高度為3，寬度為400，并且居中顯示。取消陰影后，線條將變?yōu)榧兩?/p>

這只是一個(gè)演示，你可以參考一下。從這個(gè)示例中，我們可以看到，HR標(biāo)簽的寬度是根據(jù)頁面寬度自動調(diào)整的。當(dāng)它的寬度達(dá)到整個(gè)瀏覽器時(shí)，它會自動換行。既然屬性已經(jīng)過時(shí)了，那么我們?nèi)绾瓮ㄟ^HTML來控制外觀呢？CSS是我們今天要學(xué)習(xí)的內(nèi)容。

先取消注釋的代碼，讓HTML失效，然后保存。回到瀏覽器刷新，就可以看到線條變成了藍(lán)色。

今天的分享就到這里，希望各位同學(xué)可以試著寫三遍，不需要看視頻也可以掌握這個(gè)技巧。如果你需要案例和相關(guān)文檔，可以向我咨詢。

我們下期再見，想學(xué)習(xí)編程的同學(xué)記得關(guān)注哦。

anvas 簡介

HTML Canvas，說得簡單一點(diǎn)，就是使用 JavaScript 操作 Canvas 元素繪制各種圖形的技術(shù)。

使用 Canvas 元素繪制圖形大體需要三步：

獲取 Canvas 對象；
獲取上下文環(huán)境對象；
開始繪制圖形。

入門示例

我們先來編寫一個(gè)非常簡單的入門示例 —— 繪制一條直線。

聲明 Canvas DOM 元素

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

聲明 Canvas DOM 元素時(shí)我們指定了4個(gè)屬性：id、width、height 和 style。默認(rèn)情況下，Canvas 的寬度為300px，高度為150px。

操作 Canvas 元素繪制圖形

// 1、獲取 Canvas 對象
var canvas = document.getElementById("canvas");
// 2、獲取上下文環(huán)境對象
var ctx = canvas.getContext("2d");
// 3、開始繪制圖形
ctx.moveTo(50, 100);
ctx.lineTo(150, 50);
ctx.stroke();

我們首先使用 document.getElementById()方法獲取到 canvas 對象，然后使用 canvas 對象的getContext("2d")方法獲取上下文環(huán)境對象 context，最后使用 context 對象的屬性和方法繪制了一條直線。

Canvas 對象常用屬性和方法

屬性或方法	說明
width	Canvas 的寬度
height	Canvas 的高度
getContext("2d")	獲取 Canvas 2D 上下文環(huán)境對象

獲取 Canvas 的寬度和高度：

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

直線的繪制

在 Canvas 中，繪制一條直線需要 moveTo()和lineTo()兩個(gè)方法配合使用。繪制一條直線的語法如下：

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

其中ctx表示上下文環(huán)境對象 context。

(x1, y1)表示直線的起點(diǎn)坐標(biāo)。moveTo(x1, y1)的含義是將畫筆移動到(x1, y1)位置。

(x2, y2)表示直線的終點(diǎn)坐標(biāo)。lineTo(x2, y2)的含義是從起點(diǎn)(x1, y1)位置到終點(diǎn)(x2, y2)位置繪制一條直線。

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

上面兩行代碼只是確定了直線的起點(diǎn)和終點(diǎn)，還沒有真正繪制直線。只有調(diào)用了上下文對象的stroke()方法才是真的執(zhí)行了繪制操作。

繪制直線示例完整代碼

<!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、獲取上下文環(huán)境對象
        var ctx = canvas.getContext("2d");
        // 3、開始繪制圖形
        ctx.moveTo(50, 100);
        ctx.lineTo(150, 50);
        ctx.stroke();
      };
    </script>
  </body>
</html>

用直線畫一個(gè)三角形

立一個(gè)文本文檔,復(fù)制粘貼如下代碼.將文件的后綴名改為.html.用谷歌瀏覽器打開可查看效果

有的效果,可能別的瀏覽器不支持.

我是阿平,自學(xué)編程的小白!大神請繞道!

<!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)是萬維網(wǎng)聯(lián)盟...</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標(biāo)簽

</video>

<!-- 下載進(jìn)度:

<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>

注意: 有的標(biāo)簽是沒有align屬性的,本代碼中有的align是無效的. 若要測試部分代碼的效果,請把"<!--" 刪除

在線咨詢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁編程：如何在HTML中插入一條水平線？

anvas 簡介

入門示例

聲明 Canvas DOM 元素

操作 Canvas 元素繪制圖形

Canvas 對象常用屬性和方法

直線的繪制

繪制直線示例完整代碼

用直線畫一個(gè)三角形

您的項(xiàng)目需求