一些HTML的知识点（面试题）第一弹

1.1 HTML和XHTMl有什么不同？

答：HTML，超文本标签语言，用于创建网页的标准语言。

       XHTML是基于XML的标签语言，可以认为是XML版本的HTML，语法上更严谨：元素必须关闭、标签必须嵌套、区分大小写、属性值必须要双引号、id属性代替name属性。

       XHTML更规范。

	HTML	XHTML
基础语言不同	基于标准通用标记语言	基于可扩展标记语言
语法严格程度不同	比较松散	比较严格
可混用应用不同	不能混合其他XML应用	可以混合各种XMl应用
大小写敏感度不同	不敏感	敏感
发布时间不同	1999W3C	2000W3C

1.2 什么是行内元素、块级元素、行内块级元素？空元素有哪些？

（一）行内元素：

①不会独自占用一行，不自动换行；

②不能设置宽高，默认宽高是内容撑起来的；

③margin水平方向有效，垂直方向无效；

④padding水平方向有效，垂直方向有特殊效果（不是边距效果），具体表现：不影响位置，影响视觉；

如：a、b、span、img、input、strong、select、label、em、button、textarea；

（二）块级元素：

①独自占用一行；

②可以设置自己的宽度和高度；

③可以设置margin和padding；

如：div、ul、li、dl、dt、dd、p、h1-h6、blockquote；

（三）行内块级元素：

①有自己的宽高，不会独自占一行。

如：img，input，select

（四）常见的空元素：br、meta、hr、link、input、img。

1.3 页面导入样式时，使用link和@import有什么区别？

link是在页面加载的同时加载，@import要等页面加载完才加载。

1.4 HTML5有哪些新特性

①拖拽释放API：drap and drop；

②画布canvas；

③自定义属性 data-id；

④用于媒介播放的video和audio，自动播放属性：autoplay；

⑤新的语义化标签：article,header,nav,section,footer,aside;

⑥新的本地储存：localStorage（长期），sessionStorage；

⑦新的表单控件：calendar，data，time，email，url，search，tel，file，number；

⑧新的技术:websocket,web worker,geoloacation（基于地理位置的应用）；

1.5 对HTM语义化的理解

  可以清晰的向浏览器和开发者描述其意义，在丢失CSS的情况下也能很好的显示页面的结构，利于seo，seo可以根据标签和上下文计算权重，方便其他设备解析，方便开发和维护，可读性高。

1.6 标签上title与alt属性的区别是什么？

① alt是HTML标签的属性，而title既是标签又是属性；

②title：title 作为标签时，网页的标题就是写在这对标签之内的。

             title 作为属性时，可以为元素提供额外说明信息。

③alt：alt 属性用在 img 元素上时，用于网页中图片无法正常显示时的图像信息描述。

1.7 什么叫优雅降级和渐进增强？

  优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不 支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而 低级浏览器 只 保证最基本的功能。关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异

①优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

② 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

1.8 前端页面由哪三层构成？分别是什么？作用是什么？

①结构层：由HTML负责，负责搭建页面的结构；

②表示层：由CSS负责，负责页面的样式；

③行为层：由JavaScript负责，负责页面的交互。

1.9 label的作用是什么？是怎么用的？

label 标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦 点转到和标签相关的表单控件上。

<label for="na">Number:</label><input type="text" name="na" id="na" />
    <label>Date:<input type="text" name="B" /></label>

点击Number，Number后的输入框会自动聚焦；Date同理。

1.10  title和h1的区别、b与strong的区别、i与em的区别

① title 属性没有明确意义，只表示是个标题；H1 则表示层次明确的标题，对页面信息的抓取有很大的影响；

②strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong 会重读，而 b 是展示强调内容。

③ i 内容展示为斜体，em 表示强调的文本；