web前端面试题合集 (HTML相关)

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

<!DOCTYPE>的定义:

 

     <!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。doctype 声明不属于 HTML 标签

 

该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML版本。假如文档中的标记不遵循doctype声明所指定的DTD,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。)

 

 

 

<!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 的位置。

 

     -   :   表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

 

              +为默认,表示组织名称已注册。

 

 DTD  :   指定公开文本类,即所引用的对象类型。 默认为DTD

 

HTML :   指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。

 

 URL  :  指定所引用对象的位置。

 

  Strict:排除所有 W3C 专家希望逐步淘汰的代表性属性和元素。

 

 

 

三种HTML文档类型:

 

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

 

a ) 如果需要干净的标记,免于表现层的混乱,用HTML Strict DTD类型:

 

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

 

b )Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素. 如果用户使用了不支持层叠样式表(CSS)的浏览器以至于你不得不使用 HTML 的呈现特性时,用     Transitional DTD 类型:

 

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

 

c ) 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">

HTML5:

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:

<!DOCTYPE HTML>

HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。

 

 


 

 块级元素和行内元素都有哪些?


块元素(block element)
    

    ◎ address – 地址

    ◎ blockquote – 块引用

    ◎ center – 举中对齐块

    ◎ dir – 目录列表

    ◎ div – 常用块级容易,也是css layout的主要标签

    ◎ dl – 定义列表

    ◎ fieldset – form控制组

    ◎ form – 交互表单

    ◎ h1 – 大标题

    ◎ h2 – 副标题

    ◎ h3 – 3级标题

    ◎ h4 – 4级标题

    ◎ h5 – 5级标题

    ◎ h6 – 6级标题

    ◎ hr – 水平分隔线

    ◎ isindex – input prompt

    ◎ menu – 菜单列表

    ◎ noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容

    ◎ noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)

    ◎ ol – 排序表单

    ◎ p – 段落

    ◎ pre – 格式化文本

    ◎ table – 表格

    ◎ ul – 非排序列表



内联元素(inline element)

    ◎ a – 锚点◎ abbr – 缩写

    ◎ acronym – 首字

    ◎ b – 粗体(不推荐)

    ◎ bdo – bidi override

    ◎ big – 大字体

    ◎ br – 换行

    ◎ cite – 引用

    ◎ code – 计算机代码(在引用源码的时候需要)

    ◎ dfn – 定义字段

    ◎ em – 强调

    ◎ font – 字体设定(不推荐)

    ◎ i – 斜体

    ◎ img – 图片

    ◎ input – 输入框

    ◎ kbd – 定义键盘文

    ◎ label – 表格标签

    ◎ q – 短引用

    ◎ s – 中划线(不推荐)

    ◎ samp – 定义范例计算机代码

    ◎ select – 项目选择

    ◎ small – 小字体文本

    ◎ span – 常用内联容器,定义文本内区块

    ◎ strike – 中划线

    ◎ strong – 粗体强调

    ◎ sub – 下标

    ◎ sup – 上标

    ◎ textarea – 多行文本输入框

    ◎ tt – 电传文本

    ◎ u – 下划线

    ◎ var – 定义变量


可变元素

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


    ◎ applet – java applet

    ◎ button – 按钮

    ◎ del – 删除文本

    ◎ iframe – inline frame

    ◎ ins – 插入的文本

    ◎ map – 图片区块(map)

    ◎ object – object对象

    ◎ script – 客户端脚本

 


 

你真的了解HTML吗? 雅虎面试题

 

有这么一段HTML,请挑毛病:

 

<P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br> 不要迷恋哥, 哥只是一个传说

 

 

 

 

言归正传。这道题的考点:

 

考点1:html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的,p,br需要闭合, 标签不允许大写,P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签,是可以不用闭合的。

 

这个考点告诉你xhtml是多么苛刻。这是基本考点,答对,你能拿到60分。

 

考点2:考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

 

考点3:合理使用标签
br是强制折行标签,p是段落。原题用连续的br制造两个段落的效果,效果是达到了,但显然用的不合理,段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

 

上面全答对,你就能拿到100分。

 

对原题改进的结果:
html 4.01:
<p>哥写的不是HTML,是寂寞。<p>我说:<br> 不要迷恋哥,哥只是一个传说

 

xhtml 1.0:
<p>哥写的不是HTML,是寂寞。</p><p>我说:<br /> 不要迷恋哥,哥只是一个传说</p>

 

加分:合理的用语义化标签
在前面的基础上合理的用语义化标签,对内容进行必要的标记,是加分的。但过度的使用标签,就画蛇添足了。如“我说”的话,可以用q标签标注。

 

<p>哥写的不是HTML,是寂寞。
<p>我说:<br> <q>不要迷恋哥,哥只是一个传说</q>

 

我觉得这就够了,如果再进一步,“我”用cite标注,“HTML” 用abbr或acronym标注(至于再讨论abbr和acronym的区别就太较真了),也OK。再复杂就没必要了。

 

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>,是寂寞。
<p><cite> 我</cite>说:<br> <q>不要迷恋哥,哥只是一个传说</q>

 

 

posted @ 2012-07-20 02:48  爷爷泡的茶  阅读(887)  评论(0编辑  收藏