欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > 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>

<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 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是无效的. 若要测试部分代码的效果,请把"<!--" 删除

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h50839.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-09 06:54 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。