仓酷云

标题: 来讲讲：网页的HTML布局举行重构:语义化标签的意义 [打印本页]

作者: 小女巫 时间: 2015-1-15 23:11
标题: 来讲讲：网页的HTML布局举行重构:语义化标签的意义
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
破洛洛文章简介：语义化标签的实战意义.
我搜集到一些概念，人人临时先听上一听，
有人说：
“没需要思索语义化，只需我写的代码扫瞄器运转后没成绩就行，归正向导基本不体贴这些”
“语义化是w3c推行的，我是很想语义化我的代码，但老是用不分明”
“这个欠好说，语义化再好有啥用，关头是有好的项目，客户才是金主！”
“除专业人士，谁会往看我们的代码是否是语义化的”

不单单有页面重构职员的声响，也听一听工程师、计划师、另有项目办理职员，他们是怎样看“语义化”这件事的Php工程师：“无所谓甚么语义化，只需逻辑准确，不影响我轮回数据”
项目办理职员：“我更垂青在最短的工夫，完成我的需求，至于语义化不是我们体贴的，只需别延误项目工夫，你们怎样优化都行”
计划师：“甚么是语义化？”
市场发卖职员：“客户中意就行，客户中意我们才干获利”
这些声响经常充溢在我们的耳边，虽有些全面，但仿佛仍是挺有事理的，可站在本人的态度上（一个页面重构职员），基于这些实际前提，我们要怎样衡量，语义化和实际事情之间的干系？我们该怎样做呢？

先注释几个名词，我们再来会商在实践事情中怎样处置这些成绩。
起首注释一下甚么是语义化？
“语义化是指用公道HTML标志和其独有的属性往格局化文档内容。
语义化的(X)HTML文档有助于提拔你的网站对访客的易用性，好比利用PDA、笔墨扫瞄器和残障人士将从中受害。关于搜刮引擎大概爬虫软件来讲，则有助于它们创建索引，并大概赐与一个较高的权值。
现实上SEO最无效的一种举措，就是对网页的HTML布局举行重构，本色上就是语义化。”
语义化存在的意义

和搜刮引擎创建优秀相同，有助于爬虫抓取更多的无效信息，好比h1~h6、strong用于分歧权重的题目；埋没文本等等
提拔用户体验比方title、alt用于注释名词或注释图片信息、比方label标签的活用；
代码可读、便于保护、进步开辟效力、疾速告竣共鸣，

比方

<divclass="wrapper">
<divclass="main">…</div>
<divclass="sidebar">…</div>
</div>
很简单经由过程好的定名和明晰的布局看懂这些代码

行业机构对语义化标签的扩大和扫瞄器厂商在手艺上的撑持力度渐渐提拔，比方web尺度化构造方才入手下手推行的html5，个中新增了很多语义化的标签，比方header、aside、nav、section等等，在Chrome、opera、safari、firefox等扫瞄器中均失掉很好撑持。

接上去我们抛开这些实际，会商几个我们罕见的布局,

恩，这个是旧事列表，寻常事情中，你怎样写布局？
人人都搜索枯肠的思索用li来完成吧

<divclass="module">
<h3>国际旧事逐日排行</h3>
<ul>
<li><ahref=””title=”完全题目”>德国总理……报歉</a></li>
<li><ahref=””title=”完全题目”>德国总理……报歉</a></li>
……
</ul>
</div>

在web尺度中，ulolli被付与有序或无序列表的语义，可实践利用时，利用局限仿佛被人人扩大了很多，看上面这几个图，li中的元素渐渐增加。

<divclass="module">
<h3>时政要闻</h3>
<ul>
<li><span>03:50</span><ahref=””title=”完全题目”>最高法…巡视轨制</a></li>
<li><span>03:50</span><ahref=””title=”完全题目”>最高法…巡视轨制</a></li>
……
</ul>
</div>
MajorStyle
span{float:right;}
在这个例子中，呈现了更多的元素，我们仍然利用li，就办理了它。
我们持续看图写代码……
（我们只誊写红框里菜单栏这部分代码）

