千锋教育-做有情怀、有良心、有品质的IT职业教育机构

零基础学习HTML5必学知识点

时间:2017-08-14 10:39:45  |  来源:千锋教育郑州校区  |  作者:

    新元素

  1.datalist 元素,用法:需要配合input元素使用,在input元素中定义list属性(值为datalist元素的id值),好处就是数据与结构的分离

  2.progress 元素,就是实现一个进度条,属性有:max - 设置进度条的大值、value - 设置进度条当前的值

  3. meter 元素,用法和元素类似,作用 - 刻度,属性包括:min和max - 设置小值和大值、 value - 表示当前值,high和low - 设置预警值(举个常见的例子,当你手机的电量小于10%时候,一般会显示红色的一小段进度)

  4.output 元素,和input输入框正好相反,output是输出框,属性:for指定要输出的元素进行关联(实际开发中,很少使用)

  新属性

  1.placeholder属性:就是实现input输入框的默认提示信息,相比value属性值好用。这个在实际开发过程中非常常见

  2.autofocus属性:就是自动获取焦点、用法有点不同,它不是key=vlaue的形式,而是直接只定义属性名(没有属性值)

  3.multiple属性:就是允许输入框输入多个值,用法和autofocus一样只定义属性名(没有属性值)

  4.form属性(实际开发中用到不多):就是表单元素定义在表单之外,用法 - 值是相关表单的id属性值

  INPUT新类型:

  1.email类型 - 判断字符串中是否包含"@"符号,注意的是不能以"@"开始、不能以"@"结束

  2.搜索类型 - search

  3.URL类型 - 判断字符串中是否包含"http:",注意的是以"http:"开始,验证通过,以"http:"结束,验证通过

  4.电话号码类型 - tel,注意的是只有在手机端浏览器访问时有效果

  5.数字类型 - number,需要注意的是允许输入非数字内容,但是不允许提交,在设置min和max时,允许输入范围外的值,不允许提交;这个类型有一些属性:min - 设置数字的小值;max - 设置数字的大值;step - 设置步长,每次增加或减小的量值

  6.范围类型 - range,效果就是滑动条,属性:min - 小值、max - 大值、step - 步长、value - 当前值

  7.颜色类型 - color

  8.日期类型 - date,日期格式 - yyyy/MM/dd

  9.周 - week(实际很少使用)

  10.月份 - month(实际很少使用)

  新验证

  1.验证属性:

  required属性:验证是否为空?返回false,表示当前元素值为空, 返回true,表示当前元素值不为空

  pattern属性:验证正则表达式,定义正则表达式时,不能添加"//", 正则表达式不能验证是否为空

  min和max属性:验证小值和大值 ,只和number类型的input元素配置使用

  minlength和maxlength属性:验证小长度和大长度,minlength - 验证小长度,maxlength - 限制大长度(输入内容的长度不能大于maxlength的值)

  validity属性:HTML5提供表单验证的接口,通过该属性得到validityState对象,该对象提供一系列的有效状态, 有效状态可用于表单验证,得到validatyState对象,elem.validaty - 得到该对象

  2.有效状态

  valid - 返回Boolean,表示验证是否通过,true - 表示验证通过, false - 表示验证失败,

  valueMissing - 表示值是否为空,返回值true - 表示元素值为空(错误)、false - 表示元素值不为空(正确) 注意该状态配合required属性使用

  typeMismatch - 表示元素类型是否匹配,返回值true - 表示元素类型不匹配、false - 表示元素类型匹配、 该状态配合email、url、number等使用

  patternMismatch - 表示正则表达式是否匹配、返回值true - 表示正则表达式不匹配、false - 表示正则表达式匹配,该状态配合pattern属性使用

  tooLong - 表示元素内容长度是否过长,返回值true - 表示元素内容长度过长,false - 表示元素内容长度不长,该状态配合maxlength属性使用

  maxlength属性 - 限制属性,tooLong可能不会出现(完整性)

  rangeUnderflow - 表示元素值是否小于min值,返回值true - 表示元素值小于min的值,false - 表示元素值不小于min的值 该状态配合min属性使用

  stepMismatch - 表示元素值与step值是否不符,返回值true - 表示元素值与step值不符,false - 表示元素值与step值相符 该状态配合step属性使用

  customError - 自定义错误,配合setCustomValidity()方法使用,作用就是替换之前的判断表达式,自定义错误提示信息setCustomValidity(自定义错误信息),一旦调用该方法,默认认为就是错的,上述所有的有效状态返回错误值 验证正确时,调用该方法,将错误信息置为空

新开班

  • ▪ Python培训班 03.26 抢座
  • ▪ HTML5培训班 03.12 抢座
  • ▪ JavaEE培训班 03.26 抢座
  • ▪ Python培训班 02.26 爆满
  • ▪ JavaEE培训班 01.22 开班
  • ▪ HTML5培训班 12.25 开班
  • ▪ HTML5培训班 11.20 开班
  • ▪ UI交互设计培训 11.20 开班
  • ▪ JavaEE培训班 11.20 开班
  • ▪ HTML5培训班 10.09 爆满
  • 郑州地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55911950 400-654-7778
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训、UI课程培训
  • 北京天丰利校区:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术广场服务楼2层、南区服务楼2层
    咨询电话:400-654-7778 010-82790226-801
    面授课程:iOS培训、Android培训、HTML5培训、UI培训、PHP培训、JavaEE培训、好程序员
  • 深圳科技园校区:深圳市南山区科苑南路高新技术产业园R3-B栋5层
    深圳大学城校区:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    深圳西部硅谷校区:深圳市宝安区宝安大道5010号西部硅谷B座A605-619
    咨询电话:0755-86681178/9-801
    面授课程:iOS培训、Android培训、HTML5培训、UI培训、PHP培训、JavaEE培训、好程序员
  • 上海地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-65025129-602
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训、UI课程培训、好程序员
  • 成都旅游校区:成都市一环路西二段17号四川旅游青羊校区内
    成都华立校区:成都一环路西二段17号华立大厦3楼
    咨询电话:028-83178771 028-61967740
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训、UI课程培训
  • 广州地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-654-7778
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训
  • 大连地址:大连市甘井子区软件园路2号B8座二楼
    咨询电话:0411-39026086 400-654-7778
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训
  • 武汉地址:武汉市东新区光谷大道77号金融港B26栋9楼
    咨询电话:027-59905909 027-59905908 027-59905902
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训
  • 西安南二环校区:西安市二环南路西段60号永安大厦4层
    西安科技园校区:西安市雁塔区高新六路52号立人科技园C座西区4层
    咨询电话:029-85260160 029-85261030 029-85260960
    面授课程:iOS课程培训、Android课程培训、HTML5课程培训
  • 杭州地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226/7-801
    面授课程:iOS课程培训、Android课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226/7-801
    面授课程:iOS课程培训、Android课程培训、UI课程培训
  • 千锋教育微信号
    扫描加好友