2016.05 第1周 群问题分享

HTML+CSS

a标签href属性的作用

2016.05.02~2016.05.06

核心概念

a标签href属性

参考答案

a标签定义超链接,用于从一个页面链接到另一个页面;

a标签最重要的属性是href属性,它指示链接的目标;href属性里面的值url,规定链接指向的页面的url;在HTML5中,a标签始终是超链接,但是如果未设置href属性值,则只是超链接的占位符;如果不跳转页面则可以设置成href="javascript:;"或者href="void(0);"。


怎么在一个页面中点击图片跳转到另一个页面播放视频

2016.05.02~2016.05.06

核心概念

a标签、HTML5视音频

参考答案

在一个页面中点击图片进入到另一个页面进行播放视频,只需要a标签包含一个img标签,a标签里面的href属性里面对应的写上视频播放地址(页面)即可。针对视频播放问题,HTML5可以简简单单实现视频、音频的播放功能,用一个video标签足矣。video标签虽好用,但是其默认样式在各个浏览器的表现形式千奇百怪。

解决办法可以在HTML5学堂官网搜索“HTML5视音频”


<a href="#" target="_self">陈林</a>表示什么

2016.05.02~2016.05.06

核心概念

a标签里面的属性

参考答案

href="#"表示的是锚链接,当你页面有滚动时,你点链接会跳转到页面的顶部;

target值表示的是从哪里打开页面,默认就是从当前窗口打开,用_self表示(链接的内容显示在当前视窗中);用_blank表示在新视窗打开页面;


如何把ul li的圆点变为小方块

2016.05.02~2016.05.06

核心概念

list-style-type属性

参考答案

list-style-type: square;

JavaScript

正则表达式验证身份证号码

2016.05.02~2016.05.06

核心概念

正则表达式、身份证号码生成原理

参考答案

书写正则表达式之前,需要先了解身份证号码的基本规则。

/*
* 身份证18位编码规则:dddddd yyyymmdd xxx y
* dddddd:6位地区编码
* yyyymmdd: 出生年(四位年)月日,如:19910215
* xxx:顺序编码,系统产生,无法确定,奇数为男,偶数为女
* y: 校验码,该位数值可通过前17位计算获得
* HTML5学堂出品 http://www.h5course.com 请尊重原创
* 前17位号码加权因子为 Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ]
* 验证位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
* 如果验证码恰好是10,为了保证身份证是十八位,那么第十八位将用X来代替
*/

校验位计算方法:身份证前17位,每一位数字和相应位数的加权因子进行乘法运算,之后求和(17项之和),再用这个和对11取余,所得的余数作为“验证位数组Y”的下标,也就是Y[余数],找到“验证位数组Y”中的相应数字,如果身份证最后一位和这个数字吻合,则身份证号码合法(如果最后一位是X/x,就对应于“验证位数组Y”中的10这个数字)

实例:

假如是这个身份证号码(这个身份证号码是我瞎编的):110203198811120342。

于是,复杂的计算开始了。取出身份证前17位,与[7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]中对应的位分别进行乘法运算,于是乎:

sum = 1 * 7 + 1 * 9 + 0 * 10 + 2 * 5 + ... + 3 * 4 + 4 * 2。

我们能够计算出来,总和为177。之后用177对11取余,余数为1。那么在[1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]数组中,下标为1的元素就是第二个元素,也就是数值为0。此时将0与身份证号的最后一位(2)做比较,很明显,错误,那么也证明了这个号码是我瞎编的了……

于是乎,完整匹配身份证号码的正则华丽丽的诞生了~~~

var reg =/^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$/;

相关知识可以在HTML5学堂官网搜索“正则验证身份证号码”


操作符与数据类型

2016.05.02~2016.05.06

核心概念

变量声明、数据类型、操作符

参考答案

题目:

<script>
    var a;
    var b = a * 0;
    if (b == b) {
       console.log(b * 2 + "2" - 0 + 4);
    } else {
       console.log(!b * 2 + "2" - 0 + 4);
    }
</script>

1 声明了变量a,但是未进行赋值,所以a的默认初始值为undefined;

2 var b = a * 0; undefined的数学运算最终结果为NaN;

3 NaN是代表非数字值的特殊值;NaN不等于NaN;NaN在布尔值当中是false,所以!NaN在布尔值里面就是true,true转换成数字就是1;

1 * 2 + '2' --> 此处的+是连字符,构成'22'这个字符串;

'22' - 0 --> 此处将'22'从字符串转换为数字22(隐式转换)。最后就是22 + 4 = 26。

相关知识可以在HTML5学堂官网搜索“数据类型转换或者HTML5真题练习”

HTML5学堂小编 - 陈林 耗时5h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

学习前端 第6周 第1天

561
来自专栏Nian糕的私人厨房

《精通CSS:高级Web标准解决方案》 知识点汇总

本篇的内容到这里就全部结束了,常用的 CSS 样式重置文件我已经发到了 GitHub Reset.css,本篇文章知识点来源 精通CSS:高级Web标准解决方案...

583
来自专栏全沾开发(huā)

总结CSS3新特性(Animation篇)

总结CSS3新特性(Animation篇) 动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@k...

3086
来自专栏知晓程序

开发 | 傻瓜式操作带你初始化「跳一跳」游戏场景

在上一篇教程里,知晓程序为大家详细讲解了如何创建小游戏「跳一跳」的游戏场景。通过介绍,大家一定对于小游戏的开发有了更进一步的认识。

1293
来自专栏Android知识点总结

SpringBoot-13-插曲之Node文件重命名+自动生成json对象

952
来自专栏Android随笔

Android开发实践

网上大部分命名规范文章里,并不是以模块名开头的,可能是习惯不一样,也有可能我的做法是错误的。希望您能及时指正,谢谢! 把模块名称放在最前面,再配合Androi...

723
来自专栏淡定的博客

正则表达式常用语法总结

通过在 *、+ 或 ? 限定符之后放置?,该表达式从”贪心”表达式转换为”非贪心”表达式或者最小匹配

883
来自专栏程序猿DD

第一章 正则表达式字符匹配攻略

第一章 正则表达式字符匹配攻略 正则表达式是匹配模式,要么匹配字符,要么匹配位置。请记住这句话。 然而关于正则如何匹配字符的学习,大部分人都觉得这块比较杂乱。...

19310
来自专栏淡定的博客

前端开发中使用mockjs模拟数据

名称:模拟的数据的名字。 值:模拟的数据的值。 规则:模拟出数据的规则,常用的几个规则:

2540
来自专栏GreenLeaves

JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务...

3856

扫码关注云+社区