1.2.5  HTML5 改良的 input 元素的种类

1.2.5.1  新增的input元素种类中的改良与增加 input 元素的种类 (1)

  新增的input元素种类中的url类型、email类型、date类型、time类型、datetime类型和datetime-local类型

url类型

<form>
<input type="url" name="url" value="https://www.baidu.com">测试
<input type="submit" value="提交">
</form>
<br/>
<form>
<input type="email" name="email" value="cal@163.com">测试
<input type="submit" value="提交">
</form>
<input type="date" name="date" value="2018/11/13">
<input type="time" name="date" value="10:00">
<input type="datetime" name="datetime" value=""><!--datetime好像并没有什么卵用-->
<input type="datetime-local">

1.2.5.2  改良与增加 input 元素的种类 (2)

  新增的input元素种类中的month类型、week类型、number类型、range类型、search类型、tel类型和color类型。

<script>
function sum(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
document.getElementById("result").valueAsNumber = n1 + n2;
}
function sum2(){
var n1 = document.getElementById("num1").valueAsNumber;
var n2 = document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber = n1 + n2;
}
//第一种方法计算的是将字符串链接起来,第二种方法是数字计算
</script>
<input type="month" name="month" value="2010-01">
<input type="week" name="week">
<input type="number" name="number" value="15" min="10" max="100" step="10">
<form>
<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum2()">
</form>

1.2.5.3  改良与增加 input 元素种类 (3) 和表单验证

  新增的input元素种类中的output元素的追加,包含表单的验证。让用户对input元素有更加深入的了解。

  color属性的例子真的难理解<form>

<form>
<input type="range" name="range" value="25" min="0" max="100" step="5">
<input type="search">
<input type="tel">
<input type="color" onchange="document.body.style.backgroundColor = this.value;">
<!--<input type="color" onchange="document.body.style.backgroundColor =
document.getElementById('currentColor').textContent = this.value;">
这句不写也没有问题-->
<!--onchange 事件属性
当元素值改变时才会运行脚本:-->
<span id="currentColor"></span>
</form>

output使用

<form>
<input type="range" id="range" min="0" max="100" step="10" value="10" onchange="value_change()">
<output id="output">10</output>
</form>
<script>
function check(){
var email = document.getElementById("email");
if(email.value == ""){
alert("请输入email");
return false;
}else if(!email.checkValidity()){
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" novalidate="novalidate">
<!--novalidate是指当提交表单时不对表单数据(输入)进行验证:在这里这个属性不管用
因为在js中又写了检测的代码,可以不写-->
<label for="email">email</label>
<input type="email" name="email" id="email"><br/>
<input type="submit">
</form>

1.2.7  html5增强的页面元素

1.2.7.1  figure、figcaption、details、summary 和 mark 元素

<!--figure元素和figcaption元素
figure元素中只能有一个figcaption元素代表figure的标题-->
<figure>
<img src="1.jpg" alt="图1">
<img src="2.jpg" alt="图2">
<img src="3.jpg" alt="图3">
<figcaption>图片</figcaption>
</figure>
<!--details元素和summary元素
有些浏览器不支持这种新特性
这里我的google浏览器不知道为啥不能正确显示
内容还是会占据网页内容的,不像动态加载网页,本来不显示后来就显示了。-->
<script>
function detail_onclick(detail){
var p = document.getElementById("p");
if(detail.open){
p.style.visibility = "hidden";
} else{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" onclick="detail_onclick(this)">
<summary>速度与激情7</summary>
<!--省略summary元素速度与激情7会显示为详细信息这四个字-->
<p id="p" style="visibility:hidden;">你好吗?</p>
</details>
<!--mark元素-->
<p><mark>mark</mark>元素测试</p>

1.2.7.2  progress 和 meter 元素

  HTML5增强页面元素,包含progress和meter元素,progress元素代表一个任务的完成进度,这个进度是不确定的,表示进度正在进行,可以以进度百分比进行展示。

<script>
function btn(){
// for(var i = 0; i <= 100; i++){
// setTimeout(function () {
// updateprogress(i);
// },2000)
// }
//
//上面这一段语言由于js是单线程的,所以程序在将所有i都循环到
//101时之后才会开始执行循环内的setTimeout里的间隔函数。
//应该改成下面的函数才会一步步改变颜色。 var i = 0;
function thread_one(){
if(i<=100){
i++;
updateprogress(i);
}
}
setInterval(thread_one,200);
//setINterval执行无数次;取决于内部函数的结束。
// setTimeout(thread_one,200);
//setTimeout只执行一次
}
function updateprogress(newValue){
var progressBar = document.getElementById("p");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比 <progress style="background-color: aliceblue" id="p" max="100"><span>0</span>%</progress></p>
<input type="button" value="点击" onclick="btn()" value="点击">
</section>

注意js是单线程的程序。

meter元素表示规定范围内的数值量

<meter value="10" min="0" max="100" low="20" optimum="90">999</meter>

表示进度条颜色的变化

1.2.7.3  ol、dl、cite 和 smal l元素

  HTML5 增强的页面元素,包含ol、dl、cite和small元素。其中主要对ol进行详细讲解包含新增的start和reversed属性。

<!--ol改良-->
<ol start="5" reversed>
<!--reversed翻转(倒序)-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ol>
<!--dl(多个名字的列表项,dt后跟着一个或多个dd元素)(类似于聊天)-->
<dl>
<dt>aaa</dt>
<dd>你好啊</dd>
<dd>hello</dd>
<!--dd元素在后-->
<dt>是啊</dt>
<!--dt元素在前-->
</dl>
<!--cite斜体(表示作品的标题)-->
<p>cite <cite>测试</cite></p>
<!--small元素(标识小字印刷体的元素)-->
<small></small>

web前端学习(二)html学习笔记部分(2)-- 改良的元素(input元素等等)的更多相关文章

  1. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  2. 想做web前端project师应该学习些什么?

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  3. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  4. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  5. 2022年Web前端开发流程和学习路线(详尽版)

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

  6. web前端零基础入门学习!前端真不难!

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  7. 最适合2018年自学的web前端零基础系统学习视频+资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  8. 史上最全的web前端开发程序员学习清单!

    今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...

  9. WEB 前端模块化,读文笔记

    文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...

  10. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

随机推荐

  1. C++中如何实现像Java中接口功能--C++抽象类(纯虚函数,虚函数)

    在Java中定义个接口,之后可以定义不同的类来实现接口,如果有个函数的参数为这个接口的话,就可以对各自的类做出不同的响应. 如: interface animal { public void info ...

  2. 转载https://www.luogu.org/problemnew/solution/P1665,http://bailian.openjudge.cn/practice/2002/的新解法

    不知道为什么O(n^4)O(n4)的玄学方法能过,正解显然是O(n^2)O(n2)的,枚举对角线,然后算出另外两点判断存不存在. 关键就在怎么通过对角线算出另外两点的坐标. 先贴公式. int mid ...

  3. Codeforces-348E Pilgrims

    #4342. CF348 Pilgrims 此题同UOJ#11 ydc的大树 Online Judge:Bzoj-4342,Codeforces-348E,Luogu-CF348E,Uoj-#11 L ...

  4. redis消息队列先进先出需要注意什么?

    通常使用一个list来实现队列操作,这样有一个小限制,所以的任务统一都是先进先出,如果想优先处理某个任务就不太好处理了,这就需要让队列有优先级的概念,我们就可以优先处理高级别的任务,实现方式有以下几种 ...

  5. HZOI2019 B. 那一天她离我而去 最小环

    题目大意:https://www.cnblogs.com/Juve/articles/11219089.html 那一天,我们......行啦,不要帮出题人脑补画面了,我们来正经的题解 我们发现我们可 ...

  6. vbox虚拟机复制&&虚拟机指定静态IP

    一.复制镜像(假设源镜像已经用桥接方式,可以访问互联网). 注意需要重新生成mac地址 二.复制完成,启动复制好的镜像(注意,此时的镜像无法联网) vi /etc/udev/rules.d/70-pe ...

  7. PAT甲级——A1054 The Dominant Color

    Behind the scenes in the computer's memory, color is always talked about as a series of 24 bits of i ...

  8. Activiti实战01_认识Activiti

    什么是Activiti Activiti是为解决工作流而创建的一套流程引擎.举个最简单的例子,请假流程就是一个工作流,从开始到审批到结束,像流一样的贯穿整个流程.在工作中最常见的就是OA了.工作流总是 ...

  9. 文件上传 - Commons FileUpload介绍

    概述 FileUpload能够以多种不同的方式使用,具体取决于应用程序的要求.在最简单的情况下,调用单个方法来解析servlet请求,然后处理解析出来的Item集合.此外也可以自定义FileUploa ...

  10. day1(老男孩-Python3.5-S14期全栈开发)

    作者:赵俊            发布日期:2019/10/18 一.第一个python程序 1.在解释器下写hello world程序运行,与运行外部文件方法 运行外部文件,必须在相应位置创建一个p ...