关于HTML的面试题-html5/css3篇

  • 1. html5 新增标签有哪些（或者新增的语义标签）？
  • 2. HTML5 中有哪些新特性？
  • 3. 视频有哪几种格式？这几种格式有什么区别？
  • 4. 写出你知道的层级选择符（结构性伪类选择器）
  • 5. 什么是渐进增强、优雅降级？
  • 6. opacity 与 rgba 的区别
  • 7. 画出标准盒模型和怪异盒模型，并写出他们的宽。
  • 8. 单词换行
  • 9. 弹性盒的居中方式怎么写？
  • 10. 怎么解决chrome浏览器不能显示字体大小小于12px？

1. html5 新增标签有哪些（或者新增的语义标签）？

（1）<header> 头标签；
（2）<nav> 导航标签；
（3）<section> 表示文档的结构、栏目；
（4）<footer> 页脚；
（5）<article> 文章标签；
（6）<aside> 侧边栏导航；
（7）<mark> 凸显文字；
（8）<figure> 用来表示网页上一块独立的内容。；
（9）<figcaption> 用来表示figure的标题，作为第一个或最后一个元素；
（10）<output> 显示表单元素结果；


2. HTML5 中有哪些新特性？

（1）用于绘画的 canvas 元素；
（2）用于媒介回放的 video 和 audio 元素；
（3）对本地离线存储的更好的支持；
（4）新的特殊内容元素，比如 article、footer、header、nav、section；
（5）新的表单控件，比如 calendar、date、time、email、url、search；


3. 视频有哪几种格式？这几种格式有什么区别？

张鑫旭-让所有浏览器支持HTML5 video视频标签
.mp4、.ogg 、.webM
主要区别是bai清晰度与容量大小du的问题，清晰度zhi分为普通的与dao高清的。一般越高清那视频容量越大，占空间越大。


4. 写出你知道的层级选择符（结构性伪类选择器）

