HTML5网页制作好好玩啊

---恢复内容开始---

这两天在看HTML5,由于学习的需要,所以要学的,嗯,这个整人还是很有意思的(但是超超是好人,从不干坏事)

现在请欣赏一下我的代码和图片吧!(想整人的小伙伴可以自己copy来玩哦!不过你得先下一个HBuilder,哈哈哈哈)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是练习一</title>
</head>
<body>
<a href="index.html" target="_blank">卧槽,还带这么玩的吗?</a>
<br />
<a href="https://www.taobao.com">这里是淘宝平台</a>
<br />
<b>在这里,你会购买到理想的商品</b>
<br />
<em>我是超超</em>
<br />
<s>您身边的友好朋友</s>
<br />
<u>他在无时无刻都在关注着你</u>
<br />
</body>
</html>

这是一个最简单的例子,我就没截图了

这个就是最简单的类型,什么都没干,就是显示语句(br换行),跳转链接
当下@future 2019/4/27 14:44:49

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是练习二</title>
</head>
<body>
<table border="1px" align="center">
<thead>
<tr bordercolor="#FFF">
<td align="center">姓名</td>
<td align="center">性别</td>
<td align="center">年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td align="center">唐杰</td>
<td align="center">男</td>
<td align="center">19</td>
</tr>
<tr>
<th>包晗</th>
<th>男</th>
<th>19</th>
</tr>
<tr>
<td align="center">王智超</td>
<td align="center">男</td>
<td align="center">19</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center">祖国的骚年</td>
<td>年轻的火耀</td>
<td  align="center">未来的逗比</td>
</tr>
<tr>
<td rowspan="3">娃哈哈</td>
<td>爽歪歪</td>
<td>Ad钙</td>
</tr>
<tr>
<td colspan="3">珍珠奶茶</td>
</tr>
</tfoot>
</table>
</body>
</html>

当下@future 2019/4/27 14:45:55
这个就是简单的制作表格(以及合并)

下面请看练习三:

当下@future 2019/4/27 14:55:10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王智超练习三</title>
</head>
<body>
<ol type="I">
<li>Hello!!!</li>
<li>我亲爱的小伙伴们</li>
<li>Are you OK?</li>
</ol>
<ul>
<li>乌拉乌拉</li>
<li>娃哈哈</li>
<li>吧唧吧唧</li>
</ul>
<ol reversed="1">
<li>想我没</li>
<li>吧唧吧唧</li>
<li>想也没用</li>
<li>哼</li>
</ol>
<ol type="1">
<li>大声喊王智超你好帅100次</li>
<li>有意外惊喜哦</li>
<ol>
<li type="a">乌拉乌拉</li>
<li>骗你的呢</li>
<li>别,大哥</li>
<li>我错了</li>
</ol>
</ol>
</body>
</html>

在看最后一个,哈哈哈

这个就是有序排列(以及类型),以及无序排列

当下@future 2019/4/27 15:16:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text"  value="王智超真帅!"/>
<br />
<input type="submit" placeholder="你认识超超吗?" maxlength="20"  value="提交" />
<br />
<input type="text"  placeholder="超超浪吗?" readonly/>
<br />
<input type="password"  placeholder="请输入8位密码" maxlength="8" />
<input type="submit"  value="提交"/>
</form>
<textarea cols="3">唐杰</textarea>
<textarea rows="2">包晗</textarea>
</body>
</html>

这个开始的时候是占位的(但是可以删除的,只不过一刷新又出来了),提交是一个按钮键,至于后面的:超超浪吗,就是一个只读类型(不能更改),再后面的是输入密码(而且只能是·8位,因为我设了最大长度是8)

好的,谢谢大家能看到这里,嗯,大佬勿喷,没学过的朋友可以来玩玩,嘻嘻嘻

原文地址:https://www.cnblogs.com/2142781703wangzhichao/p/10778940.html

时间: 2024-08-12 01:09:37

HTML5网页制作好好玩啊的相关文章

HTML5网页制作教程:HTML5块级链接

网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5,引述一下,就是原先你要这么写. 英文叫做 “Block-level” links,我以为只有我厂那些鸟毛不知道,没想到不知道的还挺多,需要普及一下. 很遗憾,Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level”

IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同的岗位所涉及的技术也会有差别,所以先要确定自己的发展定位,收集要学习的内容,整理好学习的顺序.很多时候,成功除了勇气.坚持不懈外,更需要方向.也许有了一个好的方向,成功来得比想象的更快.如果在错误的路上奔跑,再怎么努力也是白搭.学习Web前端也是如此,首先应该选择一个正确的学习路线.HTML5学习线

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示      源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

推荐21款最佳 HTML5 网页游戏

尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等丰富的 Web 应用.今天要与大家分享的是 21 款基于 HTML5 的游戏,让大家体验一下 HTML5 的强大. 1- Runfield 2- Rainbow Blocks 3- RGB Invaders 4- Cover Fire 5- Bert’s Breakdown 6- Crystal G

浅谈网页制作

在开发一个完整的网页之前,我们首先应该做好一些相关的准备,例如切片,布局,测量网页版心等.准备工作完成之后,我们就可以进行网页开发了. 测量网页尺寸大小的准确性可以直接影响最后网页的布局,所以尽量细心一些. 对于布局,我觉得最关键的一点是,对网页大局观的认识. 布局完成后我们就可以使用css来控制网页的样式: 对于每个网页的制作我想都有一些相同的全局样式 例如(*{margin:0;padding:0;list-style:none等等})一般情况下在做正式的网页开发我们一般不用*通配符因为它的

HTML5开发学习教程,学习HTML5还是学习HTML5的制作工具?

一名优秀的HTML5前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司往往出高薪也很难招到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错,而技巧则见仁见智. 以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了.无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫WEB前端开发. HTML5前端开发在产品开发环节中的作用变得越来越重要,

网页制作知多少

网页制作知多少 一.通用模板: <!DOCTYPE html> <html lang=”en”> <head> <meta  charset=”UTF-8”/> <title>文档标题</title> <link  rel="shortcut icon"  href="img\wujiaoxing.ico"/>       <!--设置标题图标--> </head&

网页设计Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut