HTML+CSS学习笔记

2016-07-13

1.文档格式化

1.1 文字格式化

1)添加标准文字,可治愈<body></body>标记之间。

2)改变文字属性。可用<font>标记。

3)格式化文字。物理的和逻辑的。物理标记包括用于指定粗体的<b>标记,<i>斜体标记。逻辑标记,逻辑元素如<strong>标记和<em>标记。具体事例见HTML+css应用。

4)特殊字符。有时需要在HTML文档中加入一些特殊的字符,如版权符号”<”等。这些字符通常不能被浏览器直接识别,或者是浏览器的保留字符(如“<”符号用于标记)。通过使用一系列转换字符串来表示它们。如空格用“&nbsp”来表示。“&”符号表示特殊符号的开始,符号表示特殊字符的结束。两字符中间所代表的特殊字符英文含义的缩写。

1.2超链接和锚站。

线性文本和非线性文本。线性信息指按照直线发展的信息。从某点开始,按照某一路径,到另外一点结束。线性文本的上下文连贯。非线性文本中,杂志和字典是非线性文本的典型范例。

(1)   链接

超文本链接:连接不同超文本文件的方式称为超文本链接。

(2)   锚站元素,用<a>标记表示。

<a href=”url”>超链接文字</a>

命名锚站:用于创建指向同一页面中指定位置的链接。以便直接跳到此位置。命名锚站也叫做书签

命名锚站的一般语法为:<a name=”书签名”>锚站A</a>

找到锚站:<a href=”#书签名”>单击此处将使浏览器跳到锚站A</a>

1.3段落格式化

1)段落标记

<p> </p>:可用align属性指定段落的对齐方式。如:<p aligh=”center”><b>居中对齐段落</b></p>

<div><span><address><blockquote>

其中<div><span>标记都可以将文档的结构分为一部分或多部分。分成几个逻辑部分后,结合样式表可分别控制它们的显示效果。

2)预格式化段落标记

<pre>标记,保留录入原样显示。

 

2.使用图像和背景

2.1 Web页中添加图像。

<img src=”图像文件url” alt=“替换文本”>

2.2 图片热区的链接

<map name=”FPMap”>

<area href=http://www.cumt.edu.cn  shape=”rect”  coords=”10,32,333,372”>

</map>

 

3.表格

表格的基本语法:<table></table> 定义表格

<caption></caption>定义标题

<tr> 定义表行

<th> 定义表头

<td> 定义表元(表格的具体数据)

 

4.表单

表单是前台页面和后台处理程序(ASPJSPCGI等)的接口

 

4.1 <form>标签

语法格式为:<form></form>  属性有:name属性;method属性(Get方法、Post方法);action属性(action=“accept.asp”表明表单中的内容提交给后台处理程序accept.asp来处理);enctype属性(用来设置表单中信息的编码方式。取值有unknownenctype,默认为unknown。需要上传文件时,需要设为enctype=”multipart/form-data”

4.2 <input>标签

属性:name;value;maxlength;size;type(textpasswordfilesubmitresetcheckbox复选框、radio单选框)

4.3<textarea>标签

<textarea></textarea>

属性:namecols(多行文本输入框的列数)、rows(设置多行文本的行数)、wrap(设置多行文本框中的文本超出文本列宽时是否换行,取值有virtual换行、physical换行、off不换行,默认为换行)

4.4<select>标签与<option>标签

主要用来定义列表框。语法格式为:<select></select>.

<select>标签必须与<option>标签配套使用,后者用于定义列表框的各个选项。<option>标签可以单独使用,也可成对使用。

<select>标签属性:namesize

<option>标签属性:valueselected

 

5.框架

使用Frames结构设计的HTML文件,能够将整个窗口分为几个独立的小窗口,每一个窗口可分别载入到不同的文件,每个窗口是可以互相沟通的。

<frameset>

   <frame src=”url”>

   <frame src=”url”>

</frameset>

5.1各窗口的尺寸设置

将窗口分割为几块,横向分窗口用ROWS属性,纵向分窗口用COLS属性,每一块的大小由这两个属性的值来实现。

<frameset cols=#>    <frameset cols=”100,200,300”>

 <frameset cols=”100,200,*”>   <frameset cols=”100,*,*”>

<frameset cols=”*,*,*”>

<frameset rows=#>   <frameset rows=”10%,20%,70%”>

(1)   纵向排列多个窗口

 <framesetcols=“30%,20%,50%”>
  <frame src="A.html">
  <frame src="B.html">
  <frame src="C.html">
</frameset>

(2)   横向排列多个窗口

 <framesetrows=25%,25%,50%>
  <frame src="A.html">
  <frame src="B.html">
  <frame src="C.html">
 </frameset>

<Frameset>标签是可以嵌套使用的,也就是说,可以将其中某一个或某几个子窗口再划分为若干个更小的窗口。

<html>

<frameset cols="30%,90,*">

        <framesrc="td1.html"  name=cont>

       <framesetrows="120,*">

            <frame src="Tulip.jpg">

            <frame src="蒲公英的约定.mp3">

       </frameset>

        <framesrc="td2.html" name=another>

</frameset>

</html>

5.2 各窗口间相互操作

Frames分出来的几个窗口的内容并不是静止不变的,往往一个窗口的内容随着另一个窗口的要求而不断变化,这就提高了Frames的利用价值。为了完成各窗口之间的相互操作,我们必须为每一个窗口起一个名字,这个名字用属性Name来定义。

<framesrc=url name=“窗口名”>

例如:<frame src="a.html" name=“left”>

定义了窗口名称,还应该有Target来配合使用,Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称,也可以是以下四类值:

<a href=urltarget=_blank>  显示一个新窗口

<a href=urltarget=_self>   显示在同一个窗口

<a href=urltarget=_parent>  显示在Frameset的前一份文件的窗口

<a href=urltarget=_top>   显示在整个浏览器窗口