html教程之HTML5教程:语义化标签是甚么？有甚么感化？

只看该作者 · 发表于 2015-1-15 23:09:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。破洛洛文章简介：记得有一次可怕的履历,谁人页面嵌套了不知是十几层仍是几十层div.让我看的时分立马头晕...个中有些能用span标签,能用p标签的,也用div.能用h1,hx的也用div标签.真是让人很无语啊..这个时分我何等但愿该开辟者有点"语义化标签"的观点和举动啊.
我看一些雇用请求上都有"熟习Web语义化"这一词和"了解/熟习/精晓web尺度".而标签语义化就是web尺度的一部分,以是我就把本人之前发在博客园的一篇贴子小修正一下,再贴过去...但愿前端进门的er们能晓得有这么个器材.

记得有一次可怕的履历,谁人页面嵌套了不知是十几层仍是几十层div.让我看的时分立马头晕...个中有些能用span标签,能用p标签的,也用div.能用h1,hx的也用div标签.真是让人很无语啊..这个时分我何等但愿该开辟者有点"语义化标签"的观点和举动啊..那末

一：(实际)语义化标签是甚么？
语义化标签就是只管利用有绝对应的布局的寄义的Html的标签，以Table为例：
<table>

<tr>

<td>消耗项目</td>

<td>消耗金额</td>

</tr>

<tr>

<td>用饭</td>

<td>20元</td>

</tr>

</table>
你看出了下面的Table有甚么偏差吗？嘿嘿，那你看这个语义化的标签
<table>

<caption>消费记账</caption>

<thead>

<tr>

<th>消耗项目</th>

<th>消耗金额</th>

</tr>

</thead>

<tbody>

<td>用饭</td>

<td>20元</td>

</tbody>

</table>
这两块代码的标签纷歧样，第二个表格的这些标签代码，无疑更切合Web尺度.
<caption>:表格的题目;
<thead>:一表格的表头;
<th>:表的某一列的列头。

再说我们屡见不鲜的
<title>博客园简介</title><body>博客园是一个软件开辟的手艺乐土，它于2004年兴办，这里...</body>
你看，为何我们看一篇文章，一下就晓得题目在哪呢？在扫瞄器的顶端。那为何搜刮引擎能抓取呢？就是它晓得这个语义化标签<title>里的就是文章题目，如果我们不恪守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开辟的手艺乐土，它于2004年兴办，这里...<span>
那搜刮引擎怎样就晓得谁是题目，谁是内容了呢？它又靠甚么往抓取题目呢?实在语义化不但能够是标签语义化,还能够延长成布局语义化.举例:
#left{float:left;margging-left:50px;}

#right{float:right;margin-top:100px;}

<divid="left">content..</div>

<divid="right">content..</div>
这个例子里对id的定名略微有点夸大,可是相似的情形却使有的,当我们想把#left这个div放到页面的右侧,和#right互换地位时,岂非你能够把款式改成如许?
#left{float:right;margin-left:50px;}

#right{float:left;margin-top:100px;}
那样看着多别扭,多误导人这两个div的结构啊.
应当写成如许.
<divid="main">content..</div>

<divid="sidebar">content..</div>
那样既一览无余这几个div里是甚么内容也便利对个中的款式举行修正.

二：(实际)语义化标签怎样？
1.布局更好，更利于搜刮引擎的抓取（SEO的优化）和开辟职员的保护(可保护性更高，由于布局明晰,so易于浏览)。
2.更有益于特别终真个浏览(手机，团体助理等）。

三：(举动)语义化标签怎样办？
只管用有布局寄义的,罕用无语义的，如<span>,<div>偶然义，看不出是甚么器材,但是<address>一看就晓得这内里的是地点,em标签一看就晓得这个是夸大的内容,辨别于分歧内容。

那末，怎样判别你的页面是不是切合Web尺度之一：语义化标签呢？你能够把你的页面临时往失落款式后看可读性怎样，假如这个时分感到你的页面很乱，那就申明的的页面的语义化标签不怎样，而假如你的页面往失落款式了感到仍然不是乱七八糟的，那末，就申明你的页面布局明晰，语义化标签对照能够了。

这只是我的一点意见，但愿举一反三一下，看过的人把本人的设法也说出来，让人人晓得你的设法，也是完美此文。
</p>
这不是理想状况。我们必须尽可能把精力放在改善这项规范，把耗费在派系相争的精力降到最低。

只看该作者 · 发表于 2015-1-17 20:08:44

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-1-25 06:04:11

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-2-2 17:51:04

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-8 04:27:04

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-24 17:22:54

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-3-7 13:08:15

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-15 07:34:58

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-22 00:09:06

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

		自动登录	找回密码
密码			立即注册

[HTML5] html教程之HTML5教程:语义化标签是甚么？有甚么感化？

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子