<divclass=”nav”>
<ahref=””title=””>业界静态</a>
<ahref=””title=””>业界静态</a>
<ahref=””title=””>业界静态</a>
<ahref=””title=””>……</a>
</div>
MajorStyle
a{float:left;}
这类办法代码量少，Dom节点深度小，在年夜页面下加载也会快一些，这类写法较合用于不必要扩大的模块,并且我们没有效到li
另外一种写法：

<divclass=”nav”>
<ul>
<li><ahref=””title=””>业界静态</a></li>
<li><ahref=””title=””>业界静态</a></li>
<li><ahref=””title=””>业界静态</a></li>
<li>…</li>
</ul>
</div>
MajorStyle
li{float:left;}
这类办法在代码量上略显痴肥，长处是扩大性好，增添了代码可读性。
但是这是列表吗？这么用对不合错误不分明，仿佛我们一向都是用li的，岂非不合错误吗？显现没有成绩呀。不做解答，我们先持续看图写代码

看到这个图，我们起首思索的是程序轮回，然后在脑海中构想用甚么标签来搭建布局，我持续利用li，实在我很冲突，从语义化讲的列表究竟是个甚么范围，假如不必li，又该怎样写呢，我们先写写看
体例一：
<divclass="hotUserList">
<ul>
<li><pclass=“username”><ahref=““title=““>魏明</a></p><pclass=“attThis”><ahref=““alt=““>存眷他</a></p></li>
<li><pclass=“username”><ahref=““title=““>杜淳</a></p><pclass=“attThis”><ahref=““alt=““>存眷他</a></p></div>
<divclass=“rowlist”><pclass=“username”><ahref=““title=““>叶莺</a></p><pclass=“attThis”><ahref=““alt=““>存眷他</a></p></div>
<divclass=“rowlist”>…</div>
</div>
MajorStyle
.rowlist{float:left;}
如许写没有甚么不尺度的成绩，可是纵不雅下面利用li的代码，对照之下，总以为div的不敷美妙，完善主义者们老是不断改进的但愿本人的代码很精巧很大度，这个全div的，切实其实没有下面谁人li来的大度。

再转头看看下面的图片，仿佛触及到逻辑轮回的，不管巨细我们都先想到li，继而在li外部搭建它的布局，我们的起点，和这么做的启事是甚么？如今想一想也许有这么几个缘故原由，使我们分外偏幸li。

HTML布局明晰
代码可读性较好
易于扩大
简化逻辑轮回次数
块元素和行内元素都可被嵌套在li内，切合尺度

弱点是甚么，这个……我没找到耶
li只是语义化声势中的一个范例，不克不及以偏概全，但几能够申明一些成绩，
作为一个页面重构工程师，不休对本人的代码举行完美精华精辟当然是好，但不管我们的手艺气力有何等壮大，作为一个工程师，不克不及只纠结在手艺面上，还要思索我们做一个产物的初志和方针，服务于用户，以是在衡量代码和用户诉求时，仍是要以年夜局为重，从用户角度动身，以产物需求为中心，思索多方态度，完成在无效的空间和工夫局限内，到达好处最年夜化。红利是基本！然后才是可延续开展，再然后才是思索怎样优化，就像之前读过的一些概念，说到手艺型人才网在办事情的时分，很简单钻牛角尖，很简单在成绩的一个点上深切，而不太会思索全局，这是作为工程师应当把握的一个度
</p>
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

作者: 因胸联盟 时间: 2015-1-17 20:42
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 小妖女 时间: 2015-1-25 15:31
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 柔情似水 时间: 2015-2-3 05:02
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 飘灵儿 时间: 2015-2-8 20:02
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 仓酷云 时间: 2015-2-26 03:08
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 莫相离 时间: 2015-3-8 11:55
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 深爱那片海 时间: 2015-3-16 01:42
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 若相依 时间: 2015-3-22 19:09
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

欢迎光临仓酷云 (http://ckuyun.com/)