你真的瞭解HTML嗎?

标签: WEB Design | 发表时间:2012-12-01 15:36 | 作者:[email protected](Admin)
出处:http://www.wowbox.com.tw/blog/


有這麼一段HTML,請挑毛病:

<P>&nbsp;&nbsp;哥寫的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我說:<br>不要迷戀哥,哥只是一個傳說

這是原來雅虎一道筆試題(文字變了變),用了很多年了,還沒有一個人完全答對過。


出這道題的動機是,太多人覺得HTML太簡單,但它恰恰又是前端開發中最基礎最重要的部分。HTML結構設計的合不合理,直接影響到代碼易不易維護,靈不靈活,同時事關網頁性能,協作效率。碰到不少人認為前端開發就是javascript開發,大錯特錯啊。javascript, html, css這三個前端開發的基礎支柱,性質完全不同又緊密關聯,對它們的正確理解,合理應用是專業與非專業的區別。有些後端工程師可以寫出很漂亮的JS,但他們真的不懂怎麼合理的把js, html, css結合起來應用。對html的準確把握,不像學一般的編程語言那樣,而是建立在豐富實踐經驗和體會的基礎上,是前端的工程師的基本功。

這不是一道較真題或是裝逼題,正經一道「畫雞蛋」的題(引自 http://twitter.com/RageCarrier/status/10712084993)考的是基本功。代碼如其人,對一行代碼的理解足以反映出他的前端開發素養。

言歸正傳。這道題的考點:

考點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>

相关 [瞭解 html] 推荐:

你真的瞭解HTML嗎?

- - wowbox blog (網頁設計知識庫)
有這麼一段HTML,請挑毛病:.

哥寫的不是HTML,是寂寞.

我說:
不要迷戀哥,哥只是一個傳說. 這是原來雅虎一道筆試題(文字變了變),用了很多年了,還沒有一個人完全答對過. 出這道題的動機是,太多人覺得HTML太簡單,但它恰恰又是前端開發中最基礎最重要的部分.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素(inline). 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:. 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求,网上找了很多,但是如果批量处理就会出现问题,最后找到了PD4ML,解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹,并且在文件夹中建立pd4fonts.properties ,配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.

HTML head 头标签

- - IT技术博客大学习
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性. 移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要. 了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的.

动态绑定HTML

- - 破狼 Blog
在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM.

HTML编码规范

- - SegmentFault 最新的文章
这段时间在整理前端部分代码规范,初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理. 之前已经整理完了 CSS编码规范,有兴趣可以了解下. [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. 对于非 HTML 标签之间的缩进,比如 script 或 style 标签内容缩进,与 script 或 style 标签的缩进同级.

这样去写你的 HTML

- Allen - 幸福收藏夹
昨天在 twitter 上说,怎么忍心把页面写得这么难用. 是的,这个世界还有一群人等着我们创建出来的东西,可以让他们的生活能过得更容易呢. 作为一个前端,我们又怎么会忍心呢. 之前就一直想写这样的一篇文章,分享一下如何去创造一个可访问性更好的页面. 今天的计划里有一条把 2HTML T2ag 和 WCAG标准结合起来.