H5基本开发1——(H5简单概述)

news2025/1/13 10:27:32

html概述

HTML 是用来描述网页的一种语言
  • HTML指的是超文本标记语言Hyper Text Markup Language,是一种用于创建网页的标准标记语
  • 标记语言是一套标记标签markup tag
  • HTML使用标记标签来描述网页
  • HTML文档的后缀名:.html或者.htm,两种后缀名没有区别,都可以使用
  • HTML5HTML最新的修订版本,201410月由万维网联盟W3C完成标准制定
  • HTML5的设计目的是为了在移动设备上支持多媒体
http 协议:超文本传输协议 —tcp

什么是html开发

HTML 开发就是编写以 .html 结尾的文档,交给浏览器运行
  • Html文件就是【普通文本+Html标签】,不同的html标记可以表示不同的效果
  • 目前主要使用html文档传递数据和数据的结构,具体显示依赖于css实现
浏览器本质:特殊的文件查看器,能够对 .html 文档中的特殊字符进行识别,自动渲染
HTML5 并不是革命性的改变,而只是发展性的。而且对于之前 HTML4 的很多标准都是兼容的,所有通过最新 HTML5 标准制作的 Web 应用也可以轻松的跑在老版本的浏览器上。 HTML5 标准中的确是集成了很 多实用的功能比如:音视频、本地存储、 Socket 通信、动画等都是之前应用开发中确实感觉到 Web 端的 鸡肋才得到重视和升级的,相信如果你有相关的经验的话也会很有感触。
HTML5 的目标是:它通过一些新标签,新功能为开发更加简、独立、标准的通用 Web 应用提供了标准。新的标准解决了三大问题:浏览器兼容问题,解决了文档结构不明确的问题,解决了 Web 应用程序功能 受限等问题。

常见的浏览器

实际使用过程中,浏览器的种类繁多,并且统一浏览器还拥有不同的软件版本,因此在开发学习过程 中,如何适配不同浏览器也是我们着重注意的点。

常见编辑器

为了提高开发效率,提供不同的编写工具
前端开发:本质就是编写一个 .html 的文档,通过浏览器执行这个文档。
编写 .html 文档时采用以下的编写工具
  1. windows写字板 2. webStrom 3. HBuilderX
  2. vscode 5. Atom 6. Sublime Text

HTML开发代码构成 

h5 开发,本质上就是编写一个 .html 格式的文档,最终通过浏览器执行该文档,那么一个 html 文档中都包含哪些代码
  • 标签不区分大小写 <标签名 属性=""></标签名>
  • 元素可以省略结束标签
  • 元素的属性可以省略属性值,例如disabledreadonly
  • 允许属性值不使用引号

浏览器验证 

​

<canvas id="ca1" width="200" height="100" style="border:2px solid #ccc;background-color:#eee">当前浏览器不支持全新的画布标记</canvas>
​

可以判定当前浏览器是否支持Html5的新特性,如果执行后显示一个矩形效果,则是支持;否则在页面显示对应不支持的提示信息

HTML部分

HTML hyper text markup language
hyper text :超文本,是指写在 html 文档中,并在网络上传输的 文字、图片、视频、音频
markup language :标记语言
  • 所谓标记:就是指由一对尖括号扩起来,当中具有特定英文单词的标识 <b>abc</b> 给文字加粗显示
  • 标记的其他叫法:标签 元素 element
h5 开发,本质上就是编写一个 .html 格式的文档,最终通过浏览器执行该文档,那么一个 html 文档中都包含哪些代码。在线验证网址 validator.w3.org
html 文档中只有两种类型的标记
  • 单标记 :例如 <meta> 不能存放内容,多是一些功能性的标记
  • 双标记 :例如 <div> 超文本 </div> 有开始有结束,主要功能是存放内容,可以是超文本,也可以是其他标记
<font color="red">实际开发中,我是通过这些标记符号,在文档中表示图片、视频、音频、文字,只有通过标记,才能帮助浏览器识别</font>

 代码示例

<!-- 双标记 -->
<div>超文本</div>
<!-- 单标记 -->
<img>

CSS部分

CSS cascading style sheet 层叠样式表,用来对文档中的标签设置样式,从而改变超文本在浏览器上的渲染效果
代码示例
<!-- code by lanou -->
<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html部分 -->
<div>红色字体</div>

