html知识

B_Bigstar

已于 2022-08-24 23:54:43 修改

阅读量396

点赞数

文章标签：前端 html html5 面试

于 2022-02-26 14:06:37 首次发布

本文链接：https://blog.csdn.net/B_Bigstar/article/details/123149134

版权

一些概念

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>