HTML5部分基本内容

Posted 2021-03-29 码农侃生活

一、对html技术的理解

HTML5由W3C于2014年10月制定，旨在替换早期的HTML4.01和XHTML1.0标准，以适应互联网快速发展的需求。

优点：

1）多设备，跨平台；

2）用户体验好；

3）新标签的可读性高，有助于开发人员定义重要内容；

4）提供了更多的多媒体元素（视频和音频）；

5）很好地替代了Flash和Silverlight；

6）涉及到网站的抓取和索引的时候，SEO更加友好；

7）可以被大量应用于移动应用程序和游戏。

缺点：

1）web storage和web socket这样的功能很容易被黑客利用，安全性差；

2）兼容性不好，很多浏览器的支持程度不一样；

3）有一定的技术门槛；

4）某些平台上的引擎问题导致HTML5性能低下；

二、HTMl5新特性

1）语义化标签(谈谈对语义化标签的理解？)

      语义化标签就是说元素本身传达了关于标签所包含内容类型的一些信息。

       

        为什么要语义化？

        代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构

        有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息

        提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。

        便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。

        方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

        HTML5常用的语义化标签？

        以下是常用的语义元素：        

        块级标签、行内标签和行内块标签的区别？彼此自检如何转换？

        各标签的区别：

        块标签：独自占领一行、可以进行宽高的数值的设定；
        行标签：在一行内显示、不可以进行宽高的数值设定；
        行内块标签：能和其他元素待在一行，能设置宽高；

        

        各种标签之间的转换

        1、块级标签转换为行内标签：display:inline;

        2、行内标签转换为块级标签：display:block;

        3、转换为行内块标签：display：inline-block;

    2）增强型表单

    （1） Form表单标签新增加属性有哪些？    

       autocomplete：属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。<form autocomplete="on|off">

        novalidate：属性规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。<form novalidate="true">  

    （2）input标签新增加属性有哪些？

        color：用于指定颜色的控件。

        date：用于输入日期的控件（年，月，日，不包括时间）。 

        datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分）。

        datetime-local：用于输入日期时间控件，不包含时区。 

       email：用于编辑 e-mail 的字段。合适的时候可以使用 :valid 和 :invalid CSS 伪类。

        month：用于输入年月的控件，不带时区。

        number: 用于输入浮点数的控件。

        range：用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值：min：0 max：100 value：min + (max-min)/2，或当 max 小于 min 时使用。

        search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

        time：用于输入不含时区的时间控件。

        url：用于编辑URL的字段。换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。

        week：用于输入一个由星期-年组成的日期，日期不包括时区。

3）新增视图<video/>和音频 <audio/> 标签

4）Canvas绘图、SVG绘图

    （1）canvas绘图和svg绘图的区别？

        

5）地理定位

window.navigator.geolocation { getCurrentPosition: fn 用于获取当前的位置数据 watchPosition: fn 监视用户位置的改变 clearWatch: fn 清除定位监视}

6）拖放API、Web Worker、Web Storage

7）WebSocket

    （1）浅谈对WebSocket的理解？

        WebSocket是HTML5一种新的协议，WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术，是一种在单个TCP连接上进行全双工通讯协议。

    （2）http和WebSocket的区别？

        http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。

     （3）WebSocket和Socket的区别是什么？

        Socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。而WebSocket则不同，它是一个完整的应用层协议，包含一套标准的API。

三、HTML盒模型

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

主要有两种盒模型：标准盒模型和IE（怪异）盒模型。

标准盒模型和IE（怪异）区别：

1）标准盒模型：宽高是内容区的宽度（只包含节点显示的具体内容）

2）IE盒模型：宽高是显示效果的实际效果（包含节点的全部内容）

四、主流浏览器、内核、js引擎

主流浏览器是指在市场上有一定的市场份额并且有自己独立研发的引擎的浏览器，目前市场上主流的主要有五大浏览器：

1、IE (Edge)  2、Safari   3、Chrome  4、Firefox  5、Opera