html初学者测试代码

2020-03-24 17:44:44

字体：大中小

来源：转载

供稿：网友

建立一个文本文档,复制粘贴如下代码.将文件的后缀名改为.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

<h1W3C</h1

<pWorld Wide Web Consortium(W3C)是万维网联盟...</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标签

</video

<br/ <!-- 换行 --

<!-- 下载进度:

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

<br/

<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

<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 href="http://www.sogou.com/" target="_blank"搜狗</a <!-- 超链接--

</div

<ul

<li咖啡</li

<li茶</li

<li牛奶</li

</ul

<hr/

<ol

<li咖啡</li

<li茶</li