html初学者测试代码怎么写
这篇文章主要介绍了html初学者测试代码怎么写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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>
<h2>W3C</h2>
<p>World Wide Web Consortium(W3C)是万维网联盟...</p>
</section>
<aside>
<h5>Epcot Center</h5>
<p>The Epcot Center is a theme park in Disney World,Florida</p>
</aside>
<audio controls>
<source class="lazy" data-src="horse.ogg" type="audio/ogg">
<source class="lazy" data-src="horse.mp3" type="audio/mpeg">
你的浏览器不支持audio元素
</audio>
<br/>
<video width="320" height="240" controls>
<source class="lazy" data-src="movie.mp4" type="video/mp4">
<source class="lazy" data-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 class="lazy" data-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="https://www.sogou.com/" target="_blank">搜狗</a> <!-- 超链接-->
</div>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<hr/>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<hr/>
<iframe class="lazy" data-src="https://www.sogou.com/" wihth="300" height="200" frameborder="10" align="center"><iframe> <!--内联框架-->
</body>
</html>
<br>
注意: 有的标签是没有align属性的,本代码中有的align是无效的. 若要测试部分代码的效果,请把"<!--" 删除
关于“html初学者测试代码怎么写”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“html初学者测试代码怎么写”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
