HTML5学习笔记（一）HTML5新标签新属性

布满荆棘的人生 2022-04-18 02:55 366阅读 0赞

一、HTML5简介

2014年10月29日，HTML5标准规范制定完成，并公开发布。

二、HTML5页面结构

HTML5提供了新的语义元素来明确一个Web页面的不同部分。

<header>：定义文档的头部区域。

<nav>：定义导航链接的部分。

<section>：定义文档中的小节。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。

<article>：定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

<aside>：定义页面主区域内容之外的内容（比如侧边栏）。

<figure>：标签规定独立的流内容（图像、图表、照片、代码等等），结构更加清晰。

<figcaption>：定义 <figure> 元素的标题。

<footer>：定义页面底部区域

各标签在页面中的大体位置为

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

三、HTML5新表单

1、input新类型     （都比较简单，练一下就知道干什么的了）  
      email类型 -填写邮箱， 验证是否包含"@"，但是验证逻辑不完整  
      url类型 - 填写网址，验证是否包含"http://"，但是验证逻辑不完整  
      tel类型 - 只在移动端显示数字按键  
      number类型 - 数字类型 框中有上下键可改变数字，min为最小值，max为最大值，step为步长，默认为一  
      range类型 - 范围类型，手动滑动选择值，value为设置的默认值，<input type="range" min=0 max=10 step=1 value=5>  
      date类型 - 日期选择类型  
      color类型 - 颜色选择类型                                                                                                                                                                   search类型 - 搜索类型

2、表单新元素  
    ① datalist元素 - 定义备选项（并不显示），效果与<select>下拉列表类似，实现列表内容与现实分离，列表内容可多次被引用

②progress元素 -  进度条属性，max设置进度条最大值，无min属性，最小值为0，value代表当前进度值  
     ③meter元素 - 刻度值，min最小值，max最大值，value当前刻度值， low低预警值（设置的值在min与max之间），value低于low值时<meter>元素会变色，high高预警值（设置的值在min与max之间，并且比low大），value高于high值时<meter>元素会变色，颜色与low的颜色不同  
     ④output元素 - 输出

3、表单新属性  
     \* placeholder - 提供默认提示内容，设置提示文字，类似背景 ，常用                                                                                                \* autofocus - 自动获取焦点，如果为表单设置了这个属性，可以一进入页面就可以获得焦点  
        multiple - 允许输入多个值， 多个值之间使用","  
        form - 允许表单元素定义在表单之外，基本yong用不到

4、表单新验证

1） 验证属性  
       ① required属性  
         验证当前元素值是否为空  
       ② pattern属性  
         使用正则表达式验证当前元素值是否匹配，     注意 - 并不能验证当前元素值是否为空

<input type="text" pattern="^\[a-zA-Z\]\{6,12\}$">  
       ③ min和max属性  
          验证当前元素值最小值或最大值，一般用于range或者number  
       ④ minlength和maxlength属性  
            minlength - 验证当前元素值的最小长度，输入值时,允许输入小于指定值，提交表单时,验证元素值最小长度  
                     minlength并不是HTML5新属性  
            maxlength - 验证当前元素值的最大长度， 输入值时,长度不能大于指定值  
       ⑤validity属性  
          表单验证HTML5提供一种有效状态，有效状态通过validityState对象获取到  
           validityState对象可通过validity属性得到

2） 验证(有效)状态  
        validityState对象提供了一系列的有效状态，通过这些有效状态,进行判断  
        注意    所有验证状态必须配合上述的验证属性使用  
        作用  用来替换原本手工实现的逻辑  
        验证状态  
       ① valid  
        作用 - 判断当前元素值是否正确  
        注意  
          该状态返回true,表示验证成功  
          该状态返回false,表示验证失败  
      ②valueMissing  
        作用 - 判断当前元素值是否为空  
        用法 - 配合required属性使用  
      ③typeMismatch  
        作用 - 判断当前元素值的类型是否匹配  
        用法 - 配合email、number、url等  
     ④ patternMismatch  
        作用 - 判断当前元素值是否与指定正则表达式匹配  
        用法 - 配合pattern属性使用  
     ⑤ tooLong  
        作用 - 判断当前元素值的长度是否正确  
        用法 - 配合maxlength属性  
        注意  
          使用maxlength属性后,实际不可能出现长度大于maxlength的值  
          tooLong很难出现这种情况  
     ⑥ rangeUnderflow  
        作用 - 判断当前元素值是否小于min属性值  
        用法 - 配合min属性  
        注意 - 并不能与max属性值进行比较  
     ⑦ stepMismatch  
        作用 - 判断当前元素值是否与step设置相符  
        用法 - 配合step使用  
        注意 - 并不能与min或max属性值进行比较  
     ⑧customError  
        用法 - 配合setCustomValidity()方法  
          如果使用该方法,该状态返回true  
     ⑨setCustomValidity()方法  
          作用 - 设置自定义的错误提示内容  
          问题 - 使用该方法设置错误信息  
            当输入正确时,调用该方法将信息设置为空("")  
            不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220418/1fff3101e43c4434922e2322b7c85bb8.png