HTML5经典面试题

最新推荐文章于 2023-02-06 13:51:31 发布

带着梦想扬帆启航

最新推荐文章于 2023-02-06 13:51:31 发布

阅读量274

点赞数

分类专栏：面试题文章标签： html

本文链接：https://blog.csdn.net/weixin_47873655/article/details/108512260

版权

面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html5经典面试题

1.html5新增标签

布局标签

header section footer article aside nav

<header>头部</header>
<nav>导航栏</nav>
<article>文章</article>
<aside>侧边栏</aside>
<section>主题</section>
<footer>脚部</footer>

表单标签

range:滑块形式，并且可以设置最大值max、最小值min、当前值value，默认范围为1-100，但是并不会显示当前数值

<input type="range" min="1" max="50" value="10">

number：可以点击↑或者↓来选择数字，并且可以设置最大值max以及最小值min

number：可以点击↑或者↓来选择数字，并且可以设置最大值max以及最小值min

多媒体标签

audio(音频) video (视频)

其他标签

progress(进度条) meter (度量器) canvas(绘图标签)

2.html5新增属性

1、contextmenu 指定右键菜单。
2、contentEditable 设置元素是否可以进行内容编辑
3、hidden 隐藏元素
4、draggable 规定元素是否可被拖拽
5、data-* 自定义属性来储存数据
6、placeholder占位属性
7、required 设置为必填属性

 <input type="url" name="blog" id="blog" value="" required="required"/>

8、pattern 设置正则属性

 <input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />请输入a-zA-Z0-9且长度6-16位的字符

9、autofocus 自动聚焦属性让指定的表单元素获得焦点。
10、autocomplete自动填充属性该属性默认打开的

<input type="text" name="username" autocomplete="on/off" />

11、novalidate不验证属性提交表单时不应该验证 form 或 input 域。

<button formnovalidate="formnovalidate" >提交</button>

12、multiple多选属性可选择多个文件

 <input type="file" multiple="multiple"/>

13.minlength(最小长度)
14.maxlength(最大长度)

3.行内元素和块级元素区别

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

4.列举几个行内标签和块级标签

常见行内元素：a，span,i,u,em,sub,sup, strong,
常见的块级元素：div,p,h,ul,li,dl,dt,dd,hr
常见行内块元素：textarea,input,img,button

5.行内元素的maring 和padding 值可以设置吗

行内元素的 padding-top、 padding-bottom、 margin-top、 margin-bottom属性设置是无效的
行内元素的 padding-left、 padding-right、 margin-left、 margin-bottom属性设置是有效的
行内元素的 padding-top、 padding-bottom从显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响

6.简述readyonly 与 disabled 的区别

readyonly

1，只针对input(text/password)和textarea有效，
2，不可编辑，但是是可以复制。(只读)

disabled

1，对于所有的表单元素有效，
2，完全不可编辑，并且是不能复制的。 (禁用)
表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

7.伪元素有哪些

伪元素有六个，分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。其中 ::selection 永远只能以两个冒号开头(因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。)

8.哪些标签存在伪元素

大部分容器标签(大部分双标签)都有伪元素 iframe没有伪元素
大部分单标签都没有伪元素,但是img有伪元素

##　9.伪类和伪元素的区别
他们的区别就是一个本质上是元素，另一个本质上是类。

说说伪元素

伪元素既然带一个“元素”，说明它和 p ，a ，h1 等一样，可以包裹住页面的一部分内容并对其中的内容施加一定的影响。　　我们可以通过样式表给其书写样式
伪元素既然还带一个“伪”，说明它其实在 DOM 树中并不存在，只是逻辑上存在所以我们抽象出来的一个元素而已。

再来说说伪类

一句话概括　　文档树的某个元素上并没有某个类，但是就好像在某种条件下，这个元素上被声明了这个类一样。
例如:hover 我们并没有在 a 元素上声明一个叫 hover 的类，但是当我们把鼠标悬停在 a 元素上时，这个 a 元素上就好像有一个 hover 类，其样式会根据hover样式里书写的那样进行变化

10.伪元素可以用js来操作么

原则上js是不可以操纵伪元素的
但是可以通过window.getComputedStyle() 方法，获取伪元素的CSS样式声明对象,然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

#myId:before {
content: "hello world!";
display: block;
width: 100px;
height: 100px;
background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

修改伪元素样式

1.更换class来实现伪元素属性值的更改：

// CSS代码
.red::before { 
content: "red"; 
color: red; 
}
.green::before { 
content: "green"; 
color: green;
}
// HTML代码
<div class="red">内容内容内容内容</div>
// jQuery代码
$(".red").removeClass('red').addClass('green');

2.使用CSSStyleSheet的insertRule来为伪元素修改样式：

document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE
document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

11.html5 的网页为什么只需要写<! DOCTYOE HTML>?

HTML4.01中的doctype需要对DTD进行引用，因为HTML4.01基于SGML。而HTML5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。其中，SGML是标准通用标记语言，简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的，而HTML5不是的。

12.<!doctype html>放在页面最前面有什么作用？

/声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
/document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。默认值
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了

的怪异模式解析渲染页面。默认值
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了