html5的设计

其实是在Jeremy Keith在 Fronteers 2010上的主题演讲,我只是做了一些归纳:
伯斯塔尔法则:发送时要保守;接收时要开放。

避免不必要的复杂性

1、简化doctype为:<!DOCTYPE html>
2、头部信息中发送字符编码简化为:<meta charset=”utf-8″>
3、CSS引用可以不需要type。
4、script可以不需要type。

支持已有的内容

1、支持大小写名称。
2、属性值可以不加引号。
3、标签可不闭合。
比如以下四段都是合法的:

<img src="foo" alt="bar" />
 <p>Hello world</p>
 <img src="foo" alt="bar">
 <p>Hello world
 <IMG SRC="foo" ALT="bar">
 <P>Hello world</P>
 <img src=foo alt=bar>
 <p>Hello world</p>

解决现实的问题

链接包含块级元素,这点也是我的最爱。

内容模型

新增四个内容模型:头部(header)、脚部(footer)、分区(section)、文章(article)。
而像footer未必要放在底下,最重要的是它们的语义,跟位置没有关系。
在HTML5中,只要你建立一个新的内容块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里的标题在整个页面中应该排在什么级别;H2、H3,都没有问题。
html5的vedio

<video>
 <source src="movie.mp4">
 <source src="movie.ogv">
 <object data="movie.swf">
 <a href="movie.mp4">download</a>
 </object>
 </video>

上面的代码中包含了4个不同的层次。
1、如果浏览器支持video元素,也支持H264,没什么好说的,用第一个视频。
2、如果浏览器支持video元素,支持Ogg,那么用第二个视频。
3、如果浏览器不支持video元素,那么就要试试Flash影片了。
4、如果浏览器不支持video元素,也不支持Flash,我还给出了下载链接。

一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。

语义-可定义标题h1~h6

在资讯类型网站里面,我总是将任何一条对用户有用的消息视为新闻稿。当然我并不是在探讨如何写作,而是写作格式,这跟传统报纸并没有差别,反之在互联网里面相比报纸更加多元化、表现更加丰富,而本质还是新闻,用来快速传递最新真实消息。

新闻结构包括标题、导语、主体、结语和背景五部分。前三者是主要部分,后二者是辅助部分。这跟小学老师交我们写作文一样,这些是必备项。记得小时候写作文时标题是需要离四个格子,段落需要离二个格式,这叫约定,如果你不遵守她,反而要扣分。而伟大的互联网在这方面的表现力更加丰富、更加细化这些约定,同时从HTML技术角度也有之相对应的元素。而我现着重点在于标题,可别小看他喔,从新闻稿件角度关一个标题分类就有很多种:分眉题(又称引题、肩题)、正题(又称主题、母题)和副题(又称辅题、子题)。

别看他这么多,以之相对应的h1~h6标签。

外观

从外观来解释除了大小不一以外并没有任何区别,而同时大小来表示文章对标题重视程度。从新闻结构上解释,同级之间可以并排,但是不能越级(即:h2放于h1前面)。这样将会给那些试图通过理解网页结构的搜索引擎带来很大不便。

数量

新闻是只有一个大标题的,以之相对应就是h1,一般我只会在一个页面出现一次h1,整个页面相当于一篇文章,而他只有一个标题。而子标题或者更小的标题,还是要视情况而写,过多反而不能体现新闻结构特征,而太少可能很模棱两可的文章结构。

嵌套问题

h系列跟p标签是同等级,因此可以在<h1>…</h1>里面嵌套跟p标签同等标签,他们都隶属block系列。我曾经一度质疑到底h系列是否只保留单纯文字,至今我还保留这种观点,因为标题是代表本篇文章的结构。比如在h1内嵌套链接,既然是作为标题,就没有何来的跳转,也许是我比较苛刻,甚至我不希望嵌套<img/>标签,我更希望通过CSS来解决美观问题,毕竟 CSS 是专门来干这事的。

语义-定义列表dl标签

从我注意WEB2.0开始,用更多HTML标签来布局格式时,我认识的第一个标签就是DL。很多朋友应该和我一样,如果将她做为一排两列来布局那么他是一个非常合适的标签,直到关注语义我才对他做个全新认识。(发现这一段有点拗口 😥 )

利用DL表达图文说明

<dl>
 <dt><a href="/guide/beijing/" target='_blank'><img src="/uppic/cityimages/53/x_200971317542346978.jpg" width="120" height="90" /></a></dt>
 <dd>  北京是中华人民共和国的首都,也是中国中央四个直辖市之一,是全国政治、文化中心。北京是中国陆空交通的总枢纽,也是最重要的国内国际交往中心。<br/>  今天的北京,是一座现代化的国际大都市。2008年,北京已经成功举办...
 <p style="height:22px; overflow:hidden;">推荐景点:<a href="/guide/beijing/2981/" target='_blank'>故宫博物院</a>&nbsp;&nbsp;<a href="/guide/beijing/2997/" target='_blank'>颐和园</a>&nbsp;&nbsp;<a href="/guide/beijing/3492/" target='_blank'>什刹海</a>&nbsp;&nbsp;<a href="/guide/beijing/12986/" target='_blank'>北京欢乐谷</a>&nbsp;&nbsp;</p>
 </dd>
 </dl>