（1）:root{}，选择根目录；
:root{background:#ff0} ，相当于给 html 标签设置样式；
（2）:not(元素A){}，给 除了元素A 以外的所有元素设置样式；
例如：body :not(p){background:#000}，给除了 元素p 以外的其他所有元素设置样式。
（3）元素B:empty{}，选择 元素B内容为空 的元素设置样式（换行和空格不算内容为空）；
（4）:target{}，给 被锚点选中的元素 设置样式（锚点切换时有坑，常用 js 去做，而不用伪类）；
（5）元素A:first-child{}，选择第一个（子）元素；元素A作为第一个子元素；
（6）元素B:last-child{}，选择最后一个（子）元素；
（7）元素C:nth-child(n){}，n 为数字，选择第n个（子）元素（n 从 1 开始）；元素C并且该元素作为第n个子元素；
（8）元素D:nth-last-child(n){}，n 为数字，选择倒数第n 个（子）元素；
（9）元素E:nth-child(odd){}，选择奇数个（子）元素（从第 1 个开始）；
（10）元素F:nth-child(even){}，选择偶数个（子）元素（从第 2 个开始）；
（11）元素G:nth-of-type(2){}，有关这个元素的第二个（子）元素；
（12）元素H:nth-last-of-type(2){}，有关这个元素的倒数第二个（子）元素；
（13）元素I:only-child{}，只有 I元素 是唯一一个个（子）元素才有效；
（14）元素A:nth-child(n+2){}，匹配从第二个元素开始（包括2）；
（15）元素B:nth-child(2n){}，匹配偶数；
（16）元素B:nth-child(2n+1){}，匹配奇数；


5. 什么是渐进增强、优雅降级？

（1）渐进增强： 一开始就针对低版本浏览器进行构建页面到高版本的变化；

渐进增强（progressive enhancement）： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

<!-- 渐进增强写法 -->
<style>
.transition{-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;  
}
</style>

（2）优雅降级： 一开始就构建网站针对高版本向低版本进行兼容；

优雅降级（graceful degradation）： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

<!-- 优雅降级写法 -->
<style>
.transition{ transition: all .5s;-o-transition: all .5s;　-moz-transition: all .5s;-webkit-transition: all .5s;
}
</style>

（3）渐进增强和优雅降级的区别

  • ① 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
  • ② 渐进增强的适用场景：渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。
  • ③ 优雅降级的适用场景：优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。
    在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

6. opacity 与 rgba 的区别：

有 opacity 属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性。

名称opacityrgba
区别：有 opacity 属性的所有后代元素都会继承 opacity 属性而RGBA后代元素不会继承不透明属性。

7. 画出标准盒模型和怪异盒模型，并写出他们的宽。

css 中盒子模型分为两种： w3c 标准（标准盒模型） 和 IE标准盒子模型（怪异盒模型）；
通过 box-sizing: content-box（默认，标准盒模型）/border-box（怪异盒模型）; 来转换。

  • 大多数浏览器在采用 w3c 标准模型，而 IE 中采用 Microsoft 自己的标准；
  • 怪异模型是“部分浏览器在支持 w3c 标准的同时还保留了原来的解析模式”，怪异模式主要表现在 IE 内核的浏览器。
  • 当没有 doctype 时（即没有<!DOCTYPE html>声明时），IE6 会触发怪异模式；。

（1）在标准模式下，一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)；
在这里插入图片描述

（2）在IE盒子模型下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）；

在这里插入图片描述
（3）示例：给 div标签 和 p标签 设置一样的宽高，但是 div标签 有 border、padding 值。
在这里插入图片描述


8. 单词换行

（1）word-bread:

  • nomal，默认；
  • keep-all，只能在半角空格或连接字符处换行；
  • bread-all;，宽度不够，分割单词换行；

（2）word-wrap:

  • normal，默认；
  • break-word;，宽度不够，整个单词换行；

9. 弹性盒的居中方式怎么写？

<style>ul{display:flex; justify-content:center; align-items: center;}/*align-self: center;设置在子元素上，让子元素单独布局*/
</style>

10. 怎么解决chrome浏览器不能显示字体大小小于12px？

答案来源
无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持，在谷歌chrome浏览器不支持解决方法。

针对低版本chrome谷歌浏览器设置一个校准字体大小样式：-webkit-text-size-adjust:none。
（1）方法一：直接给 body 设置。

<style>body{-webkit-text-size-adjust:none} 
</style>

（2）方法二：在设置小于12px的选择器对象里设置一个-webkit-text-size-adjust:none样式：

<style>.abc{font-size:7px;-webkit-text-size-adjust:none} 
</style>

高版本chrome谷歌浏览器不再支持小于12px的字体：
高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式也就是不在支持小于12px以下字体，所以要使用时候慎用。为了兼容各大浏览器最好最小文字字体大小设置12px及12px以上。

DIVCSS5建议：

1、用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
2、使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。
3、继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。
4、使用12px以上字体：为了兼容、为了代码更简单 从新考虑权重下兼容性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362518.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch的用例：灵活的查询缓存

Elasticsearch的用例：灵活的查询缓存

在前两篇有关Elasticsearch用例的文章中&#xff0c;我们已经看到Elasticsearch 可用于存储甚至大量文档 &#xff0c;并且我们可以通过Query DSL使用Lucene的全文功能访问那些 文档 。 在这篇较短的文章中&#xff0c;我们将把两个用例放在一起&#xff0c;以了解读取繁重的应…
阅读更多...
Vue底层架构及其应用（上）转

Vue底层架构及其应用（上）转

https://mp.weixin.qq.com/s?__bizMzIzNjcwNzA2Mw&mid2247486427&idx1&sn61f9579bbe1dfe26da4b53eb538fee13&chksme8d28643dfa50f557c56ce8b5bc9b0597a157a20791e21b1812fe2a30ff4cf2c813608473b43&mpshare1&scene23&srcid#rd 一、前言 市面上有很…
阅读更多...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画

jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画

目前 jQuery 兼容于所有主流浏览器, 包括 IE 6&#xff01;开发时常用 jquery.js&#xff0c;上线用 jquery.min.js。 jq插件 目前jQuery有三个大版本&#xff1a; &#xff08;1&#xff09;1.x.x: 兼容ie6,7,8&#xff0c;使用最为广泛&#xff0c;官网只做BUG维护&#xff…
阅读更多...
jquery简介 each遍历 prop attr

jquery简介 each遍历 prop attr

一、JQ简介 jQuery是一个快速、简洁的JavaScript框架&#xff0c;它封装了JavaScript常用的功能代码&#xff0c;提供一种简便的JavaScript设计模式&#xff0c;优化HTML文档操作、事件处理、动画设计和Ajax交互。 装载的先后次序&#xff1a;　　jQuery封装库在上&#xff0…
阅读更多...
如何让Visitor变得可爱1

如何让Visitor变得可爱1

本文转自&#xff1a;http://www.cnblogs.com/idior/archive/2005/01/19/94280.html 在wayfarer的文章中提到了如何利用visitor模式实现添加新的功能。如他所说&#xff0c;在实际过程中显的不是那么可爱。不过他为我们提供了一个可行的解决方案&#xff0c;本文将在此基础上使…
阅读更多...
EJB 3.x：生命周期和并发模型（第1部分）

EJB 3.x：生命周期和并发模型（第1部分）

Java EE组件生命周期和与并发相关的详细信息对于经验丰富的专业人员而言可能不是新知识&#xff0c;但是对于初学者而言&#xff0c;这可能需要花费一些时间。 就EJB而言&#xff0c;了解其生命周期 &#xff08;以及相关的并发场景&#xff09;对于确保使用EJB的正确用法和解…
阅读更多...
单独使用 laydate 日期时间组件

单独使用 laydate 日期时间组件

layui 日期和时间组件官方文档 需要注意几点&#xff1a; 下载压缩包后&#xff0c;复制整个 laydate 文件夹放到项目中&#xff0c;里面的文件不要改动位置&#xff0c;否则会报错&#xff1b;在移动端使用时&#xff0c;要给 input 添加 readonly 属性&#xff0c;否则点击…
阅读更多...
从零开始学习SVG

从零开始学习SVG

1 什么是SVG&#xff1f; MDN中的定义是&#xff1a;SVG即可缩放矢量图形&#xff08;Scalable Vector Graphics&#xff0c;SVG)&#xff0c;是一种用来描述二维矢量图形的 XML 标记语言。 简单地说&#xff0c;SVG 面向图形&#xff0c;HTML 面向文本。SVG 与 Flash 类似&am…
阅读更多...
layui 关于layDate设置时间限制问题

layui 关于layDate设置时间限制问题

前面是尝试结果&#xff0c;有兴趣的可以康康&#xff0c;赶时间的可以直接翻到底下 ----->直达车 因为只有一个页面&#xff0c;没什么标准&#xff0c;所以自己就使用了layui的时间控件&#xff0c;并且作为独立组件。 第一次尝试 - 使用 min 一开始只想让结束时间有个…
阅读更多...
QQ聊天记录快速迁移

QQ聊天记录快速迁移

QQ聊天记录快速迁移 在工作中大家经常会用到QQ来沟通&#xff0c;但是很多时候在其它设备上登录QQ就无法查看到之前的聊天记录和图片&#xff0c;这是因为电脑上的QQ聊天记录一般都是保存在电脑本地硬盘里&#xff0c;所以我们在换设备登录QQ后&#xff0c;是无法查看到之前电脑…
阅读更多...
Hawtio和Jolokia的休眠统计

Hawtio和Jolokia的休眠统计

企业Java的很大一部分处理数据。 在企业设置中使用数据的所有不同方式中&#xff0c;仍然存在使用任何种类的O / R映射的行之有效且广泛教授的方法。 JPA标准使每个人都可以轻松使用它&#xff0c;并且它也应该是可移植的。 但是&#xff0c;我们不要谈论迁移细节。 O / R映射的…
阅读更多...
laydate 时间控件去掉秒以及解决在移动端不能滑动的问题

laydate 时间控件去掉秒以及解决在移动端不能滑动的问题

一、时间控件去掉秒&#xff0c;保留时分 二、时间控件在移动端不能滚动 一、时间控件去掉秒&#xff0c;保留时分 方法一&#xff1a;使用 ready 回调函数 ready 控件在打开时触发。打开控件时让秒消失。 <script> laydate.render({elem: #endTime, //指定元素trigg…
阅读更多...
Entity Framework Code First属性映射约定 转载https://www.cnblogs.com/libingql/p/3352058.html

Entity Framework Code First属性映射约定 转载https://www.cnblogs.com/libingql/p/3352058.html

Entity Framework Code First属性映射约定 Entity Framework Code First与数据表之间的映射方式有两种实现&#xff1a;Data Annotation和Fluent API。本文中采用创建Product类为例来说明tity Framework Code First属性映射约定的具体方式。 1. 表名及所有者 在默认约定的情况下…
阅读更多...
layui 时间控件二次渲染，点击一个自定义按钮清空/重置时间控件

layui 时间控件二次渲染，点击一个自定义按钮清空/重置时间控件

标题小标题一、错误尝试二、时间控件二次渲染的3种方法2.1 直接删除原来绑定时间控件的DOM&#xff0c;再重新渲染&#xff08;推荐&#xff09;&#xff1b;2.2 使用 clone() &#xff0c;并且改变 lay-key&#xff1b;2.3 使用 clone() &#xff0c;并且删除 lay-key&#xf…
阅读更多...
2019年春第二次课程设计实验报告

2019年春第二次课程设计实验报告

一、试验项目名 贪吃蛇 二、试验功能介绍 通过数组构造小蛇&#xff0c;在通过数组中的变化控制小蛇移动和变长。 三、项目模块结构介绍 构造小蛇 小蛇移动 移动中碰到边框或自己失败 小蛇长大 四、实现界面展示 五、代码托管链接https://gitee.com/t001023/software_class_1_t…
阅读更多...
Elasticsearch用例：全文搜索

Elasticsearch用例：全文搜索

在本系列有关Elasticsearch用例的最后一篇文章中&#xff0c;我们介绍了Elasticsearch提供的用于存储甚至大量文档的功能 。 在这篇文章中&#xff0c;我们将研究其另一个核心功能&#xff1a;搜索。 我正在利用上一篇文章中的某些信息&#xff0c;因此&#xff0c;如果您还没有…
阅读更多...
使用echarts时，鼠标首次移入屏幕会闪动，屏幕会出现滚动条

使用echarts时，鼠标首次移入屏幕会闪动，屏幕会出现滚动条

当我刷新&#xff0c;鼠标经过图表时&#xff0c;页面会出现滚动条 原因&#xff1a; 在echarts图表中出现 tooltip 时&#xff0c;画布的父标签&#xff08;即&#xff1a;echarts.init()的标签&#xff09;的宽高有时会发生变化&#xff0c;导致相对布局的div可能大小发生…
阅读更多...
移动端 flexible.js 布局详解

移动端 flexible.js 布局详解

原本想直接引入原文链接&#xff0c;但是又担心作者哪天想不开注销账号&#xff0c;这么好的一篇文章看不到了&#xff0c;还是转载一下吧(/ω&#xff3c;)。 另外推荐一篇好文&#xff1a;移动端rem自适应实操讲解 本文讲的通过 flexible.js 实现了rem自适应&#xff0c;有了…
阅读更多...
Gradle善良：获得更多的依赖性见解

Gradle善良：获得更多的依赖性见解

在我们的大多数项目中&#xff0c;我们都依赖于其他代码&#xff0c;例如库或其他项目。 Gradle有一个不错的DSL来定义依赖关系。 依赖性在依赖性配置中分组。 这些配置可以自己创建&#xff0c;也可以通过插件添加。 一旦定义了依赖项&#xff0c;我们就可以通过dependencies任…
阅读更多...
js css模仿打字效果

js css模仿打字效果

1.效果 2.源码 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><style type"text/css">#myDiv{display: inline-block;width:500px;height:300px;background-color:rgba(0,0,0,0.3);colo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023