HTML之H5

时间:2025-01-15 22:14:12

一、新增标签

1、网页结构语义化标签(8个):

  1.     header,用于展示介绍性内容或是辅助导航
  2.     nav,网页导航栏
  3.     section,类似于一篇文章独立的章节,是article的一部分(个人理解)
  4.     article,类似于一篇独立的文章(个人理解)
  5.     aside,侧边栏,多见于侧边导航栏(个人理解)
  6.     figure,文章的补充部分,该部分的缺失应该不影响主体内容价值流失
  7.     figcaption,figure标签内的标题
  8.     footer,页脚,通常包含作者信息、版权数据、相关链接等

2、自定义图形标签canvas

        配合js来完成图像or文字的绘制

3、可伸缩矢量图形svg(这名字我也搞不懂0.0)

        配合样式css来完成图像绘制        

4、数学语言标签math

        通过math嵌套其他数学标签可以完成数学公式的编写

5、媒体标签

        1、视频标签video

                 属性:autoplay、controls、长宽、loop、muted、poster、src
                 还有相对应js事件,如playPause
                 子标签:source资源标签、track字幕标签
                   

        2、音频标签audio

                 属性:auto play、controls、loop、preload、src
                 子标签:source资源标签

        3、资源标签source

                属性:src、type="video/xx.mp4"

6、新增input类型(13个,只列举部分):定义input标签中type的属性值

        1、选择颜色:<input type="color" name="favcolor">

        2、选择年月日:<input type="date" name="bday">年月日

        3、填写数字:<input type="number" name="quantity" min="1" max="5">,min max属性限制填写范围

        4、条状数字表:<input type="range" name="points" min="1" max="10">

        5、搜索框:<input type="range" name="points" min="1" max="10">类似文本框

        6、电话号:<input type="tel" name="usrtel">

        7、时间表:<input type="time" name="usr_time">

        8、网址:<input type="url" name="homepage">

7、自动完成列表datalist

        效果:通常配合文本框使用,类似在百度搜索框输入搜索内容时弹出的联想搜索内容

        使用规则:用input中datalist属性指定一个自动完成列表标签datalist的id号,即input中list属性值和datalist中id属性值保持一致,用单元素标签option中value值完成联想内容,示例如下:

            <input list="browsers" name="browser" type="text">
            <datalist >
              <option value="Internet Explorer">
              <option value="Firefox">
              <option value="Chrome">
              <option value="Opera">
              <option value="Safari">
            </datalist>

8、输出标签output

       使用规则:
                        第一步、output属性name定义变量x
                        第二步、定义参与运算的input标签中的属性name为其他变量,如a、b
                        第三步、在form标签中oninput属性指定运算规则,如a+b=m
                        第四步、运算结果会出现output标签内,并且会替代output标签内所有内容,如output内部原来只有一个a链接标签,但是输入a、b两值后,output内部只有运算结果
       示例如下:

                         <form οninput="=parseInt()+parseInt()">
                                <input type="number" name="a"> + <input type="number" name="b">=
                                <output name="x"><a href="#">百度一下<a/></output></form>

9、插件标签object、embed(补充)


    1、object: <object width="100%" height="500px" data="">图片丢失</object> ,data属性值指定插件文
件    
    2、embed: <embed src="" /> 单标签,不能使用替代文本
      
    

二、新增对象

1、Web本地存储:以键值对的方式保存在本地用户端中

        1、localStorage:需要手动删除

                常用方法:

                        保存数据(key,value);
                        读取数据(key);
                        删除某个数据(key);
                        删除所有数据();

        2、sessionStorage:关闭某一页面后就会删除

                常用方法:存、读、删、清楚所有,与上文类似

2、openDatabase创建数据库

        可在网页中直接操作数据库

3、后台运行脚本Worker:页面在执行脚本时是无法响应用户的,如用户不能点击链接等。但是使用后台脚本就可以解决上述问题。

        使用规则:

                第一步、创建外部执行的脚本js
                第二步、创建Worker对象:var w = Worker("./");
                第三步、利用事件监听等触发后台脚本:
                第四步、后台脚本停止()

4、Socket对象:浏览器和服务器只需要做一个握手的动作,两者之间就直接可以数据互相传送。

       var Socket = new WebSocket(url, [protocol] );

        知识待补充……

三、代码规范

1、H5的html文档声明:<!DOCTYPE html>

2、编写标签和属性时用小写:<a href="#">记得用小写</a>

3、标签属性值要加引号:<img src="./" />

4、所有标签都需要关闭:<p></p> or <img />

5、嵌套标签使用缩进,一行尽量少于80个字符

6、使用注释

四、需加强的知识点:

1、加强对新增的8个网页结构语义化标签理解

2、如有工作需要,进行canvas、svg、math等标签的学习

3、有一定js基础后,需要回顾Woker、Socket等新增对象

注:该文章内容参考MDN文档和官方网站 - 学的不仅是技术,更是梦想!并且结合自己的理解所作出,仅供参考。如有不当之处,望指正!么么哒!