许多人所谓的成熟,不过是被习俗磨去了棱角,变得世故而实际了。那不是成熟,而是精神的早衰和个性的消亡!

好玩的HTML代码

IT资源 凌汐 258℃ 0评论

什么是HTML?
1:定义
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准。
2:由来
万维网上的一个超媒体文档称之为一个 页面( 外语:page)。作为一个组织或者个人在 万维网上放置开始点的 页面称为 主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的 指针(超级链接),所谓 超级链接,就是一种统一资源定位器(Uniform Resource Locator, 外语 缩写:URL)指针,通过激活(点击)它,可使 浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面的有机集合称为 网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的 Web技术(如:脚本语言、公共网关接口、 组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网( Web)编程的基础,也就是说 万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记 语言,是因为文本中包含了所谓“ 超级链接”点。
3:特点
超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的 文件镶入,这也是万维网( WWW)盛行的原因之一,

HTML5

html,H5,it智慧,it技术,it资源

其主要特点:

简易性:超级文本标记语言 版本升级采用 超集方式,从而更加灵活方便。
可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加 标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
平台无关性:虽然 个人计算机大行其道,但使用 MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是 万维网( WWW)盛行的另一个原因。
通用性:另外, HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

编写软件:
AMAYA
FRONTPAGE
Dreamweaver
notepad++
…………….
所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现
HTML整体结构:

html,html5,it智慧,it技术

一个网页对应多个HTML文件, 超文本标记语言文件以.htm(磁盘操作系统 DOS限制的外语缩写)为 扩展名或.html(外语缩写)为 扩展名。可以使用任何能够生成 TXT类型 源文件的文本编辑器来产生超文本标记语言文件,只用修改文件 后缀即可。 标准的超文本标记语言 文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:
),即超文本标记语言文件的开头与结尾标志和超文本标记语言的 头部与实体两大部分。有三个双标记符用于 页面整体结构的确认。
标记符<html>,说明该 文件是用超文本标记语言(本标签的中文全称)来描述的,
它是 文件的开头;而</html>,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记
6:头部内容
<head></head>;这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被 浏览器用作 书签和收藏清单
设置文档标题和其它在网页中不显示的信息,比如direction方向、语言代码Language Code(实体定义!ENTITY %i18n)、指定字典中的元信息
7:主体内容
<body></body>;,网页中显示的实际内容均包含在这2个 正文标记符之间。 正文标记符又称为实体标记

html,html5,it智慧,it技术

<script> 
!function(e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(),
o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart",
s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}),
t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch(t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
function(e) {
setTimeout(e, 1e3 / 60)
},
i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), 
n(),
r()
} (window, document);
</script>
【教程】千锋HTML5开发培训基础视频教程 链接: https://pan.baidu.com/s/1MX85xDeHjhda1D3r5Zsseg 提取码: pd98

 

 

 

转载请注明:IT智慧 » 好玩的HTML代码

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址