武汉理工大学新媒体设计技术问答题

1. HTML源文件中的换行、空格以及引号在显示效果中是无效的，如何表示？

<br/>   换行
&nbsp; 空格
&apos; 是单引号的转义符
&quot; 是双引号的转义符

2. 什么Web标准？前端页面有哪三层构成，分别是什么，作用是什么？

WEB标准是一系列标准的集合。
结构层，表现层，行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

3. web标准网站有那些优点？

文件下载与页面显示速度更快、内容能被更多的用户和设备所访问、（2 more）
更少的代码和组件，带宽要求降低（代码更简洁），容易维护、成本降低。（4 low）

4. 如何理解表现与内容相分离？

结构是由文档中的主体部分，再加上语义化、结构化的标记。
表现是你赋予内容的一种样式。　
理论上讲，用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。

5. 什么是网站重构，目的是什么？

网站重构理应包含 结构、行为、表现 三层次的分离以及优化，
行内分工优化，以及以技术与数据、人文为主导的交互优化等。
目的构建一个前端 灵活的类MVC框架

6. div+css的布局较table布局有什么优点？

代码少，页面文件小，
下载快，布局灵活，
网页有小的改动不影响搜索引擎收录

7. 如何将多个元素设置为同一行?

将div的css样式设定为浮动方式：float:left;
或者是设定为inline-block行内块元素

8. CSS标签选择器、类选择器和ID选择器的区别？

id是唯一的，class是定义相同类型的
id选择器通常用来表示传递给后台的参数
class选择器通常用于前端样式的选择。

9. 块级元素和行内元素都有哪些？

块级元素：块级大多为结构性标记

  <address>...</adderss>   
  <center>...</center>  地址文字
  <h1>...</h1>  标题一级
  <h2>...</h2>  标题二级
  <h3>...</h3>  标题三级
  <h4>...</h4>  标题四级
  <h5>...</h5>  标题五级
  <h6>...</h6>  标题六级
  <hr>  水平分割线
  <p>...</p>  段落
  <pre>...</pre>  预格式化
  <blockquote>...</blockquote>  段落缩进   前后5个字符
  <marquee>...</marquee>  滚动文本
  <ul>...</ul>  无序列表
  <ol>...</ol>  有序列表
  <dl>...</dl>  定义列表
  <table>...</table>  表格
  <form>...</form>  表单
  <div>...</div>

行内元素：行内大多为描述性标记

  <span>...</span>
  <a>...</a>  链接
  <br>  换行
  <b>...</b>  加粗
  <strong>...</strong>  加粗
  <img >  图片
  <sup>...</sup>  上标
  <sub>...</sub>  下标
  <i>...</i>  斜体
  <em>...</em>  斜体
  <del>...</del>  删除线
  <u>...</u>  下划线
  <input>...</input>  文本框
  <textarea>...</textarea>  多行文本
  <select>...</select>  下拉列表

10. 如何实现内联标签向块级标签的转换？

行内标签转换为块级标签：
display:block;

11. 解释下浮动和它的工作原理？清除浮动的技巧？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
给父元素添加clearfix样式，使用after伪类，设置overflow为hidden或者auto

12. position的属性值有哪些？绝对定位和相对定位的区别？

absolute绝对定位，fixed 固定定位，relative相对定位，static

13. 怎样理解CSS盒模型？

CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。
每个框都有三个属性：
border:元素的边框 margin：外边距， padding:内边距

14. CSS中margin和padding的区别

元素周围生成额外的空白区。
边框离内容正文的距离，

15. 什么是HTML5？为什么说H5是未来互联网技术发展的趋势？

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
H5成本低，支持动画视频、开放了函数功能提高效率、帮助用户开发自己的窗口小部件

16. Html5的页面结构和Html4或者更前的Html有什么区别？

1、文档声明区别
HTML：超文本标记语言，一种纯文本类型的语言。
HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。
2、结构语义区别
html：没有体现结构语义化的标签，如：<div id="nav"></div>
html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...
3、绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。

17. H5中的本地存储的概念是什么？本地存储的生命周期是什么？

localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。
sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失。

18. HTML5 引入什么新的表单属性？

autocomplete novalidate

19. canvas元素的作用？

描绘出图形，比如画圆，扇形，折线图等，

20. CSS3有哪些新特性？

新的选择器、文字及块阴影、多背景图、颜色渐变、圆角等。
各种动画效果，如：旋转、移动、缩放等，还包括图标字体的应用。

21. 描述一下css3的animation和transition各自的特点？

transition：强调过渡；需要触发一个事件才会随着时间改变其CSS属性；
animation：多个关键帧，实现自由动画；
不需要触发任何事件，也可随时间变化达到一种动画效果
与transition不同是animation可以通过@keyframe控制当前帧属性，更灵活。

22. HTML、XHTML、XML的区别？

HTML是超文本标记语言，是一种基本的WEB网页设计语言，HTML是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。

XHTML是可扩展超文本标记语言。
XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

XML是可扩展标记语言，它与HTML一样，都是处于SGML，标准通用语言。
Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。

23. Cookie/localStorage/sessionStorage的区别？

Cookie：
本地 cookie 可以跨浏览器使用，可以设置有效期，可以跨标签使用。参与通信

localStorage
用来永久保存数据
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage
只用来单页面存储数据
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

武汉理工大学 新媒体设计技术 问答题