html初學(xué)者測試代碼

2020-03-24 17:44:44

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

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

<!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下標(biāo)<sub字</sub</p

<p上標(biāo)<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

<h1W3C</h1

<pWorld Wide Web Consortium(W3C)是萬維網(wǎng)聯(lián)盟...</p

</section

<aside

<h4Epcot Center</h4

<pThe 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標(biāo)簽

</video

<br/ <!-- 換行 --

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

<progress value="30" max="100"</progress

<br/

<circle cx="100" cy="50" r="40" fill="red" / <!-- 圓,省略cx,xy圓心默認(rèn)就是(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

<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(指定產(chǎn)生動畫的屬性),repeatCount(循環(huán)次數(shù),屬性值:indefinite-無限循環(huán)--

</svg

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

<path d="M50 0 L75 200 L225 200 Z"/ <!-- 路徑--

</svg

<!-- <canvas id="myCanvas" width="200" height="100" <!-- <canvas標(biāo)簽必須指定一個id(腳本中經(jīng)常引用)--

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

<!-- ctx.textAlign="阿平加油!"; <!-- 此部分代碼應(yīng)該在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" <!-- 選項(xiàng)列表--

<option value="Internet Explorer" <!-- <input標(biāo)簽可以嵌套在<form標(biāo)簽內(nèi),也可以放在<body標(biāo)簽之內(nèi)--

<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標(biāo)簽的align沒作用,需要放在<p中,使用屬性align--

</p

<a href="http://www.sogou.com/" target="_blank"搜狗</a <!-- 超鏈接--

</div

<ul

<li咖啡</li

<li茶</li

<li牛奶</li

</ul

<hr/

<ol

<li咖啡</li

<li茶</li