深爱那片海 发表于 2015-1-15 23:22:10

来谈谈:语义化的HTML布局怎样了解

每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5viewport的使用能帮你做到这一点……网页制造poluoluo文章简介:那末为何要利用语义化的HTML?语义化的HTML究竟有甚么优点呢?
信任人人都晓得html和css,晓得html布局和css体现分别,晓得html语义化,这些都是这几年的抢手关头字。语义化的html在国际也是一两年前才入手下手被追捧的,看看如今群里议论的html布局,关于html布局的口试题,语义化的html占有了很年夜一部分。那末为何要利用语义化的HTML?语义化的HTML究竟有甚么优点呢?
HTML是供应网页文档内容的高低文布局和寄义;html自己是没有体现的,我们看到比方<h1>是粗体,字体巨细2em,加粗;<strong>是加粗的,不要以为这是html的体现,这些实在html默许的css款式在起感化,以是起首我们要晓得html和页面的体现是没有干系的,这些是css的事变。HTML在页面中的感化就是布局和寄义,普通点说就是分别内容,这里放甚么,我们放的是甚么。
语义化的HTML布局起首要夸大HTML布局
HTML布局是页面的骨架,一个页面就仿佛一幢屋子,HTML布局就是钢精钢筋混土壤的墙,一幢屋子假如没有钢精钢筋混土壤的墙那就是一堆费砖头,不克不及住人,不克不及办公。css是粉饰质料,是原木地板,是年夜理石,是油漆,是用来粉饰屋子的,CSS的壮大就不必多说了,css假如没有html布局那就是一堆木板,一同油漆,没有了实践利用代价。CSS完整依托援用它的(X)HTML文档。假如你想使CSS的才能充实发扬到极致,供应一个用既洁净又有布局的内容的html长短常需要的,“HTML是在互联网上公布超文本的通用语……HTML利用标签来对文本布局化”(http://www.w3.org/MarkUp/)。
语义化的HTML布局怎样写?
HTML是一种对文本内容举行布局和意义(大概说“语义”)举行增补的办法。它会告知我们说:“这行是一个题目,这几行构成了一个段落。这些笔墨是项目列表,这些笔墨是链接到互联网上另外一个文件的超链接。”值得注重的是,不该该让HTML来告知我们:“这些笔墨是蓝色的,这些笔墨又是白色的。这部份内容是最最靠右的一栏,这行内容是斜体字。”这些和体现相干的信息是CSS的事情。在做前端开辟的时分要记着:HTML告知我们一块内容是甚么(或其意义),而不是它长的甚么模样。当我们提到“语义标志”的时分,我们所说的HTML应当是完整离开体现信息的,个中的标签应当都是语义化地界说了文档的布局。
语义化的HTML布局实在很复杂,起首把握html中各个标签的语义,<div>是一个容器;<strong>是暗示夸大;<ul><li>是一个无序列表等等…在看到内容的时分想一想用甚么标签能更好的形貌它,是甚么就用甚么标签。
语义化的HTML布局究竟有甚么优点?
我们晓得HTML5新增的标签,好比<header>和<footer>,html正在野着加倍强健的语义化的HTML布局开展,xhtml2在这点上没html5先辈,这也是xhtml2出生的一个缘故原由,这一点也申明了语义化的HTML布局是html的开展趋向。
1.往失落或款式丧失的时分能让页面出现明晰的布局:
html自己是没有体现的,我们看到比方<h1>是粗体,字体巨细2em,加粗;<strong>是加粗的,不要以为这是html的体现,这些实在html默许的css款式在起感化,以是往失落或款式丧失的时分能让页面出现明晰的布局不是语义化的HTML布局的长处,可是扫瞄器都有有默许款式,默许款式的目标也是为了更好的表达html的语义,能够说扫瞄器的默许款式和语义化的HTML布局是不成支解的。
2.屏幕浏览器(假如访客有视障)会完整依据你的标志来“读”你的网页.
比方,假如你利用的含语义的标志,屏幕浏览器就会“逐一拼出”你的单词,而不是试着往对它完全发音.
3.PDA、手机等设备大概没法像一般电脑的扫瞄器一样来衬着网页(一般是由于这些设备对CSS的撑持较弱).
利用语义标志能够确保这些设备以一种成心义的体例来衬着网页.幻想情形下,寓目设备的义务是切合设备自己的前提来衬着网页.
语义标志为设备供应了所需的相干信息,就省往了你本人往思索一切大概的显现情形(包含现有的大概未来新的设备).比方,一部手机能够选择使一段标志了题目的笔墨以粗体显现.而掌上电脑大概会以对照年夜的字体来显现.不管哪一种体例一旦你对文本标志为题目,您就能够确信读取设备将依据其本身的前提来符合地显现页面.
4.搜刮引擎的爬虫也依附于标志来断定高低文和各个关头字的权重.
已往你大概还没有思索搜刮引擎的爬虫也是网站的“访客”,但如今它们他们实践上是极为可贵的用户.没有他们的话,搜刮引擎将没法索引你的网站,然后一样平常用户将很忧伤来会见.
5.你的页面是不是对爬虫简单了解十分主要,由于爬虫很年夜水平上会疏忽用于体现的标志,而只注意语义标志.
因而,假如页面文件的题目被标志,而不是,那末这个页面在搜刮了局的地位大概会对照靠后.除提拔易用性外,语义标志有益于准确利用CSS和JavaScript,由于其自己供应了很多“钩钩”来使用页面的款式与举动.
SEO次要仍是靠你网站的内容和内部链接的。
6.便于团队开辟和保护
W3C给我们定了一个很好的尺度,在团队中人人都遵守这个尺度,能够削减良多差别化的器材,便利开辟和保护,进步开辟效力,乃至完成模块化开辟。
若有分歧概念,增补,接待留言会商。
感激鬼哥,奶茶,小志,偷米饭,Caspar另有css丛林群的会商
</p>
通过我们的HTML编辑器,您能够编辑HTML,然后点击按钮来查看结果。

乐观 发表于 2015-1-17 22:14:12

还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。

分手快乐 发表于 2015-1-26 22:32:41

不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。

只想知道 发表于 2015-2-5 03:26:02

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

不帅 发表于 2015-2-11 03:49:48

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

兰色精灵 发表于 2015-3-1 21:17:56

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

变相怪杰 发表于 2015-3-11 00:36:30

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

活着的死人 发表于 2015-3-17 17:09:52

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。

精灵巫婆 发表于 2015-3-24 17:45:02

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
页: [1]
查看完整版本: 来谈谈:语义化的HTML布局怎样了解