
html
HTML称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等
Serena_tz
write less,do better️️️
展开
-
手机APP开发中遇到的一些问题
APP下载引导页H5开发,layer弹出层的应用,前端引导页使用插件js,谷歌浏览器如何开启暗黑模式,uni-app富文本图片存在间距的问题原创 2023-02-21 15:13:24 · 229 阅读 · 0 评论 -
uni-app引入海康威视h5player实现视频监控的播放
因为web-view组件默认就是占据整个视口的高宽,所以我们需要设置web-view的宽高,调整位置。将demo中bin文件夹下的文件原封不动复制到h5player文件夹中,txt文件可以删除。在uni-app应用内,pages页面中需要用到视频播放的页面,创建web-view组件。在uni-app项目中static文件夹下创建文件目录,我命名为h5player。在webplayer.html文件中,新增样式,宽高根据自己的需求调整。web-view组件的src需要动态改变,所以存储在data数据里。原创 2022-12-02 13:45:12 · 12747 阅读 · 63 评论 -
form表单提交避坑
前端开过程,我们经常会遇到表单提交。在使用onsubmit事件时要注意避免可能的坑:html里面要写οnsubmit="return saveForm()",带return的,这样返回false的话页面才不会跳转。js里面saveForm()方法里要写return false。方法名千万不能过于简单,比如save()。一定尽量驼峰状长一些的名字,这个可能被js定义过了,所以会出现问题。另外,表单提交我们也可以直接在js中绑定事件,html不作操作,注意在一系列逻辑代码的最后加上ret原创 2021-05-06 17:14:55 · 307 阅读 · 0 评论 -
初识html5-概念、文档类型、语义化元素
1 html5概述1.1 Html5的概念HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念:它是一个新版本的HTML语言,具有新的元素,属性和行为,它有更大的技术集,允许更多样化和强大的网站和应用程序。这个集合有时称为HTML5和朋友,通常缩写为HTML5。HTML5 约等于 HTML + CSS + JS。1.2 Html5优势跨平台:唯一一个通吃PC MAC Iphone Android等主流平台的跨平台语言快速迭代降低成本导流入口多分发效率高2原创 2021-04-30 11:15:39 · 359 阅读 · 0 评论 -
html5的表单标签
1 html5表单表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性,form的action指向一个服务器地址(接口)。当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值,注意表单项的name属性必须有值,服务器才能获取表单。所有之前的表单控件都保持不变仍然可以使用脚本操作表单控件html5之前的表单标签为input*type:text:文本框type:password:密码框type:radio:单选按钮注意以name分组,确保单选原创 2021-04-30 10:53:57 · 550 阅读 · 0 评论 -
html5的一些新增标签
1 状态标签meter:用来显示已知范围的标量值或者分数值。value:当前的数值。min:值域的最小边界值。如果设置了,它必须比最大值要小。如果没设置,默认为0max:值域的上限边界值。如果设置了,它必须比最小值要大。如果没设置,默认为1low:定义了低值区间的上限值,如果设置了,它必须比最小值属性大,并且不能超过high值和最大值。未设置或者比最小值还要小时,其值即为最小值。high:定义了高值区间的下限值。如果设置了,它必须小于最大值,同时必须大于low值和最小值。如果没有设置,或者原创 2021-04-30 10:42:18 · 115 阅读 · 0 评论 -
html5新标签-音频&视频
大家都有在网页中浏览视频的经历,但在Html5之前,对视频乃至音频都还没有一个标准。因此,在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件,你完全意识不到它们的存在。在介绍Html5中的音视频标签前,我们需要了解一些概念。1 基本概念1.1 容器大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式,它只决定怎么将视频存储起来,而不关系存储的内容。有点类似于.zip原创 2021-04-30 10:24:41 · 391 阅读 · 0 评论 -
HTML5 <picture> 元素
HTML5 引入了<picture>元素,该元素使您可以定义多幅图像。<picture>元素的作用类似于 <video> 和 <audio>元素。我们设置了不同的来源,而匹配优先权的第一个来源是正在使用的来源:<picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg转载 2021-03-16 08:48:39 · 603 阅读 · 0 评论 -
HTML5使用地理定位
使用 getCurrentPosition() 方法来获得用户的位置。下例是一个简单的地理定位实例,可返回用户位置的经度和纬度。<script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.转载 2021-03-15 10:30:09 · 315 阅读 · 0 评论 -
H5的Web worker的简单介绍
什么是 Web Worker?当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成。Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。检测 Web Worker 支持在创建 web worker 之前,请检测用户浏览器是否支持它:if (typeof(Worker) !== "undefined") { // 是的!支持 Web worker转载 2021-03-15 10:16:06 · 742 阅读 · 0 评论 -
H5的SSE
Server-Sent 事件 - One Way MessagingServer-Sent 事件指的是网页自动从服务器获得更新。以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。接收 Server-Sent 事件通知EventSource 对象用于接收服务器发送事件通知:var source = new EventSource("demo_sse.php"转载 2021-03-15 10:06:59 · 780 阅读 · 0 评论 -
H5应用程序缓存
使用应用程序缓存,通过创建 cache manifest 文件,可轻松创建 web 应用的离线版本。什么是应用程序缓存?HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势:离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源HTML Cache Manifest 实例下例展示了带有 cache转载 2021-03-15 09:54:50 · 326 阅读 · 0 评论 -
HTML5向网站添加音频
最好的 HTML 解决方法HTML 5 + <object> + <embed><video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="vid转载 2021-03-12 17:06:52 · 386 阅读 · 0 评论 -
HTML5向网站添加音频
最好的 HTML 解决方法<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /><embed height="100" width="100" src="song.mp3" /></audio>上面的例子使用了两转载 2021-03-12 16:49:33 · 777 阅读 · 0 评论 -
HTML5的语义元素浏览器的兼容问题
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。}转载 2021-03-12 11:58:37 · 179 阅读 · 0 评论 -
HTML的Form 属性
HTML 元素,已设置所有可能的属性,是这样的:<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>.form elements .</form> 下面是 属性的列表:属性描述accept转载 2021-03-12 10:59:39 · 1468 阅读 · 0 评论 -
用 <fieldset> 组合表单数据
<fieldset>元素组合表单中的相关数据<legend>元素为 <fieldset>元素定义标题。实例:<form action="action_page.php"><fieldset><legend>Personal information:</legend>First name:<br><input type="text" name="firstname" value="Mickey"转载 2021-03-12 10:54:23 · 302 阅读 · 0 评论 -
XHTML的简单介绍
下面的例子展示了带有最少的必需标签的 XHTML 文档:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title of document<转载 2021-03-12 10:52:36 · 170 阅读 · 0 评论 -
统一资源定位器URL(网址)
网址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的语法规则:scheme://host.domain:port/path/filename解释:scheme - 定义因特网服务的类型。最常见的类型是 httphost - 定义域主机(http 的默认主机是 www)domain - 定义因特网域名,比如 w3school.com.cn:port - 定义主机上的端口号(http 的默认端口号是 80)path - 定义服务器上的路径(如转载 2021-03-12 10:22:16 · 1814 阅读 · 0 评论 -
HTML头部元素
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。name 和 content 属性的作用是描述页面的内容。元素是所有头部元素的容器。转载 2021-03-12 10:07:57 · 466 阅读 · 0 评论 -
HTML5 语义元素
HTML5 提供的新语义元素定义了网页的不同部分:header定义文档或节的页眉nav 定义导航链接的容器section 定义文档中的节article 定义独立的自包含文章aside 定义内容之外的内容(比如侧栏)footer 定义文档或节的页脚details 定义额外的细节summary 定义 details 元素的标题...原创 2021-03-12 09:56:14 · 87 阅读 · 0 评论 -
html5语义元素使用的注意事项(浏览器兼容性问题)
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:<header><nav><section><article><aside><figcaption><figure><footer>以上的元素都是块元素(除了<figcaption>).为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素)转载 2021-02-24 15:39:56 · 146 阅读 · 0 评论 -
html5实现元素的拖动和摆放
实例:<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>html5实现元素的拖动和摆放</title><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script>转载 2021-02-24 14:52:02 · 1335 阅读 · 0 评论 -
HTML5 浏览器支持(h5的浏览器兼容性)
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。E9 以下版本浏览器兼容HTML5的方法,使用静态资源的html5shiv包:<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>转载 2021-02-24 11:35:05 · 1409 阅读 · 0 评论 -
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article、footer、header、nav、section新的表单控件,比如 calendar、date、time、email、url、search...转载 2021-02-24 11:27:19 · 303 阅读 · 0 评论 -
URL - 统一资源定位器
语法规则:scheme://host.domain:port/path/filename说明:scheme - 定义因特网服务的类型。最常见的类型是 httphost - 定义域主机(http 的默认主机是 www)domain - 定义因特网域名,比如 runoob.com:port - 定义主机上的端口号(http 的默认端口号是 80)path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。filename - 定义文档/资源的名称...转载 2021-02-24 11:26:43 · 560 阅读 · 0 评论 -
HTML 常用字符实体
原创 2021-02-24 11:16:41 · 143 阅读 · 0 评论 -
HTML<noscript> 标签
<noscript>标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 元素中的内容:实例:<script>document.write("Hello World!")</script><noscript>抱歉,你的浏览器不支持 JavaScript!</n转载 2021-02-24 11:13:36 · 173 阅读 · 0 评论 -
HTML 框架iframe
通过使用iframe框架,我们可以在一个浏览器窗口浏览多个页面。iframe语法:<iframe src="URL"></iframe>该URL指向不同的网页。1、Iframe - 设置高度与宽度height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如:“80%”)。实例:<iframe src="demo_iframe.htm" width="200" height="200">&转载 2021-02-24 11:04:43 · 2527 阅读 · 0 评论 -
HTML <meta> 元素
meta标签描述了一些基本的元数据。<meta> 标签提供了元数据。元数据也不显示在页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。<meta>一般放置于 <head>区域 标签- 使用实例为搜索引擎定义关键词:<meta name="keywords" content="HTML, CSS, XM转载 2021-02-24 10:45:45 · 285 阅读 · 0 评论 -
HTML <base> 元素
<base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:<head><base href="http://www.runoob.com/images/" target="_blank"></head>转载 2021-02-24 10:43:26 · 197 阅读 · 0 评论 -
form表单提交数据到服务器
1、什么是form表单?网页中用来进行数据采集的单表<form action="/login" action='' method='POST' target='_blank'> <input type="text" name="user_name" /> <input type="password" name="password" /> <button type="submit">提交</button></for转载 2021-02-22 11:19:49 · 3428 阅读 · 0 评论 -
web开发中网站的超链接实现页面跳转的说明
超链接:<a href=""></a>href = “javascript:;” 的超链接,点击没有反应点击超链接以后,超链接会跳转页面,这是超链接的默认行为。但是此时如果我们不需要默认行为,可以通过在响应函数的最后,return false 来取消浏览器的默认行为。在执行JS脚本的页面我们可以执行js,实现页面效果,在不能执行js脚本的情况下,可以通过a链接实现页面的跳转。...原创 2021-02-05 09:59:12 · 2665 阅读 · 0 评论 -
HTML设置网站的图标
设置网站的图标(也就是左标题栏的图标和收藏栏的图标),使用icon图片,一般放在根目录下<link rel="icon" href = ”路径”> 例如:<link rel="icon" href="images/logo.ico">图片的格式的后缀名是.ico。...原创 2021-02-05 09:54:54 · 1022 阅读 · 0 评论 -
HTML+CSS写网站的Logo部分
网站logo,一般放在h1标签里,背景图片为Logo, 但是考虑到seo,网站名称也要写上。网站logo一般只放一个图片,文字部分是不会被显示的,为了隐藏logo中的文字,只给浏览器看但不显示在页面,加样式:text-indent:-9999px。可以参考以下html+css代码:HTML部分:<h1> <a href="https://blog.youkuaiyun.com" alt="优快云 Logo" title="优快云首页"> 优快云 <原创 2021-02-05 09:51:51 · 3585 阅读 · 0 评论 -
HTML标记含义
1.<html>…</html> :html文档标记2.<head>…</head> :文档头标记3.<title>…</title> :文档标题标记4. <body bgcolor=? Background=? > ... </body> :文档正文标记Bgcolor :背景颜色Background :背景图片5. <a href=? Target=?>热点</a>:超链接原创 2021-01-05 16:50:52 · 560 阅读 · 0 评论 -
用canvas画七彩虹伞
彩虹小伞效果图如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业1</title> <style> #can原创 2020-09-21 16:47:03 · 2372 阅读 · 5 评论 -
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下:代码实现效果如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业2</title> <原创 2020-09-21 16:41:47 · 926 阅读 · 0 评论 -
用HTML5+CSS3画一个简易的机器猫头像
布局使用了绝对定位、相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是不够好。原创 2020-09-16 00:34:43 · 2018 阅读 · 5 评论