整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

认识 HTML5

念:

HTML5 是HTML、XHTML 以及 HTML DOM 的新标准(推荐标准)。

语法:

根据HTML5设计化繁为简的准则,文档类型和字符说明都进行了简化:

<!DOCTYPE html>
<meta charset='UTF-8'>
.......

HTML5元素

HTML5定义了一组新的语义化标记来描述元素的内容。

header 标记头部区域的内容。
footer 标记脚部区域的内容
section 页面中的一块区域
article 独立的文章内容
aside 相关内容或者引文
nav 导航类
video:定义视频,比如 电影片段或其他视频流
<video src='movie.ogg' controls='controls'>video元素</video>
audio:定义音频,比如音乐或其他音频流 
<audio src='audio.wav'>audio元素</audio>
...........

HTML5其他功能

HTML5引入了一种用于用于查找页面DOM元素的selectors API。

document.querySelector("#demo")--->返回文档中匹配指定 CSS 选择器的第一个元素。
document.querySelectorAll("#demo")--->返回文档中匹配指定 CSS 选择器的所有元素。

html5文档结构代码

html5 有什么神奇? 就是进化的一套标准。

我是不是整理的都好初级,不过整理即巩固加回忆,只要是好好学习,那么时间就不是浪费,那么道路就一定是正确的!!加油啊 小果冻de迈阿密!!

为互联网的基石之一,HTML5(Hypertext Markup Language 5)引入了一系列前沿特性,为开发者提供了无限的创意空间和更深层次的探索。在本文中,华妹将深入解读HTML5的一些最引人注目的新特性以及它们的潜力。


1. 语义化标签

HTML5通过引入诸如`<header>`、`<nav>`、`<article>``<footer>`等新的语义化标签,提供了更加精确和结构化的文档描述。


这不仅增加了网页的可读性,还改进了搜索引擎优化(SEO)和可访问性。开发者可以更准确地描述网页内容,使搜索引擎更容易理解页面的结构。


2. 视频和音频支持

HTML5为嵌入式媒体提供了原生支持,不再依赖于陈旧的插件,如Flash


通过`<video>``<audio>`标签,开发者可以轻松地嵌入视频和音频内容,并以标准的方式控制媒体播放。这为多媒体丰富的Web应用程序带来了新的可能性,而无需用户额外地安装或配置。

3. 本地存储


HTML5引入了Web StorageIndexedDB,这些本地存储机制允许开发者在客户端存储数据,提高了性能并支持离线访问。


这对于构建离线Web应用程序或缓存大量数据的应用非常有利。同时,这些新特性提供了更安全的存储机制,不会像传统的cookie一样容易受到跨站点脚本攻击。

4. Canvas绘图


HTML5`<canvas>`元素为开发者提供了在网页上进行动态图形和动画绘制的能力。


通过JavaScript,您可以轻松创建交互式图表、数据可视化和游戏。这为用户提供了更引人入胜的网页体验,并吸引了广泛的应用领域,从数据科学到教育。

5. 新的表单元素


HTML5引入了一系列新的表单元素,如`<input type="date">`、`<input type="email">``<input type="url">`,简化了用户输入和数据验证。这些元素不仅提高了用户体验,还减少了开发者在前端验证方面的工作量。


6. 高级的地理位置API

HTML5的地理位置API允许Web应用程序访问用户的位置信息,从而创造了各种基于位置的应用,如地图导航、社交媒体定位和周边服务推荐。这一功能为个性化和本地化体验提供了强有力的支持。

7. Web Workers

HTML5引入的Web Workers允许在后台运行JavaScript线程,提高了网页的性能和响应能力。


这对于处理复杂计算、多线程任务以及实时数据更新至关重要,为现代Web应用程序带来了巨大的潜力。

8. 支持SVG

HTML5对可伸缩矢量图形(SVG)提供了原生支持,这是一种用于创建矢量图形的XML格式。


SVG允许开发者创建高质量的图形和动画,并与其他HTML元素进行无缝集成。这为创建复杂的数据可视化和引人入胜的交互体验提供了强大的工具。

结论

HTML5的新特性推动了Web开发的不断发展,并为开发者提供了更多的创新机会。这些新特性不仅增强了网页的功能和性能,还提高了用户体验和可访问性。

在不断演进的Web领域中,深入了解和充分利用HTML5的潜力是每位现代开发者的必备技能。随着HTML5的不断发展,我们可以期待更多惊喜和创新的出现,为Web的未来铺平道路。

网页中编写JavaScript代码时,需要先引入JavaScript代码。JavaScript代码有3种引入方式,分别是行内式、嵌入式和外链式,下面分别进行讲解。

1.行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如,在单击超链接“test”时,弹出一个警告框提示“Hello”,示例代码如下:

<a href="javascript:alert('Hello');">test</a>

需要说明的是,行内式只有在临时测试或者特殊情况下使用,一般情况下不推荐使用行内式,因为行内式有如下缺点。

(1)行内式可读性较差,尤其是在HTML文件中编写大量JavaScript代码时,不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时,引号非常容易混淆,导致代码出错。

2.嵌入式

嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码,直接编写到HTML文件中,通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型,HTML.5中该属性的默认值为“text/javascript”,因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下:

<script>
    JavaScript代码
</script>

3.外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中,一般使用“js”作为文件的扩展名,在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件,示例代码如下:

<script src="test.js"></script>

上述代码表示引入当前目录下的tesL.js文件。需要注意的是,外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式,下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件,引入Example02.js文件,具体代码如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

标签的src属性设置了要引入的文件为Example02.js。

创建Example02.js文件,在该文件中编写如下代码:

alert ('Hello JavaScript');

保存代码,在浏览器中访问Example02.html文件,页面效果与例1-1相同。

以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScrixt这3部分代码,这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时,推荐使用外链式。外链式相比嵌入式,具有以下3点优势:

(1)外链式存在于独立文件中,有利于修改和维护,而嵌人式会导致HTML代码与JavaScript代码混合在一起。

(2)外链式可以利用浏览器缓存提高速度。例如,在多个页面中引入相同的JavaScript文件时,打开第1个页面后,浏览器将JavaScript文件缓存下来,下次打开其他页面时就不用重新下载该文件了。

(3)外链式有利于HTML页h代码结构化,把大段的JavaScript代码分离到HTML页面之外,既美观,也方便文件级别的代码复用。