JS 部分
JS javaScript ,运行在浏览器端的脚本语言。平时我们看到网页,除了可以看以外,还可以处理一些用户的交互行为,例如:鼠标的点击,键盘的控制等等。这些功能需要通过 JS 来完成
代码示例
<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html代码部分 -->
<div onclick="fun()">js展示(超文本)</div>
<script>
// js代码
function fun(){
alert("js展示成功");
}
</script>

小结

html5 开发就是,就是通过 HTML“ 标签 超文本 写入文档,再通过 CSS 给标签设置样式,完成超文本在浏览器上的 排版 ,通过 JS 代码来为标签编写交互脚本,完成 超文本 在浏览器上的人机交互功能。
  • HTML5 将成为 HTMLXHTML 以及 HTML DOM 的新标准
  • HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 中的一些有趣的新特性:
  • 用于绘画的 canvas 元素
  • 用于媒体播放的videoaudio元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 articlefooterheadernavsection
  • 新的表单控件,比如 calendardatetimeemailurlsearch

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/10718.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Deep Leakage from Gradients

Summary 对于分布式学习&#xff0c;特别是相关之前共享梯度的学习&#xff0c;提出了一种攻击方式&#xff08;DLG&#xff09;。通过窃取client之间传递的梯度反推出&#xff08;也是使用机器学习迭代的方式&#xff09;原始的输入。并在图像分类、Masked Language Model方面…

代谢ADMET在线网页预测工具SwissADME 、SOMP 、BioTransformer

药物代谢(Drug Metabolism)指药物在体内多种药物代谢酶&#xff08;尤其肝药酶&#xff09;的作用下&#xff0c;化学结构发生改变的过程&#xff1b;包括分解代谢和合成代谢 1、概念 药物的代谢反应大致可以分为氧化(oxidation)、还原(reduction)、水解(hydrolysis)和结合(co…

Android 增加布局圆角功能,支持背景裁切圆角

前言 我们Android开发同学最常见、频繁画UI时会遇到有角度的布局。例如: 通常,我们都会在drawble文件夹下创建Shape.xml去实现对吧?当然这样的代码实现方式没毛病。但是,项目大了业务繁杂,工程中会出现很多此类文件,显得非常臃肿,而且不方便复用,不利于研发效率…

22、7大参数自定义线程池(核心线程数,最大核心线程数。。。拒绝策略(4种))

7大参数自定义线程池&#xff08;核心线程数&#xff0c;最大核心线程数。。。拒绝策略&#xff08;4种&#xff09;&#xff09; 第一步&#xff1a;我们首先看单例线程池的源码 第二步&#xff1a;多个固定线程的线程池源码 第三步&#xff1a;可变的线程数的线程池源码 开启…

相控阵天线(三):直线阵列低副瓣综合(切比雪夫、泰勒分布、SinZ-Z和Villeneuve分布)

目录阵列天线综合方法概述切比雪夫阵列综合泰勒阵列综合高斯分布、二项式分布、SinZ-Z和Villeneuve分布切比雪夫、泰勒和Villeneuve综合比较切比雪夫、泰勒和Villeneuve分布的口径效率比较切比雪夫综合python代码示例阵列天线综合方法概述 直线阵列天线的综合是在预先给定辐射…

C++15 ---继承2:重载与覆盖、隐藏、拷贝构造函数、赋值运算符重载、静态数据成员

