天的主題是網頁編程中的水平線。
同學們好,今天我來分享一些免費的少兒編程知識。只要每天堅持學習一行代碼,你也可以成為編程高手!今天我們要學習如何在HTML中插入一條水平線,使用的是HR標簽。HR是一個自閉合標簽,雖然它沒有標準的屬性,但我們可以通過CSS來控制它的外觀。
先來看看我們的實例效果。在頁面上,兩行文字被一條直線分開。這條直線就是HR標簽,效果已經展示出來了。現在我們來看看實現的代碼。HR標簽的寫法非常簡單,但在最開始的時候,它有四個屬性,現在已經不被標準支持了。盡管如此,我們仍然可以使用它。
今天的實例中,我們已經將這些標簽加入到了代碼中。如果你感興趣,可以查看下方的代碼。按下空格鍵可以看到過時的屬性不會被智能提示,但這并不影響代碼的正確性。將注釋取消后保存,然后回到瀏覽器刷新,可以看到屬性仍然有效。線條的高度為3,寬度為400,并且居中顯示。取消陰影后,線條將變為純色。
這只是一個演示,你可以參考一下。從這個示例中,我們可以看到,HR標簽的寬度是根據頁面寬度自動調整的。當它的寬度達到整個瀏覽器時,它會自動換行。既然屬性已經過時了,那么我們如何通過HTML來控制外觀呢?CSS是我們今天要學習的內容。
先取消注釋的代碼,讓HTML失效,然后保存。回到瀏覽器刷新,就可以看到線條變成了藍色。
今天的分享就到這里,希望各位同學可以試著寫三遍,不需要看視頻也可以掌握這個技巧。如果你需要案例和相關文檔,可以向我咨詢。
我們下期再見,想學習編程的同學記得關注哦。
HTML Canvas,說得簡單一點,就是使用 JavaScript 操作 Canvas 元素繪制各種圖形的技術。
使用 Canvas 元素繪制圖形大體需要三步:
我們先來編寫一個非常簡單的入門示例 —— 繪制一條直線。
<canvas id="canvas" width="200" height="150" style="border: 1px dashed #333333"></canvas>
聲明 Canvas DOM 元素時我們指定了4個屬性:id、width、height 和 style。默認情況下,Canvas 的寬度為300px,高度為150px。
// 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 對象的屬性和方法繪制了一條直線。
屬性或方法 | 說明 |
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>
<meta charset="GBK">
<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>下標<sub>字</sub></p>
<p>上標<sup>字</sup></p>
<p><ins>定義插入字</ins></p>
<p><del>定義刪除字</del></p>
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JS</a>
<a href="/jquery">JQuery</a>
</nav>
<section>
<h1>W3C</h1>
<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 controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
你的瀏覽器不支持audio元素
</audio>
<br/>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie=ogg" type="video/ogg">
你的瀏覽器不支持video標簽
</video>
<br/> <!-- 換行 -->
<!-- 下載進度:
<progress value="30" max="100"></progress>
<br/>
<svg width="1000" height="1000"> <!-- 可伸縮矢量圖形-->
<circle cx="100" cy="50" r="40" fill="red" /> <!-- 圓,省略cx,xy圓心默認就是(0,0)-->
<!-- </svg>
<!-- <svg width="1000" height="1000">
<rect width="400" height="200" x="20" y="20" fill="green" /> <!-- 矩形-->
<!-- </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 width="500" heigh="500">
<ellipse cx="200" cy="100" rx="150" ry="30" style="fill:blue" /> <!-- 橢圓-->
<!-- </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 width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2" /> <!-- svg動畫-->
</rect> <!-- attributeName(指定產生動畫的屬性),repeatCount(循環次數,屬性值:indefinite-無限循環-->
</svg>
<!-- <svg width="500" height="500">
<path d="M50 0 L75 200 L225 200 Z"/> <!-- 路徑-->
</svg>
<!-- <canvas id="myCanvas" width="200" height="100"> <!-- <canvas>標簽必須指定一個id(腳本中經常引用)-->
<!-- ctx.font="bold 20px Arial;
<!-- ctx.textAlign="阿平加油!"; <!-- 此部分代碼應該在js中-->
<!-- ctx.fillText=("阿平加油!",20,40);
</canvas> -->
<br/>
<div class="section">
<form>
username:<input type="text" name="username" placeholder="用戶名" autofocus required autocomplete="愛你的阿平"/> <!--autocomplete用法后期講解-->
<input type="submit" value="提交啦"/> <br/><br/>
<input type="search" name="searchitem" align="center"/> <br/><br/> <!--align 貌似在這沒用-->
</form>
<input list="browsers" autocomplete="Safari"/>
<datalist id="browsers"> <!-- 選項列表-->
<option value="Internet Explorer"> <!-- <input>標簽可以嵌套在<form>標簽內,也可以放在<body>標簽之內-->
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<p align="center">
<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"/> <!-- <img>標簽的align沒作用,需要放在<p>中,使用屬性align-->
</p>
<a target="_blank">搜狗</a> <!-- 超鏈接-->
</div>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<hr/>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<hr/>
<iframe src="https://www.sogou.com/" wihth="300" height="200" frameborder="10" align="center"><iframe> <!--內聯框架-->
</body>
</html>
<br>
注意: 有的標簽是沒有align屬性的,本代碼中有的align是無效的. 若要測試部分代碼的效果,請把"<!--" 刪除
*請認真填寫需求信息,我們會在24小時內與您取得聯系。