了解什么是HTML5 了解什么是家风

myzbx 2024-12-30 05:29 51 浏览

HTML5是HTML的最新版本，HTML又称为超文本语言。如今几乎所有的智能手机和平板电脑都能支持HTML5。HTML5培训认为它的主要目的是用来开发更优秀、更高效的Web应用，它是在开放Web标准下开发的API和规范的。对于iOS和Android设备，都能很好的支持HTML5，因为它们运行的浏览器Safari、Chrome都基于WebKit，WebKit对HTML5有相当出色的支持。

Web应用

Web应用是指与桌面应用相似的web应用（Word、IE、Web浏览器），简而言之，Web应用就是不直接在计算机上打开，而是通过Web浏览器来运行。使用HTML5为iOS和Android设计Web页面的好处是在未来的设备上可以继续使用。

HTML5中的新标签

<article>-文档或站点的一个独立部分

<aside>-页面或站点主题之外的内容

<figcaption>-figure元素的标题

<figure>-独立于文本流之外的一段流内容（图形、图表）

<footer>-文档或章节的页脚

<header>-文档或标题的页眉

<hgroup>-标题组

<nav>-导航

<section>-章节部分

以下是一小段代码：

在许多Web设计中，<div id = "header">，在HTML5中将写成<header>，还有一些其他不同变化。

HTML5新的多媒体标签

<audio>-内嵌音频文件

<canvas>-内嵌动态图形

<source>-内嵌音频及视频的源文件

<track>-内嵌音频及视频的辅助多媒体轨道

<video>-内嵌视频文件

HTML5 的新属性

onabort-操作终止时触发

onbeforeonload、onbeforeonunload、onunload-在某一元素记载或卸载之前或同时触发

oncontextmenu-打开菜单时触发

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-发生拖拽时触发

onerror及onmessage-错误或弹出信息时触发

onscroll-用户滚动浏览器滚动条时触发

onresize-调整元素大小时触发

HTML5拥有与视频、音频、Web应用程序、编辑页面内容、拖拽以及展示浏览器历史等功能相关的API，另外H5开放Web还提供于地理定位、Web存储及离线Web应用程序的API，这些都非常适合在移动设备上使用。

用CSS3设计移动页面样式

CSS（层叠样式表），是移动Web开发中的一个重要组成部分，CSS用于定义HTML文档的外观，Web页面显示或特定移动设备来定制HTML样式。创建CSS样式表，CSS由附加了样式属性的一个或者多个选择器组成。例如在更改段落的文本颜色时，可以写为：

p {

color：red；

}

p为选择器，样式属性为color：red。如果要加入第二个选择器，需要逗号隔开

p， .redText }

color: red

}

样式表附加到Web页面的方法：

1、内联在标签中

2、内嵌于HTML开头

3、放在一个独立文档作为样式表

内联：

将单一段落的文本颜色定位为红色

内联的缺点是只能定义所在标签的样式，如果要讲所有段落都定义为红色时，需要就爱那个样式属性添加在每个段落。

内嵌：

内嵌样式表位于文档的<head>标签中，使用<style>标签，下面是讲所有段落文本设置为红色

效果如下：

内嵌样式与内联样式一样，只能影响所处页面的样式。如果我们需要将同一样式作用于其他Web页面，需要将它们分别粘贴到每个页面，这个时候独立的样式表的好处就体现出来了。

外联样式表

创建外联样式表的步骤：

1.打开一个新文档

2.编写样式表，但是要去掉<style>标签

3. 讲该文件保存为扩展名为.css的样式表文件,例如：style.css

下面的代码是将段落定义为红色并包含其他样式的样式表

ps：完成样式表，要记得讲它附加到Web页面中，在文档开头加一个指向样式表的<link>标签。代码如下：

ps:外联样式表可以提高网站加载速度，如果将所有样式放在同一个文档中的外联样式表

学习无止境，郑州HTML5培训哪里好，快来蓝鸥HTML5培训看看吧，督促自己不断前进！

HTML5 支持

上一篇：Chrome年底前将全面屏蔽Flash，默认支持HTML5
下一篇：前端教程:浏览器不兼容嵌入的音视频文件怎么办?

了解什么是HTML5 了解什么是家风

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