首页 > 代码库 > HTML+CSS学习笔记
HTML+CSS学习笔记
1．文档格式化
1.1 文字格式化
（1）添加标准文字，可治愈<body>与</body>标记之间。
（2）改变文字属性。可用<font>标记。
（3）格式化文字。物理的和逻辑的。物理标记包括用于指定
粗体的<b>标记，<i>斜体标记。逻辑标记，逻辑元素如
<strong>标记和<em>标记。具体事例见HTML+css应用。
（4）特殊字符。有时需要在HTML文档中加入一些特殊的字符
，如版权符号“”、”<”等。这些字符通常不能被浏览器直
接识别，或者是浏览器的保留字符（如“<”符号用于标记）
。通过使用一系列转换字符串来表示它们。如空格用“ 
”来表示。“&”符号表示特殊符号的开始，“；”符号表示
特殊字符的结束。两字符中间所代表的特殊字符英文含义的缩
写。
1.2超链接和锚站。
线性文本和非线性文本。线性信息指按照直线发展的信息。从
某点开始，按照某一路径，到另外一点结束。线性文本的上下
文连贯。非线性文本中，杂志和字典是非线性文本的典型范例
。
（1） 链接
超文本链接：连接不同超文本文件的方式称为超文本链接。
（2） 锚站元素，用<a>标记表示。
<a href=http://www.mamicode.com/”url”>超链接文字
命名锚站：用于创建指向同一页面中指定位置的链接。以便直
接跳到此位置。命名锚站也叫做“书签”。
命名锚站的一般语法为：<a name=”书签名”>锚站A</a>
找到锚站：<a href=http://www.mamicode.com/”#书签名”>单击此处将使浏览器跳到锚>
站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=http://www.mamicode.com/”图像文件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．表单
表单是前台页面和后台处理程序（ASP、JSP、CGI等）的接口
。
4.1 <form>标签
语法格式为：<form></form> 属性有：name属性；method属
性（Get方法、Post方法）；action属性
（action=“accept.asp”表明表单中的内容提交给后台处理
程序accept.asp来处理）；enctype属性（用来设置表单中信
息的编码方式。取值有unknown与enctype，默认为unknown。
需要上传文件时，需要设为enctype=”multipart/form-data
”）
4.2 <input>标签
属性：name;value;maxlength;size;type(text、password、
file、submit、reset、checkbox复选框、radio单选框)
4.3<textarea>标签
<textarea></textarea>
属性：name、cols（多行文本输入框的列数）、rows（设置多
行文本的行数）、wrap（设置多行文本框中的文本超出文本列
宽时是否换行，取值有virtual换行、physical换行、off不换
行，默认为换行）
4.4<select>标签与<option>标签
主要用来定义列表框。语法格式为：<select></select>.
<select>标签必须与<option>标签配套使用，后者用于定义列
表框的各个选项。<option>标签可以单独使用，也可成对使用
。
<select>标签属性：name、size
<option>标签属性：value、selected
5．框架
使用Frames结构设计的HTML文件，能够将整个窗口分为几个独
立的小窗口，每一个窗口可分别载入到不同的文件，每个窗口
是可以互相沟通的。
<frameset>
<frame src=http://www.mamicode.com/”url”>
<frame src=http://www.mamicode.com/”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="http://www.mamicode.com/A.html">
<frame src="http://www.mamicode.com/B.html">
<frame src="http://www.mamicode.com/C.html">
</frameset>
（2） 横向排列多个窗口
<framesetrows=25%,25%,50%>
<frame src="http://www.mamicode.com/A.html">
<frame src="http://www.mamicode.com/B.html">
<frame src="http://www.mamicode.com/C.html">
</frameset>
<Frameset>标签是可以嵌套使用的，也就是说，可以将其中某
一个或某几个子窗口再划分为若干个更小的窗口。
<html>
<frameset cols="30%,90,*">
<framesrc="http://www.mamicode.com/td1.html" name=cont>
<framesetrows="120,*">
<frame src="http://www.mamicode.com/Tulip.jpg">
<frame src="http://www.mamicode.com/蒲公英的约定.mp3">
</frameset>
<framesrc="http://www.mamicode.com/td2.html" name=another>
</frameset>
</html>
5.2 各窗口间相互操作
由Frames分出来的几个窗口的内容并不是静止不变的，往往一
个窗口的内容随着另一个窗口的要求而不断变化，这就提高了
Frames的利用价值。为了完成各窗口之间的相互操作，我们必
须为每一个窗口起一个名字，这个名字用属性Name来定义。
<framesrc=http://www.mamicode.com/url name=“窗口名”>
例如：<frame src="http://www.mamicode.com/a.html" name=“left”>
定义了窗口名称，还应该有Target来配合使用，Target属性指
定了所链接的文件出现在哪一窗口。Target的值可以是name定
义的名称，也可以是以下四类值：
<a href=http://www.mamicode.com/urltarget=_blank> 显示一个新窗口
<a href=http://www.mamicode.com/urltarget=_self> 显示在同一个窗口
<a href=http://www.mamicode.com/urltarget=_parent> 显示在Frameset的前一份文>
件的窗口
<a href=http://www.mamicode.com/urltarget=_top> 显示在整个浏览器窗口
HTML+CSS学习笔记