一、重载与覆盖的特征 1、重载 成员函数被重载的特征: (1&#xff09;相同的范围&#xff08;在同一个类中)&#xff1b; (2&#xff09;函数名字相同&#xff1b; (3&#xff09;参数不同&#xff1b; (4&#xff09; virtual关键字可有可无。 2、覆盖 覆盖是指派生类函数…

STM32CubeMX环境安装(保姆级)

目录 JAVA环境安装 安装包 文件夹设置 运行exe STM32CubeMX下载 第一步 第二步 第三步 第四步 第五步 第六步 第七步 第八步 注意&#xff0c;我们使用STM32CubeMX需要安装JAVA环境&#xff01;&#xff01;&#xff01; JAVA环境安装 安装包 JAVA下载链接&…

《FFmpeg Basics》中文版-02-显示帮助和功能

正文 关于FFmpeg程序的帮助和其他信息都显示在空格和连字符之后输入的各种选项&#xff0c;示例显示了FFmpeg工具的用法&#xff0c;但是相同的选项对于ffplay、ffprobe和ffserver是有效的。参数是区分大小写的。FFmpeg组件的开发速度很快&#xff0c;从2012年11月开始&#x…

MicroPython——有点东西,但是不多

引言 之前做过一个树莓派驱动墨水屏的项目&#xff0c;本来想整理出来与大家分享的&#xff0c;但是由于树莓派已经成了理财产品&#xff0c;所以为了让这个项目更加具有实践意义&#xff0c;最近我打算把这个项目移植到ESP32上。在树莓派上我使用的是Python编写的代码&#x…

C++简单工厂模式详解

C简单工厂模式详解1.问题引入2.编写代码思路的迭代2.1 main函数主体内编写全部代码2.2 修改上述问题后的main函数代码2.3 引入面向对象后的代码2.4 加上继承和多态后的代码3.C简单工厂代码4.总结4.1 简单工厂模式适用场景4.2收获1.问题引入 编写一个计算器程序代码&#xff0c…

论文笔记:Region Representation Learning via Mobility Flow

2017 CIKM 1 摘要和介绍 使用出租车出行数据学习区域向量表征 同时考虑时间动态和多跳位置转换——>通过flow graph和spatial graph学习表征出租车交通流可以作为区域相似度的一种 A区域和B区域之间流量大 ——>A和B的特征更相关——>用一个/很相似的vector来表征他…

如何实现基于场景的接口自动化测试用例?来看看大佬的方案

自动化本身是为了提高工作效率&#xff0c;不论选择何种框架&#xff0c;何种开发语言&#xff0c;我们最终想实现的效果&#xff0c;就是让大家用最少的代码&#xff0c;最小的投入&#xff0c;完成自动化测试的工作。 基于这个想法&#xff0c;我们的接口自动化测试思路如下…

R语言七天入门教程七:项目实战

R语言七天入门教程七&#xff1a;项目实战 在完成之前R语言基础知识的学习后&#xff0c;今天的内容是项目实战&#xff0c;通过完成一些小项目来巩固知识。 一、矩阵运算计算器&#xff08;变量与运算符练习&#xff09; 1、问题描述 给定矩阵A和B&#xff0c;计算矩阵相加…

MySql常用内置函数详解

目录日期函数--了解***字符串函数--重要数学函数--了解其他函数--了解MySql为我们提供了一些内主函数&#xff0c;方便我们对特定数据进行相关操作&#xff01; 注意:都是配合select使用哦&#xff0c;个人理解SQL的select相当于C中的printf; 日期函数–了解 一般用于insert in…

C++ 主函数几种语法

Cmain函数的两种写法 1&#xff0c;返回值为int&#xff0c;且main不带参数 #include<iostream> using namespace std; int main() { cout << "Hello C \n" << endl; system("pause"); return 1;//函数返回值取值范围0到255&#xf…

深入了解 JavaScript 语法错误以及如何防止它们

最近&#xff0c;在 Leader 的建议下&#xff0c;去看了看 emotion 和 storybook 的相关文档。学习过后&#xff0c;小有收获。因此&#xff0c;这次将以我自己的视角带你们体验一下 storybook&#xff0c;也算是对我自己学习过程中的一个 review。 何为 storybook 什么是 st…

第2关:伪分布式体验及分布式安装配置

服务器leader选举 为进一步了解ZooKeeper的leader选举过程&#xff0c;本节实训利用服务器的关闭启动&#xff0c;观察服务器的leader产生过程。利用以下命令查看当前服务器节点的状态(/xxx为安装目录)&#xff1a; ./xxx/bin/zkServer.sh status 当仅启动1个服务器节点&…

进博会期间,多地政府领导密集考察深兰科技

从11月初开始&#xff0c;借第五届中国国际进口博览会在上海举办的契机&#xff0c;来自全国各地的地级、县级市的各级领导纷纷来到上海&#xff0c;深入到各个行业领域的国企、央企、民企和跨国企业中走访调研&#xff0c;寻求技术合作&#xff0c;洽谈招商引资。 期间仅1日至…

流体力学基础——简介

流体定义&#xff1a;无规则的运动&#xff0c;流体&#xff1b;流体在静止时内部不能产生剪切力&#xff0c;流动产生的剪切力叫做粘力流体特点&#xff1a; 1、力与变形的关系不同&#xff1b;固体&#xff0c;应力正比于应变&#xff0c;静力学为主&#xff1b;流体&#xf…

DeepLearn关于数组和数的操作

本篇文章纯属作为自己的笔记&#xff0c;因为每次写程序都忘记下面的内容&#xff0c;找起来又很浪费时间&#xff0c;所有就索性一次性都整理下来&#xff0c;后续又不新的不会的内弄也会及时更新到文章当中&#xff0c;方便以后查阅。 DeepLearn关于数组和数的操作Python标准…