专栏首页HTML5学堂2016.05 第1周 群问题分享

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),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何让旧浏览器支持HTML5新标签

    HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

    HTML5学堂
  • 关于行、块元素的讲解以及HTML5元素的分类

    继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

    HTML5学堂
  • 如何优化前端页面 / 如何优化网页

    HTML5学堂:如何优化前端页面 / 如何优化网页。作为前端开发人员来说,不但要开发出能兼容各大主流浏览器的页面,而且还需要懂得去优化前端页面。本文主要给大家讲...

    HTML5学堂
  • Html<a>标签href的困惑记载

    近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

    晚晴幽草轩轩主
  • Tag标签页面如何优化呢

    很多站长都不会如何制作tag页面,的ag页面使用并不恰当,甚至可能会有负效果。不过一两句话很难说清,所以单独写个帖子聊一下tag标签页面怎样SEO。

    V站CEO-西顾
  • vuex在页面刷新后数据被清除

    用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失

    wust小吴
  • 微信小程序|突出优点

    为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地...

    算法与编程之美
  • leetcode: 32. Longest Valid Parentheses [✗]

    JNingWei
  • 第45颗北斗导航卫星成功发射,未来将接入北斗卫星导航系统

    昨夜23时48分,我国在西昌卫星发射中心用长征三号丙运载火箭,以一箭一星间接入轨方式,成功发射了第四十五颗北斗导航卫星。

    镁客网
  • web前端常见面试题解析之函数节流与防抖(一)

    我们可以将这个定义进行一下拆分: 1、所谓函数节流指的就是一个函数。 2、该函数的执行需要一个周期进行控制。 3、周期内调用该函数不执行,否则会执行。

    用户1272076

扫码关注云+社区

领取腾讯云代金券