HTML八股文
HTML八股文
你别睡这么晚html
1.1 html标签的类型(head, body,!Doctype) 他们的作用是什么
参考答案:
!DOCTYPE 标签:
- 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.
head:
- 是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
- 该标签下所包含的部分可加入的标签有,,,,和
body :
- 用于定义文档的主体, 包含了文档的所有内容
- 该标签支持 html 的全局属性和事件属性.
1.2 h5新特性
参考答案:
- 新增选择器 document.querySelector、document.querySelectorAll
- 拖拽释放(Drag and drop) API
- 媒体播放的 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 离线应用 manifest
- 桌面通知 Notifications
- 语意化标签 article、footer、header、nav、section
- 增强表单控件 calendar、date、time、email、url、search
- 地理位置 Geolocation
- 多任务 webworker
- 全双工通信协议 websocket
- 历史管理 history
- 跨域资源共享(CORS) Access-Control-Allow-Origin
- 页面可见性改变事件 visibilitychange
- 跨窗口通信 PostMessage
- Form Data 对象
- 绘画 canvas
H5移除的元素:
- 纯表现的元素:basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素:frame、frameset、noframes
1.3 伪类和伪元素
参考答案:
伪类:用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。
例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为 已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。
伪元素:用于创建一些不在DOM树中的元素,并为其添加样式。
例如,我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见 这些文本,但是它实际上并不在DOM文档中。
1.4 html5语义化
参考答案:
在HTML5出来之前,我们习惯于用div来表示页面的章节或者不同模块,但是div本身是没有语义的。但是现在,HTML5中加入了一些语义化标签,来更清晰的表达文档结构。
标签:
1 | <title> <!--:页面主体内容。--> |
扩展:
语义化优点:
- 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便屏幕阅读器解析,如盲人阅读器根据语义渲染网页
- 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
1.5 audio 标签的api
参考答案:
audio常用属性
属性 | 属性值 | 注释 |
---|---|---|
src | url | 播放的音乐的url地址(火狐只支持ogg的音乐,而IE9只支持MP3格式的音乐。chrome貌似全支持) |
preload | preload | 预加载(在页面被加载时进行加载或者说缓冲音频),如果使用了autoplay的话那么该属性失效。 |
loop | loop | 循环播放 |
controls | controls | 是否显示默认控制条(控制按钮) |
autoplay | autoplay | 自动播放 |
audio音乐格式的支持
音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
---|---|---|---|---|---|
OGG | √ | √ | √ | × | × |
MP3 | √ | × | √ | × | √ |
WAV | × | √ | × | √ | × |
audio属性
属性 | 注释 |
---|---|
duration | 获取媒体文件的总时长,以s为单位,如果无法获取,返回NaN |
paused | 如果媒体文件被暂停,那么paused属性返回true,反之则返回false |
ended | 如果媒体文件播放完毕返回true |
muted | 用来获取或设置静音状态。值为boolean |
volume | 控制音量的属性值为0-1;0为音量最小,1为音量最大 |
startTime | 返回起始播放时间 |
error | 返回错误代码,为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码: 1.用户终止 2.网络错误 3.解码错误 4.URL无效 |
currentTime | 用来获取或控制当前播放的时间,单位为s。 |
currentSrc | 以字符串形式返回正在播放或已加载的文件 |
常用的控制用的函数:
函数 | 作用 |
---|---|
load() | 加载音频、视频软件 |
play() | 加载并播放音频、视频文件或重新播放暂停的的音频、视频 |
pause() | 暂停出于播放状态的音频、视频文件 |
canPlayType(obj) | 测试是否支持给定的Mini类型的文件 |
常用audio的事件:
事件名称 | 事件作用 |
---|---|
loadstart | 客户端开始请求数据 |
progress | 客户端正在请求数据(或者说正在缓冲) |
play | play()和autoplay播放时 |
pause | pause()方法促发时 |
ended | 当前播放结束 |
timeupdate | 当前播放时间发生改变的时候。播放中常用的时间处理哦 |
canplaythrough | 歌曲已经载入完全完成 |
canplay | 缓冲至目前可播放状态。 |