代码入门教程（7）

第一章　代码基础知识

第十二节　其它标签

本节讲解几种常用标签：块区标签、段落标签、定位标签、强调标签、换行标签等8种标签。

1、<div>是块区标签，又叫区隔标签。

DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签（首标签）和结束标签（尾标签）之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。它可以包含段落，表格、图片等不同的内容。它的作用是设定字、画、表格等的摆放位置。

DIV元素最大的特点是默认没有对元素内的对象进行任何格式化渲染，主要用于应用样式表。

块区标签语法： <div>内容</div>

<div> 标签是制作网页常用的一个标签，它的用途是用于网页布局。<div>与</div>之间的“内容”，可以是文字，也可以是图片等内容。在使用块区标签的地方，浏览器会自动地给下面的内容空出一行的空格。

DIV标签应用于 Style Sheet（式样表）会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性。

在<div>标签中，可以添加许多属性。添加属性的方式，大部分是以“样式”（style）的方式添加的。现举例如下：

（1）设置对齐方式：

（2）设置宽度、高度和背景颜色：

（3）设置外边距、宽度、高度和背景颜色：<div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">

（4）设置定位方式：position:relative（定位方式：相对定位）<div style="position:relative; top:10px;left:10px; width:140px; height:140px;background-color:White;">

2、<p>是段落标签

段落标签语法：<p>内容</p>

<p>是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式，并不是一定的或必需的方式。所以在用<P>标签的时候，如果需要可以针对P设定一下行首缩进。

段落标签常用的属性是对齐方式。即：<p align="center">、<p align="right">或者<p align="Left">

在使用段落标签的地方，浏览器会自动地给下面的文章空出两行的空格。因此，我们在编撰文字或者图片的时候，如果想让两部分内容之间空出两行空格，就用<p>标签；如果想让两部分内容之间空出一行空格，就用<div>标签。

3、<span>标签

<span>语法：<span> 内容</span>_

<span> 标签被用来组合文档中的行内元素。

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。

<span>在CSS定义中属于一个行内元素，而<div>是块级元素。所谓“块元素”，是以另起一行开始渲染的元素，“行内元素”（又叫做“内嵌元素”），在它后边的内容不会换行。我们可以通俗地理解为<div>为大容器，<span>就是小容器。

4、定位标签与代码

在制作网页时，我们常常需要给网页中的元素进行定位。定位有水平对齐、垂直对齐、居中标签、绝对定位、相对定位等几种方式。

（1）水平对齐方式：align=left（左对齐） align=center（居中对齐）align=right（右对齐）

水平对齐方式常常作为其它标签（例如：表格、段落、块区等标签）的属性使用。

（2）垂直对齐方式：valign=top（顶部对齐）valign=bottom（底部对齐）middle（中部对齐）

垂直对齐方式也常常作为其它标签（例如：表格、段落、块区等标签）的属性使用，垂直对齐方式还常常和水平对齐方式配合使用。

（3）居中标签：居中标签一般是单独使用的，居中标签有尾标签。标签语法：<center>内容</center>

（4）绝对定位语法：POSITION: absolute（定位：绝对定位）。

绝对定位是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

绝对定位举例：style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"

（5）相对定位语法：POSITION: relative（定位：相对定位）。

相对定位是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

相对定位举例：style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"

5、<strong>强调标签

标签语法：< strong>内容< /strong>

strong 意思是着重，这是有语义的，作用也很简单。至于样式，是加粗着重，还是用色彩表明着重，都由你自行选择。

6、<em>标签

标签语法：< em>内容< /em>

< em >标签是表示强调，一般浏览器的默认值是斜体。

<strong>标签与< em>标签都有强调的意思，但是强调的力度有所不同。strong要比em力度更大一点。如果说em是汉语中的“强调”、“注意”，那么strong就是“再三强调”、“特别注意”。

7、<br>标签与<wbr>标签

<br>换行标签。在<br>后面的内容，会显示在下一行。<br>标签是空标签，它没有尾标签。

wbr 是 Word BReak 的缩写，用来指定软换行（或单词换行）。即使用<nobr>禁止了换行，使用 <wbr> 仍然可以换行，但是又不是强制换行，这点和 <br> 不一样。换不换行要看浏览器的横幅。

8、<nobr>标签

<nobr>：不换行标签。标签语法：<nobr>内容</nobr>

在一段文字或者几个图片代码的前面输入<nobr>标签，后面输入它的尾标签</nobr>，这些文字和图片就不会换行了。

作业：

1、认识上面讲解的这8种标签，理解这些标签各自表示的意义。

2、熟悉这些标签的表达语法。

3、自己找一些网页代码，认识这些标签并体会它们的用法。把你认为精彩的标签，设置一个文件夹保存起来。

２０１２年１０月１9 日于北京

第一章　代码基础知识

第十三节　CSS样式

本节讲解有关CSS样式的内容。

CSS是什么？

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件样式的计算机语言。 CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS样式表能为我们做什么?

CSS样式表的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。

这是一个没有添加css的普通网页： “没有添加CSS的HTML网页” ，我们不改动网页的HTML代码，只是添加了一些CSS规则，就得到了一个非常美观的网页：“添加了css的网页”。

这不是CSS作用的全部，CSS可以将格式和结构分离。可以以前所未有的能力控制页面布局。可以制作体积更小下载更快的网页。可以将许多网页同时更新，比以前更快更容易。浏览器将成为你更友好的界面。

css的内容

css的内容是对“层叠样式表”使用方法的讲解。它包括：样式表的基本语法、把样式表加入网页的方式、文字属性的设置、文本属性的设置、背景属性的设置、列表项目的应用、div和span标签、盒子、定位方法、链接方法等内容。

应用css样式标签举例：

代码1：

<IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 1000px; BORDER-TOP-WIDTH: 0px;

BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 305px; BORDER-LEFT-WIDTH: 0px"

src="//image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg">

注释：

1、上面的图片标签解析：

<图片标签样式＝“图片右边框宽度：0px；图片外边距宽度：0px；图片宽度：1000px；图片上边框宽度：0px；图片下边框宽度：0px；图片高度：305px；图片右边框宽度：0px" 图片地址＝"http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg">

2、说明：

上面的图片标签中使用了css样式，定义了图片的四个边框的宽度、图片外边距的宽度、图片高度和图片宽度。

代码2：

<marquee style="width: 621px; height: 66px; color: rgb(255, 0, 255); font-size: 24pt; font-weight: bold;"

id="class=" direction="right" behavior="alternate" scrollAmount="1">

注释：

1、上面的移动标签解析：

<移动标签样式＝屏幕宽度：621px；高度＝66px；颜色：十进制颜色（红色值255，绿色值0，蓝色值255）；文字字号：24px；文本粗细：粗体；序号＝“选择器”＝“移动方向”＝“向右” 移动方式＝“来回走” 移动速度＝“1”>

2、说明：

上面的移动标签中使用了css样式，定义了移动屏幕的宽度和高度、文字颜色、文字字号、文本粗细、标签序号（包括移动方向、移动方式和移动速度）

代码3：

注释：