以上是摘自住哪网首页的一段代码,也是大家用DL标签时最常用的做法。

什么是定义列表

我的理解是:对某种信息(文本、媒体等等)做详细解释或者描述,并且DT和DD是相互对应,就像这样:

<dl>
 <dt>HTML</dt>
 <dd>HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言</dd>
 <dt>图片</dt>
 <dd>这是一张上海东方明珠全景图</dd>
 </dl>

总结

我原本有很多话要说的,但是总觉得拿一个典型例子和我对定义列表的理解,已经足够说明我的意思。我对比了几个网站下来,我还是很中意淘宝网,哪怕是一排两列还是使用HTML为我们提供本来就是为了布局而设计的标签,对于为了布局而忽略语义是不可取的。

语义-浏览器加载过程

浏览器加载顺序

  1. HTML下载顺序自上而下,遇到语义解释性会启用单独连接进行下载。
  2. CSS下载完毕后立即渲染到页面,下载和渲染是同步,每次渲染都会对之前的元素重新渲染。
  3. 运行脚本过程中,会停止页面元素下载。

不同浏览器之间的差异

  1. IE、Safair、Chrome等在文档流先出现的资源优先下载。
  2. FF会将脚本、样式提前下载,图像资源延迟下载。

注意

  1. 由于运行脚本过程中会停止元素下载,所以要特别注意一些内联脚本,这经常会阻塞后续下载。
  2. 为了安全起见,放在某断HTML后的脚本,执行时最好还是在domready事件中,无论哪个浏览器解析完HTML后,还并不能代表DOM可以安全操作,特别在网页复杂时。

参考资料

语义-块元素、内联元素

所有的HTML元素都包括以下三种显示方式:

块元素 内联元素 块内容 可变元素
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1-h6 标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
font – 字体设定(不推荐)
s – 中划线(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码
dfn – 定义字段
em – 强调
q – 短引用
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器,定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量
noscript – 可选脚本内容
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
applet – java applet
button – 按钮
del – 删除文本
iframe – inline frame
ins – 插入的文本
map – 图片区块(map)
object – object对象
script – 客户端脚本

语义-alt和title属性

当越来越多的浏览器开发商想占据浏览器市场时,他们总会做出很多不按规则的事来,就好比今天我们拿alt、title两属性来说,在Mac、Windows下面他们的渲染就不一样。其实主要还是今天在一张图片为了alt和title纠结时,才打算写这篇文章的。

PS:我这里说的alt和title是指属性

alt属性

在不能正常显示图像时对该图像进行描述,我的表达估计不太好,但是并不像很多文章里面说:光标移到图像上时显示的提示语。非常明确指出他的用途,而在windows下面你会看到他被渲染进鼠标移上提示语。

alt属性必须在100个英文字符以内相当于50个中文字符,这代表着你必须要很简略的文字描述图像的意思。

也有很多人把alt属性当作SEO优化属性来做,比如:有张宝宝照片,也许你可以看到类似这么一串XHTML

<img src="baobao.jpg" alt="宝宝 宝宝生日 小宝宝 大宝宝 没宝宝 有宝宝" />

这得注意,因为现在的Spam越来越聪明,反而会把你当成垃圾网站来处理。

我们说alt属性要简略,如果你做不到建议你留空:alt=””,为什么呢?alt属性是为了不正常显示图像时起到作用的,如果你觉得对一张图片这样描述:“某某某CEO穿着黑色西装、红色领带、站在某某大楼外、仰望天空?”对于阅读者来说有用的话,那你就做吧!如果说无法三言两语解释图像,可以考虑为空,然后以独立的文字来说明,这样的效果会更好一些,绝大多数图像展示页面都是这样做。

title属性

title属性更多出现在a标签上,当然我们这里不讨论在html、head、script、base、meta等等中的title属性。

针对a标签title属性很好的用途,即为链接提供更加详细的描述。而如果展示这串描述在不同的平台也不一样,但这已经是早期浏览器的情况,至少现在绝大多数都是鼠标移到后出现提示。

为了效果破坏属性值?真的值吗?

有了达到酷酷的效果,您可能会看到这样XHTML:

<a href="/" title="图片大小:100KB<br />图片来源:新华社<br />More...">宝宝</a>

曾经何时我也写过类似XHTML,但是我发现这是一种非常错误的写法,属性值嵌套XHTML标签,如果网页放到屏幕阅读器上,是不是也把“<br />”也读给用户听呢?后来我使用的做法是将“<br />”替换成”。”,然后通过脚本做渲染你所需要的效果。

参考资料

© 2017 卡片机色彩 沪ICP备13032872号-3

Theme by cipchk

to top