题库-HTML5、CSS3

Posted on   |   In   |     |   Views

1、CSS3有哪些新特性

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器
多背景
rgba、hlsa
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

2、html5有哪些新特性、移除了那些元素？

如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

拖拽释放(Drag and drop) API
语义化更好的内容标签（header, nav, footer, aside, article, section）
音频、视频 API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术 webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，
还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

1
2
3
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

如何区分：DOCTYPE声明新增的结构元素、功能元素

3、本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别

Cookies: 服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，
服务器不能访问本地存储直到故意通过 POST 或者 GET 的通道发送到服务器；每个域 5MB ；
没有过期数据，它将保留知道用户从浏览器清除或者使用 JavaScript 代码移除

4、如何实现浏览器内多个标签页之间的通信

调用 localstorge、cookies 等本地存储方式

5、如何对网站的文件和资源进行优化

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

6、什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

7、新的 HTML5 文档类型和字符集是？

HTML5文档类型：<!doctype html>
HTML5使用的编码: <meta charset=”UTF-8”>

8、HTML5 Canvas 元素有什么用

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

9、HTML5 存储类型有什么区别

Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API

10、用 H5+CSS3 解决导航栏最后一项掉下来的问题

11、CSS3新增伪类有那些

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

12、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局 如何设计

首先划分成头部、body、脚部；。。。。。
实现效果图是最基本的工作，精确到2px；
与设计师，产品经理的沟通和项目的参与
做好的页面结构，页面重构和用户体验
处理hack，兼容、写出优美的代码格式
针对服务器的优化、拥抱 HTML5。

13、为什么利用多个域名来存储网站资源会更有效

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

14、知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

1
2
3
4
5
6
7
8
9
10
11
/* 一种常见利用伪类清除浮动的代码 */
.clearfix:after {
  content: "."; /* 这里利用到了content属性 */
  display: block; 
  height: 0;
  visibility: hidden; 
  clear: both; 
}
.clearfix { 
  *zoom: 1; 
}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用 clear:both 清除浮动。

知道css计数器（序列数字字符自动递增）吗？如何通过 css content 属性实现 css 计数器？

css计数器是通过设置 counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

15、如何在 HTML5 页面中嵌入音频

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：

1
2
3
4
<audio controls> 
  <source src="jamshed.mp3" type="audio/mpeg"> 
   Your browser does'nt support audio embedding feature. 
</audio>

16、如何在 HTML5 页面中嵌入视频？

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：

1
2
3
4
<video width="450" height="340" controls> 
  <source src="jamshed.mp4" type="video/mp4"> 
   Your browser does'nt support video embedding feature. 
</video>

17、HTML5 引入什么新的表单属性

Datalist
datetime
output
keygen
date
month
week
time
number
range
emailurl

18、描述一段语义的html代码

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等，就是基于语义化设计原则） 

1
2
3
4
<div id="header">
<h1>标题< /h1>
<h2>专注Web前端技术< /h2>
</div>

语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：
段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：
<h1>包含标题，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本缩进。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何样式信息。例如：
不使用 <font> 或<center> 等格式标记。
类或 ID 中不引用颜色或位置。

19、HTML5和CSS3的新标签

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio…
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, border-color, transform…;

感谢您的支持！