HTML/CSS学习笔记
1. HTML结构
答：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- 1) 申明这个页面的HMTL版本为4.01;
2) “EN”指明DTD中语言是英语;
-->
<html>
<head>
<!--head元素包括当前页面中信息，例如标题、用于搜索引擎中的关键字以及其它一些不会被认为是页面内容的数据-->
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
<meta name="author" content="John">
<meta name="keywords" content="web development">
<!--元数据，被设计帮助用于搜索引擎检索页面-->
<title>HelloWorld Test</title>
<!--页面标题，会显示在浏览器标题栏内-->
</head>
<body>
Hello World!
</body>
</html>
整个页面分成三部分：
1) 一行包括HTML版本信息的内容;
2) 报头声明区域;
3) 页面主要部分，包括页面的实际内容。
2. 基本的HTML标记
答：1) Headings(标题): <h1>This is a heading</h1>;
2) Paragraphs(段落): <p> This is a paragraph</p>;
3) Line Breaks(换行): This <br> is a para <br> graph with line breaks;
4) Comments in HTML(注释): <!-- This is a comment -->;
3. HTML 文本格式
答：1) <b>: 粗体;
2) <big>: 大号;
3) <em>: 强调;
4) <i>: 斜体;
5) <small>: 小号;
6) <strong>: 加强;
4. HTML 列表
答：1) 无序列表(Unordered Lists)
<ul><li>Coffee</li><li>Milk</li></ul>
2) 有序列表(Ordered Lists)
<ol><li>Coffee</li><li>Milk</li></ol>
3) 自定义列表(Definition Lists)
<dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>
5. HTML 表格
答：1) 表格
<table border="1">
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td> </td></tr>
</table>
2) 表头
<table border="1">
<tr><th>HEading</th><th>Another Heading</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
6. HTML 框架
答：1) <frameset>: 定义框架集;
2) <frame>:定义子窗体(一个框架);
3) <noframes>: 定义一个非框架区域;
4) <iframe>: 定义一个内嵌子窗体;
5) 示例：
<frameset cols="25%, 75%">
<!-- <frameset cols="100, *"> -->
<!-- <frameset cols="100, 300"> -->
<frame src = "frame_a.htm">
<frame src = "frame_b.htm">
</frameset>
7. HTML 表单和输入
答：1) 表单格式: <form action="..." method = "...">...</form>
a. action: 表单的处理页面，例如：action="Hello.jsp"
b. method: Get,Post.
2) 输入类型:
a. 文本框：<input type="text" name="firstname">
b. 密码：<input type="password" name="pwd" size=10 maxlength=8>
c. 单选按钮：<input type="radio" name="sex" value="male">Male
d. 复选框：<input type="checkbox" name="bike">Bike
e. 按钮：<input type="button" value="Hello world!">
f. 提交按钮：<input type="submit" value="Submit">
g. 重置按钮：<input type="reset" value="Reset">
h. 下拉框：<select name="cars">
<option value="Popo">Popo
<option value="Viso">Viso
</select>
i. 文框域：<textarea rows="10" cols="30"></textarea>
8. HTML 表单提交方法
答：1) GET: 客户端的表单请求数据被编码进地址。服务器端通过环境变量接收数据。
2) POST: 请求数据包括头部和主要部分。
1) GET方法适合数据小于256个字符, 主要目的是查找。
2) POST方法应该被用于请求将会导致服务器端状态的永久改变。
9. HTML 图像
答：1) 普通图像：<img src="enterinfo.gif" alt="Enterinfo Studio" width="200" height="100">
2) 背景图像：<body background="enterinfobg.gif">
3) 图片链接：<a href = "http://www.enterinfo.net"><img border="0" src="enterinfo.gif" width="200" height"100"></a>
10. HTML 多媒体
答：1) 音频设备或音频播放器
<embed src="lzh.mp3" height=160 width=244 controls="bigconsole" autostart="false" nosave="true" loop="true"></embed>
2) 背景音乐
<bgsound src="lzh.mp3" loop="10">
2004-9-10 星期五 阴
1. CSS在页面的位置
答：1) 外部文件引用：
<head>
<link rel="stylesheet" type="text/css" href="enterinfo.css">
</head>
2) 页面头部
<head>
<style type="text/css">
body{background-color:red}
</style>
</head>
3) 作为属性
<p style="color:red">This is a paragraph</p>
2. CSS语法
答：CSS由三部分组成：选择值(selector), 属性(property)和对应的值(value)
示例：
p{text-align:center;color:blue;font-family:arial} /* 多个属性间以分号分隔 */
h1,h2,h3,h4,h5,h6{color:green} /* 多个选择值间以逗号分隔 */
3. 选择值中的class和id
答：1) 类属性(Class attribute):
p.right {text-align:right} /* 定义类"right" */
p.center{texta-align:center} /* 定义类"center" */
<p class="right>This paragraph will be right-aligned. </p>
<p class="right>This paragraph will be right-aligned. </p>
2) ID 属性
*#ei{color:green} /* 定义id */
<p id="ei">A new paragraph starts from here.</p>
4. web是如何工作的？
答：1) Web服务器: 一个Web服务器就像一个计算机程序监听从Browser发出的请求然后响应这些请求。
2) 请求：客户端通过HTTP协议请服务器返回一个存储在服务器端的文档，客户端和服务器端使用TCP/IP(或FTP)协议进行会话。
3) 响应：当服务器端收到HTTP请求，它定位到相关的文档并且返回它。