H5知识点

今天药忘吃喽~ 2022-05-09 14:14 284阅读 0赞

**1.什么是HTML5**  
HTML5是HTML的最新标准，他的主要没目标是提供全部内容而不需要想flash，silverlight等额外的插件，这些内容来自于视频，动画，富GUI等。

**2.HTML5 为什么只需要写 ？**  
因为HTML5不基于SGML，所以一不需要多DTD（文档类型定义Document Type Definition）进行引用，但是需要DOCTYPE来规范浏览器的行为，而HTML4.01是基于SGML的所以需要对DTD进行引用才能告知浏览器文档所使用的文档类型。

**3.HTML5的页面结构同HTML4或者更前的HTML有什么区别？**  
一个典型的WEB包含头部，脚步，导航，中心区域，侧边栏。如果想要在HTML4中实现用到的基本是div标签，在H5中则不是。  
![在这里插入图片描述][70]  
HTML5中用到的标签：

*  `<header>`：代表头部区域
 *  `<footer>`：代表脚部区域
 *  `<nav>`：页面导航内容
 *  `<article>`：自包含的内容
 *  `<section>`：使用内部article去定义区域或者把分组内容放到区域里
 *  `<aside>`：代表页面的侧边栏内容

**4.HTML5中的datalist是什么？**  
HTML5中的Datalist元素有助于提供文本框自动完成特性。如下图：  
![如图][70 1]  
Datalist代码的使用（切记要和input元素配合使用）

**5.HTML5中有哪些新的表单元素类型？**  
这里有几个重要的新的表单元素在HTML5中被介绍  
显示颜色对话框

1.  Color 如：`<input type="color" name="newel">`其作用是显示颜色对话框并选择颜色。
2.  Date 如：`<input type="date" name="newel">`其作用是显示日历对话框并选择时间。
3.  Datetime-local 如：`<input type="datetime-local" name="newel">`其作用是显示含有本地时间的日历对话框并选择选择时间。
4.  Email 如：`<input type="email" name="newel">`其作用是创建一个含有email校验的HTML文本框。
5.  Url 如：`<input type="url" name="newel">`其作用是创建一个含有url校验的HTML文本框。
6.  Number 如：`<input type="number" name="newel" min="1" max="100">`其作用是展示一个数字范围以供选择。
7.  Range 如：`<input type="range" name="newel" min="1" max="100">`其作用也是展示一个数字范围以供选择，不过显示的是滑条。.

**6.什么是SVG（可缩放矢量图形Scalable Vector Graphics）？**  
SVG（可缩放矢量图形 Scalable Vector Graphics）表示的是可以缩放的矢量图形。它是基于文本的图形语言，使用文本，线条，点等进行图像绘制，这使得它更轻便，显示更加迅速。

例如想使用SVG去展示一段线条，我们可以这么写：

其中：  
x1 属性在 x 轴定义线条的开始  
y1 属性在 y 轴定义线条的开始  
x2 属性在 x 轴定义线条的结束  
y2 属性在 y 轴定义线条的结束

**7.HTML5中canvas是什么？**  
canvas是HTML中可以绘制图形的区域。  
例如想使用canvas去展示一段线条，我们可以这么写：

1.  定义Canvas区域  
    `<canvas id="myCanvas" width="200" height="100"></canvas>`
2.  获取访问canvas上下文区域  
    `var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");`
3.  绘制图形

cxt.moveTo(10,10);
    		cxt.lineTo(150,50);
    		cxt.stroke();

全部代码：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    		对不起，您的浏览器不支持canvas元素！
    		</canvas>
    		
    		<script type="text/javascript">
    		
    		var c=document.getElementById("myCanvas");
    		var cxt=c.getContext("2d");
    		cxt.moveTo(10,10);
    		cxt.lineTo(150,50);
    		cxt.stroke();
    		
    		</script>

**8.Canvas和SVG图形的区别是什么？**

<table> 
 <thead> 
  <tr> 
   <th>SVG</th> 
   <th>Canvas</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>不依赖分辨率</td> 
   <td>依赖分辨率</td> 
  </tr> 
  <tr> 
   <td>支持事件处理器</td> 
   <td>s不支持时间处理器</td> 
  </tr> 
  <tr> 
   <td>最适合带有大型渲染区域的应用程序（如百度地图）</td> 
   <td>较弱的文本渲染能力</td> 
  </tr> 
  <tr> 
   <td>复杂度高会减慢渲染速度</td> 
   <td>能够以.png或.jpg格式保存结果对象</td> 
  </tr> 
  <tr> 
   <td>最适合图像密集型的游戏，其中许多对象会被频繁重绘</td> 
   <td>不适合游戏应用</td> 
  </tr> 
 </tbody> 
</table>

**9.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？他们有哪些特点？**  
行内元素：span,input,img,a,b,select,strong，lable，select,textarea  
块级元素：p,div,h1~h6,form,ul,li,ol,table  
空元素：br,img,input,hr,link,meta  
特点:

*  块元素  
    ①、总是在新行上开始；  
    ②、高度，行高以及外边距和内边距都可控制；  
    ③、宽度缺省是它的容器的100%，除非设定一个宽度。  
    ④、它可以容纳内联元素和其他块元素  
    ⑤、display属性为block  
    \*块级元素的垂直相连外边距margin会合并
 *  行内元素  
    ①、和其他元素在一行上  
    ②、高，行高及内边距外边距不可改变  
    ③、宽度就是它文字或图片的宽度，不可改变  
    ④、内联元素只能容纳文本或者其他内联元素  
    ⑤、display属性为inline  
    水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，，宽度却不行，行内元素设置的外边界只对上下起作用，不对左右起作用。
 *  空元素
 *  没有内容的HTML元素被称为空元素。空元素实在开始标签中关闭的，如`<br/>`

**10.浏览器的内核分别是什么？**  
IE:trident内核  
Firefox：gecko内核  
Safari：webkit内核  
Opera：以前是presto内核，现已改用chrome的Blink内核  
Chrome：Blink内核（基于webkit，Google与Opera Software共同开发）

[70]: /images/20220506/7b182b756c7f449d8241ae1610a731c5.png
[70 1]: /images/20220506/7c61d2d0ab7741ba9e6d1de710caf479.png