一些概念
html5 有哪些新特性
个人认为,一些常见的html面试题,其实都是这些新特性延展出来的,例如html语义化就是新特性之一,总结下 html5 的10个新特性:
- 语义标签
- 增强型表单
- 音视频
- canva 绘图
- svg 绘图
- 地理位置
- 拖放api
- WebWorker
- WebSrorage
- WebSocket
这10个新特性我这里不一一展开,这里只展开我自己学习过程中或者写项目时有用到的,也就是下面这些题,其他的可以参考下面这篇文章了解下。
参考:https://www.cnblogs.com/jane-panyiyun/p/13092297.html
讲讲 html 语义化标签
什么是语义化:
一句话解释:语义化标签是一种写 html 标签的方法论
通俗的解释:就是你看到你看到一个不认识的标签,你可以直接通过这个标签名大致推测出它是干嘛的,例如video标签,顾名思义就是用来定义视频的。
怎么做到语义化:
用正确的标签做正确的事情,例如标题就用标题标签写(h1 - h6),段落就用 p 标签、音视频就用音视频标签等。。
语义化的优缺点:
优点:
- 让页面的内容结构化,便于对浏览器、搜索引擎解析(此处可适当扩展 SEO 知识)
- 便于开发者维护,这些语义化标签也充当了注释的作用了吧,阅读起来比较巴适
缺点:感觉没有吧。。啊 可能对于英语重度恐惧者来讲是种灾难,可能本来只需要记住一个div标签就可以了,现在要记住辣么多单词(没错是我。。)
举例语义化标签
如下面这题所列举的新标签,就是语义化标签。
html5 有哪些新标签?
新多媒体元素:
<audio> 定义音频内容
<video> 定义视频
<source> 定义多媒体资源
<embed> 定义嵌入的内容,比如插件
<track> 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道
绘制图形:
<canvas> 标签定义图形,比如图表和其他图像,该标签基于JavaScript的绘图API
新表单元素:
<datalist> 定义选项列表,与input元素配合,来定义input可能的值
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义不同类型的输出,比如脚本的输出
新的语义和结构元素
<header> 定义文档的头部区域(页眉)
<footer> 定义 section 或 document 的页脚
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<section> 定义文档中的节(section、区段)
<nav> 定义导航链接的部分
<time> 定义日期或时间
建议此题只讲一些自己熟悉的,用过的新标签,因为面试官极有可能会根据你的答案往下问,
例如下面这俩延展题:
video 与 audio 标签都有哪些属性?
video
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放 |
muted | muted | 如果出现该属性,视频的音频输出为静音 |
poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮 |
preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性 |
src | URL | 要播放的视频的 URL |
width | pixels | 设置视频播放器的宽度 |
audio
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
controls | controls | 如果出该属性,则向用户显示音频控件(比如播放/暂停按钮) |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 如果出现该属性,则音频输出为静音 |
preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载 |
src | URL | 规定音频文件的 URL |
参考:https://www.runoob.com/html/html5-new-element.html
Canvas 与 SVG 标签有什么区别?
- SVG适用于描述XML中的2D图形的语言
- Canvas随时随地绘制2D图形(使用javaScript)
- SVG是基于XML的,意味这可以操作DOM,渲染速度较慢
- 在SVG中每个形状都被当做是一个对象,如果SVG发生改变,页面就会发生重绘
- Canvas是一像素一像素地渲染,如果改变某一个位置,整个画布会重绘。
Canvas | SVG |
---|---|
依赖分辨率 | 不依赖分辨率 |
不支持事件处理器 | 支持事件处理器 |
能够以.png或.jpg格式保存结果图像 | 复杂度会减慢搞渲染速度 |
文字呈现功能比较简单 | 适合大型渲染区域的应用程序 |
最合适图像密集的游戏 | 不适合游戏应用 |
(个人没用过不晓得,此答案出处:https://www.cnblogs.com/jane-panyiyun/p/13092297.html)
元素性质
这一块我之前一直记不下来,直到我去详细了解了它们特点,感觉一下子就记住了:
块级元素: 元素里还能再包含其他元素的,例如 div(容纳百川);ul 可以容纳 li,所以它肯定是个块元素,还有 li 里头也经常容纳 a,所以 li 也是个块级元素;
行内元素: 这种元素不能再包含其他元素,例如 a, br,span,之类的,它们就包含不了其他元素了;
行内块元素: 同时具有前两者的特点的就是行内块元素,例如 button,img,input即能记在一行内又能设置宽高。
块级元素(块状元素、行外元素)
元素属性:display:block
特点:
- 每个元素独占一行
- 不设置宽高的情况下,继承父级元素的宽高参数
- 海纳百川,可以内嵌行内元素和块状元素
常见的块状元素:
<div> <h1>(系列) <p> <ul> <li> <ol> <table> <dl> <dt> <dd>
行内元素(内联元素、行间元素、内嵌元素)
元素属性:display:inline
特点:
- 一行可以占据很多个行内元素
- 宽高是由元素内容大小决定的,无法设置,但是可以通过line-height来调整行高
- 无法设置上下内外边距
- 容不下其他元素了
常见的行内元素:
<a> <span> <br> <strong>
行内块元素(内联块状元素)
属性:display:inline-block
特点:
- 具有前两者的特点
- 既可以在同一行内,又可以设置宽高边距啥的
常见的行内块元素:
<button> <textarea> <input> <img>
会写但你知道为什么吗
html5 DOCTYPE 声明
不懂会不会考这种手写声明的,在写 html 的时候,其实很多时候都是用 vscode 的快捷键一件生成的,但也要知道为什么在写 html 的时候要这样子声明,每行的意义,没有写会怎样之类的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>