Html5
13 topics in this forum
-
1、基本表单验证特性介绍 ① html5表单新增了那些类型？ email、url、number、range、date、search、color、tel等 ② 文本框中，输入一次，下一次再输入会自动提示是哪个特性？ autocomplete ③ 初始化页面之后，如何让input自动获取焦点？ autofocus ④ html5如何设置表单元素必填？ required ⑤ html5表单验证如何使用正则？ pattern ⑥ html5表单中设置了必填，提交表单的时候如何做到不验证？ novalidate或formnovalidate ⑦ 文本框灰色提示？ placeholder ⑧ 如何实现提示选择？ list和datalist 2、代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <bo…
.thumb.png.4b6f1472c86427f7b6b8e2dbf4a878c6.png)
Last reply by Pcasd, -
- 1 reply
- 203 views
实现效果： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #aa{ margin: 100px auto; width: 200px; height: 200px; transform-style: preserve-3d; position: relative; transform: rotateX(-15deg) rotateY(45deg); animation: name 6s linear 100ms infinite; } .bb{ position: absolute; width: 100px; height: 100px; left: 0; right: 0; background-color: rgba(232,222,45,0.6); } .qian{ transform: translateZ(50px); background-color: rgba(23,22,4,0.6); } .hou{ transform: translateZ(-50px); backgroun…
Last reply by Pcasd, -
- 1 reply
- 136 views
代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #one{ font-family:"微软雅黑" /*设置字体*/ } .hui{ color: #999; } h2{ letter-spacing: 5px /*设置标题字间距*/ } .red{ color: red; } .blue{ color:#05A9F2; } .center{ text-align: center;/*标题居中*/ } img{ margin:0px 30px; /*给图片上下外边距设置为0左右外边距设置为30*/ } p{ white-space: nowrap;/*设置空格空行无效，强制文本不能换行*/ } em{ white-space: nowrap;/*设置空格空行无效，强制文本不能换行*/ } </style> </head> <body> <spen class="center"> <h2 class="hui">把握<font class="blue">移动端字体设计</font>的七大准则</h…
Last reply by Pcasd, -
Vs code 软件是一款微软公司推出的免费的轻量级编辑器。 Ctrl+放大视图 Ctrl-减小视图 Shift+alt+方向键 向上、下复制一行 Emmet语法快速生成html结构语法 ！+tab形成骨架 标签+ tab 形成标签 div+tab 父子级关系，可以用> ul>li 兄弟级关系+ div+p+tab 生成个标签* div*6+tab .nav <div class=”nav”></div> #banner<div id=”banner”></div> (默认生成div标签) p.one <p class=”one”></p> span#gay<span id=”gay”></span> 如果标签内想写内容可以用{}表示 .demo$*6 生成类名有序（$自增符号,从1开始排序） 网页是网站中的一页，网页是html文档文件，网站通过一定规则，使用html等制作的用于展示特定内容的相关网页的集合，通过浏览器显示。网页是网站基本元素。因为html中的多媒体内容超越了文本限制，所以html被称为超文本标记语言。 Html语言是描述网页的语言 常用浏览器 谷歌浏览器，火狐浏览器，IE浏览…
Last reply by Pcasd, -
准备阶段： 前端软件：visual studio code 笔记软件：Typora 安装插件： 前端的框架代码 <html> <head> <title>标题</title> </head> <body> 主要内容 </body> </html> 说明： <html></html>可以比喻成一个人 <head></head>是人的头部 <title><title>是人的眼睛，里面主要写页面的头部标题，如下图所示位置 <body></body>是人的身体，人最重要的部位，html5的主要代码就是写在这里面，也是页面上显示的内容。 一般代码格式都是：<代码>书写内容</代码> 标签： 标题标签 <h1>一级标题标签</h1> <h2>二级标题标签</h2> 效果图： 介绍常用标签(普通标签) <p>今天天气怎么样？</p> …
Last reply by 无双剑客, -
- 0 replies
- 146 views
在拥有个人中心类型的网站中，无论是响应式还是手机版都绕不过一个尴尬的问题，那就是内容区无法撑起手机一屏高度。 为此我整理了两种简单的方法来让页面最小高度为一屏高度。 一、利用jq/js获取高度计算 首先一个页面可以分为三个区域，头部区，主体内容区，底部区。 头部区域一直浮动在顶部，和底部区域一样高度不会变化。所以我们只需要获取到屏幕高度然后减去头底部高度就是内容区域的最小高度。 $(function(){ var winH = $(window).height(); //获取当前视口高度 var htmlH = $(document).innerHeight(); //获取当前html高度 var headerH = $('header').innerHeight(); //获取当前头部高度 var footerH = $('footer').innerHeight(); //获取当前底部高度 if(htmlH < winH){ //进行判断 $('main').height(winH - headerH - footerH); //设置主体内容高度 } }) 这样就可以通过jq让所有页面最小高度不会小…
Last reply by NedK7, -
- 0 replies
- 143 views
1、拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了 2、源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等 目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。 二、拖拽API相关函数 被拖动的源对象可以触发的事件： 1、ondragstart 源对象开始被拖动 2、ondrag 源对象被拖动过程中(鼠标可能在移动也可能未移动) 3、ondragend 源对象被拖动结束 拖动对象进入到目标对象区域可以触发的事件 1、ondragenter 目标对象被源对象拖动着进入 2、ondragover 目标对象被源对象拖动着悬停在上方 3、ondragleave 源对象拖动着离开了目标对象 4、ondrop 源对象拖动着在目标对象上方释放/松手 三、如何在拖动的源对象事件和目标对象事件之间传递数据 HTML5为所有的拖动相关事件提供了一个新的属性 e.dataTransfer 数据传递对象（用于在源对象事件和目标对象事件之间传递数据） 源对象事件中保存数据： e.dataTransfer.setData(k, v) k和v 都必须是string类型 目标对象上的事件处理中读取数据： let v = emdataTransfer.getData( k ) 四：案例 示例一：实现一个可以随着鼠标拖动而移动的效果 <!DOC…
Last reply by NedK7, -
- 0 replies
- 145 views
名词解释 HTML5 就是传统意义上的 HTML5。目前最新的 HTML 规范，互联网的下一代标准，W3C 联盟制定，手机端主要由 webkit 实现规范，对用户来说就是浏览器实现了它。 HTML5+ / HTML5Plus 通过 HTML5 开发移动 App 时，会发现 HTML5 很多能力不具备。为弥补 HTML5 能力的不足，在 W3C 中国的指导下成立了中国HTML5+产业联盟，推出 HTML5+ 规范。 HTML5+ 扩展了 JS 对象 plus，使得 JS 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。同时实现了 Android 和 IOS 的解析引擎，使得开发者的代码编写一次，可跨平台运行。 除了功能外，HTML5+ 很重要的特点是提供了原生的渲染能力，通过 plus.webview、 plus.nativeObj、 plus.nativeUI，让开发者可以使用 JS 来调用原生渲染能力，实现体验的大幅提升。 原生的 API 多达 40 万，HTML5+ 的封装并非把 40 万 API 都封装了一遍，而是分成了 2 个层面：HTML5+ 规范和Native.js Native.js 手机 OS 的原生 API 有四十多万，大量的 API …
Last reply by NedK7, -
- 0 replies
- 143 views
1.HTML5专门为画布功能提供的标签:<canvas>,所以画布相关的功能都是基于这个标签来完成的; 1 <canvas id="canvas" width="550" height="300"></canvas> 2 // 直接在canvas中设置width和height属性和将width和height添加到CSS文件中,有一定的区别: 3 // 1.使用属性来定义canvas,不仅定义canvas对象的宽高,同时也定义了可绘制图形区的宽高; 4 // 2.而使用CSS的方法只能定义canvas本身的大小,不能定义图形绘制区; 2.为了能够调用HTML5的画布API,我们需要访问画布的相关上下文(Context); 1 var canvas = document.getElementById('canvas'), 2 context = canvas.getContext('2d'); 3 // 使用context可以调用更多的方法来绘制; 二 使用HTML5画布绘制直线 1.beginPath():开始绘制准备; 2.moveTo():绘制的起始坐标(x,y); 3.lineTo():绘制的结束坐标(x,y); 4.stroke():立刻开始绘制直线; 1 var canvas = document.getEl…
Last reply by NedK7, -
HTML5-分组元素
by NedK7- 0 replies
- 140 views
<p></p> //建立段落，实际作用就是将包含的文本形成一个段落，而段落与段落上下之间保持固定的间隙。 <div></div> //通用分组，早起版本常用来进行一般性元素的分组，而在HTML5中，由于语义的缘故，被其他各种元素替代， 和<p>元素的区别就是两段文本的上下间隔是没有的，空间间隔跟<br>是一样的。 <blockquote></blockquote> //除了和<p>元素作用一致，包含了段落与段落之间的间隔， 还包含了段落的首尾缩进，表示引用他处的大段文章。 <pre></pre> //展现格式化内容，就是编辑器内代码如何排版，原封不动的在浏览器上呈现出来， 只适合简单的排版，复杂的排版就无法满足要求了。 <hr> //单标签，水平线，呈现上下文意图的分割。建议使用CSS样式取代属性， width：50%;规定<hr>的长度； size:200px;规定<hr>的厚度； nashade="nashade";规定没有阴影的水平线，不标识为有阴影的水平线。 align:center;规定<hr>的对齐属性，只有设置长度后方才生效，cente…
Last reply by NedK7, -
- 0 replies
- 131 views
HTML面试题部分 1.H5的新特性有哪些 2.Label的作用是什么？是怎么用的？ 3.HTML5的form如何关闭自动完成功能 4.dom如何实现浏览器内多个标签页之间的通信? 5.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都 能保持一致的效果 6.title与h1的区别、b与strong的区别、i与em的区别？ 7.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 8.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 9.div+css的布局较table布局有什么优点 10.img的alt与title有何异同？ strong与em的异同 11.简述一下src与href的区别 12.知道的网页制作会用到的图片格式有哪些 13.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js 请求一般情况下有哪些地方会有缓存处理 14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些 图片的加载，给用户更好的体验 15.你如何理解HTML结构的语义化 16.谈谈以前端角度出发做好SEO需要考虑什么 17.17.html5有哪些新特性、移除了那些元素 … CSS面试题 1.盒模型 2.如何实现一个最大的正方形 3.一行水平居中，多行居左 4.水平垂直居中 5.两栏布局，左边固定，右边自适应，左右不重叠 6…
Last reply by NedK7, -
- 0 replies
- 129 views
表单应用： 隐藏域：hidden 只读：readonly 禁用：disabled <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!-- readonly：只读 当在input中设置了readonly，那这个文本框不能输入值了，只能显示value中的值 --> <p> 文本： <input type="text" value="amde" readonly/> </p> <!-- checked：默认值 disabled：禁用，当设置了个这个，那设置了这个值的文本框，就不能再选中了 --> <input type="radio" value="boy" name="sa" checked disabled/>男 <input type="radio" value="girl" name="sa"/>女 <!-- 隐藏域： hidden:隐藏域 作用：我们可以通过隐藏域，来设置默…
Last reply by NedK7, -
- 0 replies
- 141 views
HTML5 对于初学者甚至是非程序员来说都有着十足的吸引力。实际上，只要你访问网站，就会和 HTML 打交道。如果能够熟悉一些关键的编程技巧，当你对网站做一些细节调整或优化基本的 Web 元素时就能节省大量的时间（甚至是金钱）。因此，本文精选了 10 个对于 Web 开发者来说非常实用的 HTML 编程技巧，而且它们不需要花太多时间精力就可以轻松掌握。 1. 可与本地缓存媒体资源交互 HTML5 FileSystem API 一开始被认为是 AppCache 的替代方案，用来实现资产的动态缓存。但是你知道吗，其实你还可以用它来实现与用户本地设备上存储文件的交互。 例如，你可以在应用中添加以下功能： 断点上传器：将文件复制到一个本地沙箱中，然后分批上传。出现连接中断、浏览器崩溃故障后可以重新启动上传操作。 为游戏、音乐播放器，照片编辑器等媒体密集型应用启用本地缓存。 为内容查看创建离线模式，例如离线视频、电子邮件附件和文本等。 注意：FileSystem API 仅被 Chrome 支持。 如果你想尝试离线存储功能，还可以参考以下资源和代码教程： Eric Bidelman：如何使用 HTML5 FileSystem API[1]。 管理 HTML5 离线存储 [2]。 HTML5 中的脱机文件：FileSystem API[3]。 2. 进行自动表单验证 对于网站安全性和流畅的用户体验来说，表单验证非常…
Last reply by NedK7,