html初学者测试代码怎么写

发布时间:2022-03-16 11:59:07 作者:iii
来源:亿速云 阅读:150

这篇文章主要介绍了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 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 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  src="https://www.sogou.com/" wihth="300" height="200" frameborder="10"  align="center"><iframe> <!--内联框架-->

</body>

</html>

<br>

注意: 有的标签是没有align属性的,本代码中有的align是无效的. 若要测试部分代码的效果,请把"<!--" 删除

关于“html初学者测试代码怎么写”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“html初学者测试代码怎么写”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. html空格代码如何写
  2. html中怎么写空格代码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:HTML的DOM Track对象如何使用

下一篇:html单选按钮默认选中如何做

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》