DeathGhost

HTML5 语义元素合理运用 提高内容的可读性

这篇文章发布于2018年07月03日 22:42 星期二。 阅读 28 次 ,由 DeathGhost 编辑,归类于html »

什么是语义元素?语义元素清楚地向浏览器和开发者描述其意义,同时具备基础语义特性;层次结构清晰,便于人和机器阅读理解。

什么是语义元素?- 语义元素清楚地向浏览器和开发者描述其意义。

例如:

非语义元素的例子:<div> 和 <span> 等等 - 无法提供关于其内容的信息。

语义元素的例子:<article>、<table> 以及 <img> 等等 - 清晰地定义其内容。

我们在拿到设计稿时,首先对其布局结构拆分,如何布局,使用什么标签更为合理同时还需考虑到信息 内容的扩展性;否则,后期修改比较麻烦。

1、在使用标签布局时首先我们得摒弃被丢弃(或不赞成)使用的标签。

例如:<big><center><font><u><s><strike>...

2、如果考虑到蜘蛛读取的话用户界面尽量避免使用<table>和frame框架。

3、标签使用完毕对其闭合。

例如:<br><img><input>...

4、块级元素与块级元素并列、内嵌元素与内嵌元素并列。

建议:

<div>
  <h2>Title</h2>
  <p>Content</p>
</div>

避免:

<div>
  <h2>Title</h2>
  <span>Content</span>
</div>

5、块级元素(block element)包含内元素(inline element)及块级元素,但内元素(inline element )不能包含块级元素。

例如:<section><h1></h1><article></article></section>

避免:<section><span><h1></h1></span><article></article></section>

6、标签注意使用小写。

7、合理利用<h1>,没必要可以不用,但不能乱用;这种标签一个页面是以组合形式出现,可以只有一个 <h1>(具有唯一性),但不可以只有一个或多个<h2>;如果出现<h3>,那页面必须含有<h1>和<h2>,这样 才是个完整开始与结束

其他情况:

1、p与div均属于块级元素,但p为特殊标签,切勿:

<p><div>content...</div></p>  

2、整体是个链接区域其子没有动态性内容链接或按钮可包裹块元素。

<section><a><h1>这种情况可以</h1><p>被a元素包含进来</p></a></section>

最后,行内块级元素涉及到float与inline-block(同为水平排列),当你需要控制元素的垂直对齐跟水平排列时,使用inline-block;当你需要让元素环绕某一个元素时,或者不想处理inline-block带来的空白问题时,使用浮动。

DeathGhost

孙志锋

志于道,据于德,依于仁,游于艺。

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