HTML5面试题（无废话版）

工位主理人
22 阅读4分钟

一、html 语义化

用正确的标签做正确的事情,增强了可读性，结构更加清晰,便于团队的开发与维护。 常见的语义化标签:

<header></header>  //头部

<nav></nav> //导航栏

<section></section> //区块（有语义化的div）

<main></main> //主要区域

<article></article> //主要内容

<aside></aside> //侧边栏

<footer></footer> //底部

二、html5的新特性

1.媒体标签

（1）音频标签

<audio src=''controls autoplay loop='true'></audio>
-   controls 控制面板
-   autoplay 自动播放
-   loop=‘true’ 循环播放

（2）视频标签

video src=' ' poster='imgs/aa.jpg' controls></video>

poster：封面。默认显示当前视频文件的第一帧画面，当然通过poster也可以自己指定。

2.表单

（1）表单类型：

  • email ：能够验证当前输入的邮箱地址是否合法
  • url ： 验证URL
  • number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
  • search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
  • range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
  • color ： 提供了一个颜色拾取器
  • time ： 时分秒
  • data ： 日期选择年月日
  • datatime ： 时间和日期(目前只有Safari支持)
  • datatime-local ：日期时间控件
  • week ：周控件
  • month：月控件

（2）表单属性：

  • placeholder ：提示信息
  • autofocus ：自动获取焦点
  • autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
  • 表单必须提交过
  • 必须有name属性。
  • required：要求输入框不能为空，必须有值才能够提交。
  • pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
  • multiple：可以选择多个文件或者多个邮箱
  • form=" form表单的ID"

（3）表单事件：

  • oninput 每当input里的输入框内容发生变化都会触发此事件。
  • oninvalid 当验证不通过时触发此事件。

3.进度条、度量器

  • progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少

  • meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）

    • high/low：规定被视作高/低的范围
    • max/min：规定最大/小值
    • value：规定当前度量值

设置规则：min < low < high < max

4.canvas和svg

(1)Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

(2)svg可缩放矢量图形基于可扩展标记语言XML描述的2D图形的语言，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

5.Web存储

三、行内元素和块级元素

行内元素：a b span img input select strong button；

  • 设置宽，高无效，高度可以通过line-height设置
  • 内、外边距只有左右有效，上下无效

块级元素：div ul ol li dl dt dd h1~6 p table form；

  • 每个块级元素独占一行，默认从上到下排列
  • 宽度缺少时是它的容器的100%，除非设置一个宽度
  • 高度、行高以及外边距和内边距都是可以设置的
  • 块级元素可以容纳其它行级元素和块级元素

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

  • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
  • 可以通过display属性对行内元素和块级元素进行切换

四、常见的meta标签

适配移动端

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

content 参数有以下几种：

  • width viewport ：宽度(数值/device-width)
  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）

2.charset，用来描述HTML文档的编码类型

3.keywords，页面关键词

4.description，页面描述

avatar
文章
阅读
粉丝