语义-定义列表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