你真的了解HTML吗
有这么一段HTML,请挑毛病:
<P> 哥写的不是HTML,是寂寞。<br><br> 我说:
<br>不要迷恋哥,哥只是一个传说
这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。
============== 解答部分 ================
出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分。
HTML结构设计的合不合理,直接影响到代码易不易维护,灵不灵活,同时事关网页性能,协作效率。
碰到不少人认为前端开发就是javascript开发,大错特错啊。
javascript, html, css这三个前端开发的基础支柱,性质完全不同又紧密关联,对它们的正确理解,合理应用是专业与非专业的区别。
有些后端工程师可以写出很漂亮的JS,但他们真的不懂怎么合理的把js, html, css结合起来应用。
对html的准确把握,不像学一般的编程语言那样,而是建立在丰富实践经验和体会的基础上,是前端的工程师的基本功。
这不是一道较真题或是装逼题,正经一道“画鸡蛋”的题,考的是基本功。
代码如其人,对一行代码的理解足以反映出他的前端开发素养。
言归正传。这道题的考点:
考点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吗的更多相关文章
- App你真的需要么
随着智能手机.移动路联网的普及,APP火的一塌糊涂,APP应用可谓五花八门,街上经常看到各种推广:扫码安装送东西,送优惠券.仿佛一夜之间一个企业没有自己的APP就跟不上时代了. 有时我在想:APP,你 ...
- [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?
你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...
- 你真的会玩SQL吗?之逻辑查询处理阶段
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- SQL Server中SELECT会真的阻塞SELECT吗?
在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...
- 您真的理解了SQLSERVER的日志链了吗?
您真的理解了SQLSERVER的日志链了吗? 先感谢宋沄剑给本人指点迷津,还有郭忠辉童鞋今天在QQ群里抛出的问题 这个问题跟宋沄剑讨论了三天,再次感谢宋沄剑 一直以来,SQLSERVER提供了一个非常 ...
- 你真的会玩SQL吗?和平大使 内连接、外连接
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你真的会玩SQL吗?三范式、数据完整性
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你真的会玩SQL吗?让人晕头转向的三值逻辑
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你真的会玩SQL吗?EXISTS和IN之间的区别
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你真的会玩SQL吗?无处不在的子查询
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
随机推荐
- neo4j的搭建和实例使用
一. 简介 neo4j是当今最流行的图数据库,基于 节点+关系 的架构,保存了图形数据的基本元素.同时,数据库也支持通过基础数据元素和独特的CQL查询语法,快速方便的检索.构建复杂的图表关系结果. 二 ...
- Maven编译资源文件拷贝
<build> <finalName>op-balance-job-service</finalName> <plugins> <plugin&g ...
- leetcode 996. Number of Squareful Arrays
给定一个长度小于 12 的数组 要求排列方式的种数 使得相邻和为完全平方 不考虑数学结构 将问题转化为 一笔画问题 和为完全平方代表 之间存在通路 回溯法 N^N 记忆化搜索 NN 2^N 判断是否是 ...
- Java超简明入门学习笔记(零)
Java编程思想第4版学习笔记(零) 前言 这个笔记本主要记录了我在学习Java编程思想(第4版,中文版)的过程中遇到的重难点及其分析.主要参考了C++11版本的C++语言,对比了它 ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
- elasticsearch 中文API 删除(四)
删除API 删除api允许你通过id,从特定的索引中删除类型化的JSON文档.如下例: DeleteResponse response = client.prepareDelete("twi ...
- Teigha的BlockTableRecord获取方法
Teigha的db(即database)可以有很多BlockTableRecord,可以用 OdDbBlockTablePtr blkTbl = db->getBlockTableId().op ...
- #iOS问题记录# 频繁触发viewDidLayoutSubviews的问题
问题描述: 最近使用给Flutter团队写view组件的时候,出现了触发Widget的频繁build的问题. 问题排查: Flutter的同事提到在flutter层,是因为 updateViewpor ...
- 跟我一起学习webpack(一)
跟我一起打包我们的第一个应用 第一步安装webpack 接下来我们新建文件 //add-content.js export default function(){ document.write('he ...
- 原子操作atomic
一.原子操作:即不可再细分的操作,最小的执行单位,在操作完之前都不会被任何事件中断. 整型原子操作:对int类型的操作变成原子操作. int i = 0; ...