仓酷云

标题: 来谈谈:了解(X)HTML的文档布局 [打印本页]

作者: 简单生活    时间: 2015-1-16 00:12
标题: 来谈谈:了解(X)HTML的文档布局
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
CSS经由过程与(X)HTML的文档布局绝对应的选择器(selector)来到达把持页面体现的目标,而文档布局不单单在CSS的使用上十分主要,关于举动层(比方利用JavaScript把持元素的举动)一样也十分主要。

4.1文档布局

(X)HTML文档能够看做一个家属树,这个树有1个先人——根元素,然后各元素顺次向下分列,比方有XHTML代码以下,其文档树如-1所示。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>文档布局与选择器</title>
</head>
<body>
<h1>第3章<em>CSS进门</em></h1>
<p><acronymtitle="CascadingStyleSheets,层叠款式表">CSS</acronym>是一种标志性言语。</p>
<ol>
<li>CSS的<em>优弱点</em></li>
<li>CSS的利用办法
<ul>
<li>内联式款式</li>
<li>嵌进式款式表</li>
<li>内部款式表</li>
</ul>
</li>
<li><strong>基础</strong>款式划定规矩</li>
</ol>
<p>CSS经由过程与(X)HTML的文档布局绝对应的<ahref="selector01.html"title="关于选择器的内容">选择器(<em>selector</em>)</a>来到达把持页面体现的目标。</p>
</body>
</html>

-1文档布局树

CSS年夜部分才能是基于元素的“父子”干系,假如元素A包括了元素B,那末元素A就是“父元素”,被包括的元素B是“子元素”。每一个元素都是另外一个元素的“父”大概“子”大概二者都是。比方:<body>既是<html>的子元素,又是<h1>的父元素。在家属树中,父子元素是相连的,并且父元素在子元素的下面一层。
“父”与“子”偶然候又被一样平常化为“先人(或称先辈)”和“儿女(或称子孙)”,从一个元素到另外一个元素两头超过了一层或更多层,就是“先人/儿女”干系。比方-1中,<html>就是<h1>的先人,<h1>则是<html>的儿女。<body>是一切扫瞄器能显现的元素的先人,而<html>是一切元素的先人,也称为“根元素(root)”。“先人/儿女”干系包括“父子”干系。
有着不异父元素的元素之间互为“兄弟”干系。比方-1中,<h1>和<ol>为兄弟干系,<body>是它们配合的父元素,<ul>里的3个<li>也相互为兄弟干系。

提醒:良多选择器都是针对文档布局婚配的,因而把握文档布局的意义十分主要。
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
作者: 冷月葬花魂    时间: 2015-1-17 05:54
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
作者: 老尸    时间: 2015-1-20 14:33
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 活着的死人    时间: 2015-1-29 09:10
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
作者: 分手快乐    时间: 2015-2-6 00:17
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
作者: 再现理想    时间: 2015-2-14 14:24
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
作者: 不帅    时间: 2015-3-4 07:13
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
作者: 飘灵儿    时间: 2015-3-19 05:48
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
作者: 蒙在股里    时间: 2015-3-27 08:32
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.




欢迎光临 仓酷云 (http://www.ckuyun.com/) Powered by Discuz! X3.2