前端面试题（含答案）——HTML、CSS相关

HTML相关

1、<!DOCTYPE>标签的定义与用法。

定义和用法

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

以下面这个 <!DOCTYPE> 标签为例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

提示和注释：

注释：<!DOCTYPE> 标签没有结束标签！

HTML

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

HTML Strict DTD

如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">






Frameset DTD


Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">




 


 




XHTML


XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。


XHTML Strict DTD


如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




XHTML Transitional DTD


Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




XHTML Frameset DTD


当您希望使用框架时，请使用此 DTD！




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">




2、块级元素和行内元素都有哪些？


 


      

    1. 块元素(block element)   
      2. 

    2.   
      3. 

    3. 　　* address - 地址   
      4. 

    4. 　　* blockquote - 块引用   
      5. 

    5. 　　* center - 举中对齐块   
      6. 

    6. 　　* dir - 目录列表   
      7. 

    7. 　　* div - 常用块级容易，也是css layout的主要标签   
      8. 

    8. 　　* dl - 定义列表   
      9. 

    9. 　　* fieldset - form控制组   
      10. 

    10. 　　* form - 交互表单   
      11. 

    11. 　　* h1 - 大标题   
      12. 

    12. 　　* h2 - 副标题   
      13. 

    13. 　　* h3 - 3级标题   
      14. 

    14. 　　* h4 - 4级标题   
      15. 

    15. 　　* h5 - 5级标题   
      16. 

    16. 　　* h6 - 6级标题   
      17. 

    17. 　　* hr - 水平分隔线   
      18. 

    18. 　　* isindex - input prompt   
      19. 

    19. 　　* menu - 菜单列表   
      20. 

    20. 　　* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容   
      21. 

    21. 　　* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）   
      22. 

    22. 　　* ol - 排序表单   
      23. 

    23. 　　* p - 段落   
      24. 

    24. 　　* pre - 格式化文本   
      25. 

    25. 　　* table - 表格   
      26. 

    26. 　　* ul - 非排序列表   
      27. 

    27.   
      28. 

    28. 内联元素(inline element)   
      29. 

    29.   
      30. 

    30. 　　* a - 锚点   
      31. 

    31. 　　* abbr - 缩写   
      32. 

    32. 　　* acronym - 首字   
      33. 

    33. 　　* b - 粗体(不推荐)   
      34. 

    34. 　　* bdo - bidi override   
      35. 

    35. 　　* big - 大字体   
      36. 

    36. 　　* br - 换行   
      37. 

    37. 　　* cite - 引用   
      38. 

    38. 　　* code - 计算机代码(在引用源码的时候需要)   
      39. 

    39. 　　* dfn - 定义字段   
      40. 

    40. 　　* em - 强调   
      41. 

    41. 　　* font - 字体设定(不推荐)   
      42. 

    42. 　　* i - 斜体   
      43. 

    43. 　　* img - 图片   
      44. 

    44. 　　* input - 输入框   
      45. 

    45. 　　* kbd - 定义键盘文本   
      46. 

    46. 　　* label - 表格标签   
      47. 

    47. 　　* q - 短引用   
      48. 

    48. 　　* s - 中划线(不推荐)   
      49. 

    49. 　　* samp - 定义范例计算机代码   
      50. 

    50. 　　* select - 项目选择   
      51. 

    51. 　　* small - 小字体文本   
      52. 

    52. 　　* span - 常用内联容器，定义文本内区块   
      53. 

    53. 　　* strike - 中划线   
      54. 

    54. 　　* strong - 粗体强调   
      55. 

    55. 　　* sub - 下标   
      56. 

    56. 　　* sup - 上标   
      57. 

    57. 　　* textarea - 多行文本输入框   
      58. 

    58. 　　* tt - 电传文本   
      59. 

    59. 　　* u - 下划线   
      60. 

    60. 　　* var - 定义变量   
      61. 

    61.   
      62. 

    62. 可变元素   
      63. 

    63.   
      64. 

    64. 　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。   
      65. 

    65. 　　* applet - java applet   
      66. 

    66. 　　* button - 按钮   
      67. 

    67. 　　* del - 删除文本   
      68. 

    68. 　　* iframe - inline frame   
      69. 

    69. 　　* ins - 插入的文本   
      70. 

    70. 　　* map - 图片区块(map)   
      71. 

    71. 　　* object - object对象   
      72. 

    72. 　　* script - 客户端脚本  
      73. 





3、你真的了解HTML吗？！


这道题自主把握


 


CSS相关


1、介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。


“_”开头的CSS只有IE6可以识别；"*"开头的IE6、IE7都可以识别；"+"开头的只有IE7可以识别;在css样式最后加“\0”只有IE8可以识别;“\9”的样式只要是IE都可以识别；!important可以被IE7、FF识别（IE6识别不能）不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。


2、介绍CSS盒模型。


我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。


3、CSS层叠是什么？介绍一下。


样式表的顺序：


1，浏览器默认（browser default）（优先级最低）


2，外部样式表（external style sheet）


3，内部样式表（internal style sheet）


4，内嵌样式表 (inline style )（优先级最高）


4、都知道哪些CSS浏览器兼容性问题。


div的垂直居中问题、margin加倍的问题、浮动ie产生的双倍距离、IE与宽度和高度的问题、DIV浮动IE文本产生3象素的bug、IE6下为什么图片下有空隙产生


5、position值都有哪些


position的值有：relative、absolute、fixed、static、inherit


6、CSS3新增了哪些内容


text-shadown:


box-shadown:


linear-gradient:


radial-gradient:


RGBA(alpha)


border-radius:


transform(变形)


transition(一定时间平滑过渡)




animation(动画)


 


 






            

            
posted @ 
2012-11-08 15:23 
KEVIN_葉 
阅读(1631) 
评论(0) 
编辑 
收藏 
举报