话说,学完web应用程序客户端界面设计已经好几天了。
刚刚考完试,不过悲催的很,考的很不好;按照一贯的风格是的给自己找个借口开脱开脱,呵呵~
想想,还是算了吧不找什么客观和主观原因。。好好总结一下。
下面就一起来看看我们学过哪些标记吧:
1、 <h1> </h1>:定义正文标题的标记;从h1-h6的顺序字体的变化是从大到小;也就是h1最大h6最小。h标记默认换行。
2、<p> </p> : 定义一个段落。p标记也是默认换行的。
3、<blockquote> </blockquote> :引用文本定义标记。blockquote标记会将段落缩进,使标记里面的内容与周围的文字有一定的偏离。
4、定义列表的标记:
- 有序列表;<ol> </ol>
- 无序列表;<ul> </ul>
- 定义列表;<dl> </dl>
有序列表和无序列表下用<li> </li>标记,<li> </li>标记只能用在
下。
定义列表;<dl> </dl> 下只能用<dt></dt> 和<dd> </dd>标记;
格式如下:
<dl>
<dt>猪</dt>
<dd>一个吃了就睡的家伙,胖胖的,最后会被一的叫“人”的东西吃掉</dd>
<dt>人</dt>
<dd>一个吃猪的东西,自以为比猪聪明</dd>
</dl>
5、<pre> </pre>:定义预编排文本:这个标记里面的元素格式不会变;你是怎样安排的,他显示的就是你安排的那个格式。
比如:
<pre>
12
+ 24
-------------
36
</pre>
一般其他标记里面写这样的格式,显现出来的就会变样但<pre> </pre>里就不会。
6、<div> </div> 定义分区块文本; 是一个很重要的标记,常用于也面布局,后面会用到很多。用他再配上后面我们要学到的css能作出效果很炫的网页。他的作用就是把你想要的内容用一个无形的框框起来(当然这个框也能够看见,如果你愿意让他显示出来的话。)然后我们就可以用后面的CSS定义他的各种效果,让他里面的内容变得好看,变得更炫。
格式:
<div>
<p>这是一个div格式</p>
<pre>
他里面能够嵌套很多标记,
:-D
</pre>
</div>
7、<span> </span>:跨越多个字符标记,如果在正文段落中,对部分字符进行格式化就可用到此标记。常和后面要讲的选择器一起使用。
格式:
<p> span标记的<span class="emphasis">示</span>例</p>
如果在前面的“emphasis”选择器中定义了文字的颜色和其他的效果的话“示”会相应的发生改变。
8、<a href="目标url"> </a>:
万维网的主要优点就是能够链接web上其他文档。web链接有两个基本的组件:链接和目标。链接是在主文档中指向其他文档的文本,而目标是指链接所指向的文档或主文档中的某个位置。
链接又分两个部分:描述和目标引用。目标引用通过<a>标记的href属性指定,而描述文本出现在<a>标记的开始和结束之间。
比如:<a href="http://user.qzone.qq.com/765002294/infocenter">豆豆的一天</a>就是我空间的链接其中"豆豆的一天"就是描述而目标引用就是http://user.qzone.qq.com/765002294/infocenter了。
<a>标记的三个属性:title;提示作用,即当我们给一个链接指定了title 属性时鼠标指在链接上时会显示我们给他的提示;比如:
<a href="http://user.qzone.qq.com/765002294/infocenter" title=“我的个人主页”>豆豆的一天</a>
当鼠标指在链接上时就会显示提示:“我的个人主页”
第二个属性:accesskey属性;指定快捷键属性,和一般的快捷键相似,当我们给链接指定accesskey时,当我们按快捷键时会自动链接。比如
<a href="http://user.qzone.qq.com/765002294/infocenter" accesskey="F">豆豆的一天</a>当我们按F键时会自动链接到http://user.qzone.qq.com/765002294/infocenter。
第三个属性:tabindex;这个属性可以设置页面上超链接的tab次序,
比如::<a href="http://user.qzone.qq.com/765002294/infocenter" tabindex="2">豆豆</a>
:<a href="http://user.qzone.qq.com/765002294/infocenter"tabindex="1">豆豆的一天</a>
:<a href="http://user.qzone.qq.com/765002294/infocenter"tabindex="3">豆豆主页</a>
当我们按tab键的时候首先选择的是“豆豆的一天”然后选择的是“豆豆”最后选择的才是“豆豆主页”
9、<img src="filename.gif" alt=" " />指定图片的标记;这是一个给网页插入图片的标记,要在网页中显示图片必须使用这个标记,其中支持的图片格式为gif和jpeg格式的图片。src是指定图片的路径,而alt是在图片不能显示时显示的文字描述。和<a>标记的title属性一样的效果。还有这是使用的是一个自关闭标记,即不像我们开始像前面那些标记都写一个开始标记再写一个结束标记而这个没有直接就把结束标记写在开始标记里。当然如果像开始那些标记那样写也是对的。
10、<table></table> 表格使用标记,这个标记是用来声明一个表格的通常是和<tr> </tr>和<td></td>来 一起使用的。
一个表单用<tr>标记分成行,每行用 <td>标记分成每个数据单元;一个数据单元可以包含文本、图形、列表、段落、表单、水平线及其他表格等。。,如果一个页面比较规则,也可以用它来布局,但一般比较少用。格式:
<table>
<tr>
<th colspan="2">标题<th>
<th colspan="2">另一标题</th>
</tr>
<tr>
<td>数据单元格1</td>
<td>数据单元格2</td>
<td>数据单元格3</td>
<td>数据单元格4</td>
</tr>
<tr>
<td>数据单元格1</td>
<td>数据单元格2</td>
<td>数据单元格3</td>
<td> </td>
</tr>
</table>
注:创建表格时注意;单元格构成行,行构成表。也就是td标记必须嵌套在tr标记里,tr标记必须嵌套在 <table>标记里。我们还可以设置table的属性,比如大小、颜色等,这在后面都会讲到的。
另外;<th></th>标记也是<table>中标记的一种,通常我们制作一个表格,比如说制作一个5行3列的表格,但我们的内容只有4行3列或者5行2列,这样表单就不完整,这时我们就会用到特殊标记了;这时我们就可以用 把不够的补完整。
还有一种情况就是,我们开始制作的表单都是比较规则的,都是一行一列的各自排好的,但我们有时会想要几行合并在一起或者几列合并在一起,这时我们我们也会用到td 的属性;colspan 属性和rowsoan 属性;他们分别表示的意思即是;colspan=" "表示几行合并在一起;rowsoan=" "表示几列合并在一起。
比如;
<td colspan="3"> </td>表示3行合并在一起;
<td rowspan="3"></td>表示3列合并在一起;
11、<iframe> </iframe>:在网页中插入其他网页的标记;这个标记和<a>超链接标记的作用类似;都是链接一个网页,可以是外部的也可以是内部的即本网页;但他们有个不同点就是;<a>标记链接的网页是在一个新的窗口打开,就是打开我们链接的那个网页;而<iframe>是在本网页里留一个空(当然这个空你自己可以设定)来显示你链接的那个网页,即不跳转到你链接的那个网页,而还是在本网页。
格式:
<iframe src="url"
width="x" height="y"
scorlling="auto
frameborder="1"
name="内部框架的名称">
</iframe>
注:src:是指调用的外部或内部网页的路径,可以是html文件,也可以是文本、jsp等。
width、height是指内部框架区域的宽度与高度;
scorlling:当src的指定的外部文件在指定的区域显示不完全时是否显示滚动条;有三个选项;auto、yes、no。
framborder:区域边框的宽度;有两值;1、0当值为0时不出现变框。
name :框架的名字,用来进行识别。
12、特殊字符:
空格
< 左尖括号<或小于符号
> 右尖括号>或大于符号
© 版权符号©
® 已注册符号®
& and符号&
— 长破折
浙公网安备 33010602011771号